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

原則:

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル