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

今回は、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 サイトの他の関連記事を参照してください。