jqueryフロントエンドを使用してドメイン間でデータをリクエストする方法

フロントエンド開発では、さまざまなサーバーからデータをリクエストすることが必要になることがよくあります。ただし、同一生成元ポリシーの制限により、ドメインを越えてデータを直接リクエストすることはできません。この問題を解決するには、jQuery が提供するメソッドを使用できます。

1. クロスドメイン リクエスト データとは

クロスドメイン リクエスト データとは、クライアント (ブラウザ) を経由して別のサーバーにリクエストを送信してデータを取得することを指します。開発データを終了します。セキュリティ上の理由から、ブラウザは、送信元が異なるサーバーからのリクエストを制限します。同一オリジンとは、2 つのページのプロトコル、ポート、ホスト名が同じであることを意味します。ドメイン間でデータをリクエストする一般的な状況は、フロントエンド ページで Ajax を介して別のサーバーにデータをリクエストすることです。

2. クロスドメイン データ リクエストが必要な理由

クロスドメイン データ リクエストは、フロントエンド開発において非常に一般的な状況です。理由はいくつかあります。

• フロントエンドとバックエンドのロジックを分離する: フロントエンドとバックエンドの開発は 2 つの異なるチームによって完了することが多く、それぞれのコードを実行するには異なるサーバーが必要です。ドメイン間でデータを要求することにより、フロントエンドとバックエンドの間の論理的な分離をより明確にすることができます。
• リソースの保存: 一部の商用サービスは API インターフェイスのみを提供し、フロントエンド リソースを提供しない場合があります。現時点では、サービスを呼び出す必要がある場合は、ドメイン全体でデータをリクエストする必要があります。
• 複数のフロントエンド サーバーがデータを共有する: 場合によっては、異なるフロントエンド サーバーが同じバックエンド サービスにアクセスする必要があり、この場合、クロスドメイン データ要求が必要になります。

3. クロスドメイン データ リクエストを解決する方法

同一オリジン ポリシーの制限により、クロスドメイン データを直接リクエストすることはできませんが、

• JSONP: JavaScript はクロスドメイン リクエストをネイティブにサポートしていませんが、<script> タグの src 属性を使用して他のサーバーからデータをリクエストできます。メソッドはJSONPです。ただし、この方法ではサーバーが JSONP 形式でデータを返すことをサポートする必要があり、XSS 攻撃に対して脆弱です。 </script>
• CORS: Cross-Origin Resource Sharing (CORS) は、サーバーが HTTP ヘッダーを通じてどのドメインへのアクセスが許可されているかをブラウザーに伝えることができるブラウザー テクノロジです。ただし、この方法にはサーバー側のサポートが必要です。
• プロキシ: フロントエンド サーバーは、バックエンド サーバー経由で他のサーバーにリクエストを送信し、結果をフロントエンドに返します。ただし、この方法ではフロントエンド開発者がバックエンドサーバー技術を理解する必要があり、サーバーのオーバーヘッドが大きくなります。

4. jQuery を使用してドメイン間でデータをリクエストする

jQuery には、ドメイン間でデータをリクエストするためのメソッドがいくつか用意されています:

• $ .ajax() メソッド: jQuery で最も一般的に使用される Ajax メソッド。contentType 属性を設定することでサーバーが受信する必要があるデータ形式を指定でき、dataType 属性でサーバーから返されるデータ形式を指定できます。
• $.getJSON() メソッド: このメソッドは $.ajax() メソッドを単純にカプセル化したもので、GET リクエストを通じて JSON 形式でデータを取得するために使用されます。
• $.getScript() メソッド: このメソッドは $.ajax() メソッドの単純なカプセル化であり、GET リクエストを通じて JavaScript ファイルを取得するために使用されます。
• $.postMessage() メソッド: このメソッドは、複数のウィンドウ/ページ間の安全なクロスドメイン通信のために HTML5 で導入されました。

具体的なコードは次のとおりです:

$.ajax({
   url: 'http://example.com/test.php',
   dataType: 'jsonp',
   success: function(data){
      console.log(data);
   },
   error: function(){
      console.log("error");
   }
});

$.getJSON('http://example.com/test.php', function(data){
  console.log(data);
});

$.getScript('http://example.com/test.js', function(){
  console.log("script loaded");
});

window.postMessage("message", "http://example.com");

つまり、jQuery を使用してドメイン間でデータをリクエストするプロセスでは、リクエスト ヘッダー、パラメーター、およびコールバック関数を設定する必要があります。目的のデータを取得します。

5. 結論

クロスドメイン データ リクエストは、フロントエンド開発において非常に一般的な状況です。同一オリジン ポリシーの制限により、ドメインを越えてデータをリクエストすることが困難になりますが、この問題は、JSONP、CORS、プロキシなどの方法を使用して解決できます。 jQuery が提供するメソッドを使用すると、ドメイン間でデータをリクエストするプロセスをよりシンプルかつ効率的に行うことができます。

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