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