ホームページ >ウェブフロントエンド >jsチュートリアル >AJAX と AJAX クロスドメインとは何かを理解するための 1 つのステップ

AJAX と AJAX クロスドメインとは何かを理解するための 1 つのステップ

帅杰杰
帅杰杰オリジナル
2020-05-06 16:19:47239ブラウズ

AJAX の仕組み

AJAX = 非同期 JavaScript と XML 簡単に言えば、AJAX は Web ページ全体を再読み込みすることなく、バックグラウンドでデータを読み込み、Web ページに表示します。

Ajax の動作原理図:

AJAX と AJAX クロスドメインとは何かを理解するための 1 つのステップ

Ajax の概略図から、ブラウザーがサーバーにリクエストするために URL アドレスを入力すると、http リクエストが Ajax を通じてサーバーに送信され、サービスの応答結果も最初にAjaxに戻り、最初にAjax処理してからブラウザに戻ってページに表示します。 Ajax がない場合、ブラウザは http リクエストをサーバーに直接送信し、サーバーがリクエストを処理した後、応答結果が直接ブラウザに返されて表示されます。

Ajaxの機能は、jsまたはjQueryを通じてhttpリクエストを送信することであり、httpリクエストにはURLアドレス、データ、データ値の転送メソッドが含まれており、サーバーが応答した後に結果が返される必要があります。

AJAX 技術コンポーネント:

JavaScript、CSS、DOM、XMLHttpRequest

AJAX ネイティブ記述メソッド:

Ajax のコアは、Ajax 実装の鍵となる XMLHttpRequest オブジェクトであり、非同期リクエストの送信、受信を行います。応答とコールバックの実行はそれを通じて行われます。 jQuery の

//第一步:
var xhr=new XMLHttpRequest();
//第二步:
xhr.open("post","test.php");
//第三步:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//第四步:
xhr.send("a=1&b=10");  //get请求报文体写法
//第五步:
xhr.onreadystatechange=function(){
    if(xhr.status=200 && xhr.readyState==4){
        var result=xhr.responseText;  //获取结果
        alert(result);
    }
}

AJAX 構文:

jQuery は、jQuery AJAX メソッドを通じて、Get または Post を使用して、リモート サーバーからテキスト、HTML、XML、または JSON をリクエストします。この外部データは、Web ページの選択された要素に直接ロードされます。

$.ajax({
   url:"请求的url地址",
   type:"get|post",
   data:"数据" ,
   dataType:"text|json|xml|script",
   success:function(re){
       //服务器回传数据处理
   }
});

AJAX の get() メソッドと post() メソッド

jQuery の get() メソッドと post() メソッドは、HTTP GET リクエストまたは POST リクエストを通じてサーバーにデータをリクエストするために使用されます。 GET は指定されたリソースからデータを要求し、POST は指定されたリソースから処理対象のデータを送信します。

jQuery で Ajax を記述する他の方法は次のとおりです:

$.get(url,data,callback,dataType)
$.post(url,data,callback,dataType)
パラメータ名 説明
url 要求された URL アドレス
データ (オプション) ) サーバーに送信Key-Value 型のデータ
コールバック (オプション) ロードが成功した場合のコールバック関数
dataType (オプション)

サーバーから返されるコンテンツの形式 (xml、html、json など)

AJAX クロスドメイン

クロスドメインの「ドメイン」は 2 つのドメイン名を指します。クロスドメインとは、ドメイン名 A の下にプログラム A があり、ドメイン名 B の下にプログラム B が存在することを意味します。 Ajax を介してプログラム B にドメイン名でアクセスすると、この形式のアクセスはブラウザによって拒否されます。 AJAX は、別のドメイン名のプログラムを直接リクエストすることはできません。この問題の解決策は、リクエストを行うと、戻りデータが jsonp の形式で返され、リクエストが成功した後に fun1 が呼び出されるため、データがあることを宣言する必要があります。 fun1 のパラメータ、このパラメータのデータは B です。ドメイン名でプログラム B によって返されたデータは、fun1 でクロスドメインで見ることができます。このようにして、クロスドメインが実現されます。

AJAX の利点:

  • サーバーの負荷を軽減し、ブラウジングを高速化します。

  • ユーザー インタラクションが増えると、ユーザー エクスペリエンスが向上します。

  • 標準化され広くサポートされているテクノロジーに基づいているため、ブラウザーはドメイン全体で AJAX テクノロジーをサポートするようになりました。

  • ページのプレゼンテーションとデータの分離をさらに推進します。

以上がAJAX と AJAX クロスドメインとは何かを理解するための 1 つのステップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。