ajaxとjsonpのクロスドメインの詳しい解説（コード付き）

今回は、ajax と jsonp のクロスドメインについて詳しく説明します (コード付き)。ajax と jsonp のクロスドメインを実装する際の 注意事項 について、実際のケースを見てみましょう。

クロスドメインの問題が発生するのはなぜですか? - 同一オリジンポリシーがあるため

同一オリジンポリシーとは、ブラウザのセキュリティポリシーであり、リクエストURLアドレス内のプロトコルが同じであることを指します。どちらかが異なる限り、それはクロスドメインです

同一生成元ポリシーは主にブラウザーのセキュリティを確保するためのものです

同一生成元ポリシーでは、ブラウザーは Ajax がサーバー データを取得することを許可しません。ドメイン

http://www.example.com/detail.html

クロスドメインリクエスト:

• http://api.example.com/detail.html ドメイン名が異なります

• http://www.example.com:8080/detail.html ポートが異なります

• http://api.example.com:8080/detail.html ドメイン名とポートが異なります

• https ://api.example.com/detail.html プロトコルとドメイン名が異なります

• https://www.example.com:8080/detail.html ポートとプロトコルが異なります

基本的な概念ajax の概念 この概念を理解するには、まず同期対話と非同期対話について理解する必要があります

同期対話: クライアントのブラウジング サーバーはサーバーにリクエストを送信し、サーバーはページを返します。前のページを上書きするこの対話方法を同期対話と呼びます
非同期対話: これは、ブラウザーがページをサーバー要求に送信し、サーバーがデータを返し、返されたデータが前のページを上書きしないことを意味します。この対話方法を非同期対話と呼びます
ajaxの主なアプリケーションシナリオ: ページを更新せずにサーバーと動的に対話できます データ対話

対話の原則

同期対話の原則: どのように行うかブラウザでサーバーにリクエストを送信しますか?ハイパーリンクをクリックしたり、フォームを送信したり、ブラウザのアドレス バーにアドレスを入力したりすることができます。これらはすべて、サーバーにリクエストを送信するのに役立ちます
非同期の原理。インタラクション: JavaScript は新しい API を提供します。API インターフェースは http リクエストの送信に役立ち、XMLHttpRequest オブジェクトはリクエストの送信に役立ちます
すべての対話型操作は、リクエストの送信とサーバーからのデータの受け取りというこのオブジェクトを通じて完了できます

Ajax の詳細 アプリケーション シナリオ

フロント デスクは、XMLHttpRequest を通じてサーバーにリクエストを送信し、XMLHttpRequest オブジェクトを通じてサーバーから返されたデータを受信し、最後に dom 操作を通じてデータをページに書き込むことができます。
ajax: フォーム入力仕様の検証に使用できます
ajax:
• パフォーマンスの最適化

  にも使用できます。たとえば、ページが非常に大きく、一度にすべてをロードすることができない場合。 、ローリングロードを実装します

XMLHttpRequest インタラクションの 4 つのステップ 1. XMLHttpRequest オブジェクトをインスタンス化します

2. サーバーと対話したい場合は、サーバーとの接続を開く必要があります

3サーバーにデータを送信し、パラメーター データをサーバーに送信します。 サーバーから返されたデータを受け入れます。 クライアントに返されるときに、一部のステータスが返されます。サーバーステータス

ajaxクロスドメイン

クロスドメイン: サイトにアクセスすると、バックグラウンドでAページが返され、このページのサイトBのリソースにアクセスしたいとします。サイト a. これはクロスドメインの影響です。クロスドメイン ブラウザにはセキュリティ制限があります。

ソリューション・クロスドメインメソッド: jsonpメソッド

JSONP、正式名はJSON with Paddingで、クロスドメインリクエストリソースを解決するためのJSON形式に基づくソリューションです。その実装の基本原理は、HTML の <script></script> 要素タグを使用して JSON ファイルをリモートで呼び出し、データ転送を実現することです。 a.com ドメイン下の b.com に存在する JSON データ (getUsers.JSON) を取得したい場合:

クロスドメインを解決する jsonp の基本原則: ブラウザーの同一オリジン制限により、異なるサイトは取得できません。相互にアクセスしますが、他のサイトからデータを取得したい場合があります。たとえば、簡単なデータを取得したい場所に 天気予報 データを追加するなどです。これはクロスドメインでなければなりません。どうすればよいでしょうか。

原則: <script> タグを動的に作成し、<script> の src を使用して、同一オリジン ポリシーの適用を受けずにクロスドメイン データを取得します。 </script>

このようにして、最終的にフロントから渡されたコールバック関数をバックグラウンドで取得することができ、バックグラウンドはこの関数の呼び出しを返し、パラメータはフロントから要求されたデータを取得することができます。この記事の場合は、この方法を使用します。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ajax を使用してドメイン間で json データを取得する方法

ajax リクエストのエラーステータスコードが 0 の場合の対処方法

以上がajaxとjsonpのクロスドメインの詳しい解説（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。