jqueryクロスドメインhttpリクエストデータ

jquery は、DOM 操作、イベント処理、アニメーション効果などを簡素化するために使用される人気のある JavaScript ライブラリです。最も一般的なアプリケーションは、ページを更新しないエクスペリエンスを実現するために、Ajax を介してバックエンド データをリクエストすることです。ただし、場合によっては、複数の異なるドメイン名からデータを取得する必要があり、その場合にはクロスドメイン要求が必要になります。この記事では、jquery を使用してクロスドメイン http リクエスト データを実行する方法を紹介します。

1.クロスドメインリクエストとは何ですか?

ブラウザ側では、ブラウザの同一オリジンポリシー、つまり同一オリジンポリシーの制限により、あるドメイン名のページから別のドメイン名のデータにアクセスすることはできません。相同性とは、プロトコル、ドメイン名、ポート番号がまったく同じである必要があることを意味します。たとえば、https://www.example.com と https://example.com は異なる起源を持ち、http://www.example.com と http://www.example.org は異なる起源を持っています。

クロスオリジン リクエストとは、あるソース (ドメイン名、プロトコル、ポート番号) から別のソースにデータをリクエストするプロセスを指します。クロスドメイン要求を実装するには、ブラウザーは一連のセキュリティ検証を完了して、要求されたデータが許可されていることを確認する必要があります。

2. クロスドメイン リクエスト メソッド

現在、より一般的なクロスドメイン リクエスト メソッドは次のとおりです:

1. JSONP

JSONP は、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを追加し、ブラウザを使用して JS ファイルへのクロスドメイン アクセスを許可することで、異なるドメイン間のクロスドメイン通信を実現する方法です。 JSONP は、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの src 属性を使用して他のドメイン名に HTTP リクエストを行うことができ、返されるデータにはコールバック関数を実行するコードが含まれているため、クロスドメイン データ リクエストとコールバック メカニズムが実現されます。

2. CORS

CORS は、サーバーが新しい HTTP ヘッダーを通じて他のソースからの Web ページ リクエストに応答できるようにする、標準のクロスオリジン リソース共有テクノロジです。 CORS にはブラウザーとサーバーのサポートが必要ですが、サーバーが他のドメインから応答にアクセスできることを認識している限り、ブラウザーはこのクロスドメイン要求を許可します。

3. プロキシ

プロキシ メソッドとは、同じドメイン名の下にプロキシ サーバーを展開し、そのプロキシ サーバーに他のドメイン名からのデータを要求させ、最後にリクエストの結果、フロントエンドのソリューション。この方法が実行可能であるという前提は、アクセスされるインターフェイスにクロスドメイン制限がないことです。JSONP プロトコルがサポートされておらず、CORS がクロスドメイン要件を満たせない状況に適しています。

4. PostMessage

PostMessage は、ウィンドウ間のドキュメント間通信用の API です。クロスソース通信の方法を提供し、あるドキュメントから別のドキュメントにメッセージを送信できるようにします。 2 つのドキュメントの起源が同じかどうかに関係なく、メッセージを送信します。

5. WebSocket

WebSocket は HTML5 の新しいプロトコルで、TCP プロトコルをベースにした双方向通信プロトコルであり、クロスドメイン通信を実現できます。 HTTP プロトコルとは異なります。WebSocket はデータ送信用の TCP 接続を作成しますが、接続を確立するときにプロトコルのアップグレードが必要です。

上記の方法にはそれぞれ長所と短所があるため、特定のシナリオに応じて適切なクロスドメイン リクエスト方法を選択してください。

3. クロスドメイン リクエストに jquery を使用する

クロスドメイン リクエストに jquery を使用するには、主に jquery で ajax メソッドを使用する必要があります。このメソッドは、非同期リクエストと同期リクエストもサポートしています。 2 つの一般的なリクエスト メソッド、GET と POST のサポートとして。具体的な使用法は次のとおりです。

1. JsonP request

Jsonp データ リクエストでは、サーバーから返されるデータ形式が jsonp 形式であり、callback という名前のパラメータが含まれていることを指定する必要があります。値はコールバック関数の名前で、コールバック関数名は jsonp スクリプト タグの src パラメータの callback コールバック パラメータを通じて実装されます。

$.ajax({

url: 'http://example.com/jsonp',
type: 'GET',
dataType: 'jsonp', //指定数据类型为jsonp
jsonp: 'callback', //指定回调函数名称
success: function(res) {
    console.log(res);
}

});

2. Cors request

Cors リクエストは、 header -Control-Allow-Origin フィールドが実装されています。 jquery では、ajax メソッドを通じてクロスドメイン リクエストを送信するときに、xhrFields パラメーターを設定することでクロスドメイン リクエストを実装できます。このうち、withCredentials パラメーターは、ブラウザーが Cookie 情報を保持するかどうかを制御するために使用されます。

$.ajax({

url: 'http://example.com/cors',
type: 'GET',
xhrFields: {
    withCredentials: true //允许携带cookie信息
},
success: function(res) {
    console.log(res);
}

});

4. 概要

クロスドメイン リクエストは、フロントエンド開発における非常に一般的な要件です。 . この記事 この記事では、一般的なクロスドメイン リクエストの方法と、jquery を使用してクロスドメイン http リクエスト データを実行する方法を紹介します。さまざまなクロスドメインリクエスト方法にはそれぞれ長所と短所があるため、特定のニーズに応じて適切な方法を選択してください。クロスドメインリクエストを実装するときは、悪意のある攻撃を避けるためにセキュリティの問題に注意を払う必要があります。

以上がjqueryクロスドメインhttpリクエストデータの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。