Ajax でクロスドメイン アクセスを実現する 3 つの方法のまとめ

php中世界最好的语言
リリース: 2018-04-24 16:51:42
オリジナル
2094 人が閲覧しました

今回は、Ajax でクロスドメイン アクセスを実現するための 3 つの方法についてまとめました。Ajax がクロスドメイン アクセスを実現するための 注意事項 について、実際の事例を見てみましょう。

1. クロスドメインとは

まずはドメイン名のアドレス構成を確認してみましょう:

http:// www . google: 8080/script/jquery.js

http:// (プロトコル番号)submainサブドメイン名、メインドメイン名、およびポート番号のいずれかが異なる場合、それらはすべて異なる「ドメイン」と見なされます。

* 異なるドメインが相互にリソースを要求することを「クロスドメイン」と呼びます。

例: http://www.abc.com/index.html リクエスト http://www.def.com/sever.php

2 番目、クロスドメインを処理するための方法 1 -- プロキシ

(これ「Stupid」を比較する方法です(詳しくは紹介しません)

例えば、北京(www.beijing.com/sever.php)と上海(www.shanghai.com/sever.php)に2つのサーバーがあります。 )、北京のバックエンド (www.beijing.com/sever.php) は上海のサービスに直接アクセスし、取得した応答値をフロントエンドに返します。つまり、北京のサービスはバックグラウンドでプロキシとして機能し、フロントエンドは北京のサーバーにアクセスするだけでよく、これは上海のサーバーにアクセスするのと同じです。この種のエージェントは背景技術に属するため、詳しくは説明しません。

3. クロスドメインを処理する方法 2 - JSONP

ページ http://www.aaa.com/index.php が http://www.bbb.com/getinfo.php に送信されると仮定します。 GET リクエストを送信したら、www.aaa.com ページに次のコードを追加します。

  var eleScript= document.createElement("script"); //创建一个script元素
  eleScript.type = "text/javascript"; //声明类型、
  eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src属性 引入跨域访问的url
  document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在页面中添加新创建的script元素
ログイン後にコピー
GET リクエストが http://www.bbb.com/getinfo.php から返されると、このコードが返されます。 will 自動実行を使用して、http://www.aaa.com/index.php ページでコールバック関数を呼び出すことができます。次の例を見てください:

www.aaa.com ページ内:

<script>
  function jsonp( json ){
    document.write( json.name ); //输出周星驰
}
<script>
<script src="http://www.bbb.com/getinfo.php"></script>
ログイン後にコピー

www.bbb.com ページ内: jsonp({ "name":"Stephen Chow","age":45 }) ;

つまり、www.aaa.com ページで宣言され、www.bbb.com ページで呼び出されます。ただし、JSONP は「GET」リクエストのみをサポートし、「POST」リクエストはサポートしません。

3. クロスドメインを処理する方法 2 - XHR2 (推奨方法)

「XHR2」の正式名称「XMLHttpRequest Level2」は、クロスドメイン アクセスを適切にサポートする HTML5 によって提供されるメソッドです。いくつかの新機能。

* IE10未満のバージョンはサポートされていません

* 次の2行のコードをサーバー側ヘッダーに追加するだけです:

header( "Access-Control-Allow-Origin:*" ); header( "Access -Control-Allow-Methods:POST,GET" );

「XHR2」の詳細については、公式ドキュメントを確認してください。ここでは詳しく説明しません。一言で言えば、これは非常に便利なメソッドです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がAjax でクロスドメイン アクセスを実現する 3 つの方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート