简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

php中世界最好的语言
リリース： 2018-03-30 16:54:30
オリジナル
1401 人が閲覧しました

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

原則:

人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！