AJAXのクロスドメインリクエストデータメソッドのまとめ（実践解説）

今回は、AJAX クロスドメイン データ リクエストの方法の概要 (実践的な説明) をお送りします。AJAX クロスドメイン データ リクエストの 注意事項 について、実際のケースを見てみましょう。

ブラウザの同一オリジンポリシーにより、Ajaxリクエストはリクエストレスポンスから返されたデータを受け取ることができません

リクエストデータはブラウザの組み込みコンストラクタ XMLHttpRequest()を呼び出してインスタンスオブジェクトを作成する必要があります

var xhr = new XMLHttpRequest();

ActiveXobject ("Microsoft. .readyState この属性はリクエスト データのいくつかの状態を保存します

1.xhr.open (リクエスト メソッド、リクエスト アドレス、同期/非同期の設定);

2.xhr.send(null);// リクエストの送信

postリクエストの場合、send

3でパラメータを渡す必要があります3。

4. データが返された場合、xhr.readyState の値は 4 になり、データが正常に返されたことを示します

それでは、クロスドメインリクエストを行うにはどうすればよいでしょうか?

オプション 1:

データをリクエストするには script タグの src 属性を使用します。 src 属性によってリクエストされたデータはブラウザによって傍受されません この方法でデータをリクエストできますが、いくつかの欠点があります

1. リクエストをいつ送信するかを制御できません。ここでページがロードされると、リクエストが送信されます

2このように、リクエストはコードの次のステップが実行される前にデータをリクエストする必要があるため、使用しないことをお勧めします。この方法をお勧めします

オプション 2:

要求されたインターフェイスを指定するために js でスクリプト タグを動的に作成します

var script = document.createELEment("script");//スクリプトを追加しますhead タグ

document.getElementsTagName("head")[0].appendChild(script);

利点: リクエストのタイミングを制御でき、リクエストは非同期であり、ページの読み込み時間は延長されません重要ポイント: リクエスト データ内のリクエスト ページで関数を呼び出すことができます

関数の仮パラメータを使用して、リクエストから返されたデータを受け取ります

オプション 3:

リクエストのバックエンド インターフェイス

Access-Control-Allow-Origin

このリクエスト ヘッダーを含むと、フロントエンド ページ上のクロスドメイン リクエストのデータはブラウザーによって傍受されません

オプション 4:

ページをアクセシブルにするには、

以上がAJAXのクロスドメインリクエストデータメソッドのまとめ（実践解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。