AJAX はプロキシ、JSONP、および XHR2 を使用してクロスドメインを実現します

今回は、プロキシ、JSONP、XHR2を使用してクロスドメイン実装を実現するための注意点について、実際の事例を交えて見ていきましょう。

ドメイン: ドメインは、WIN2K ネットワーク システムのセキュリティ境界です。コンピュータ ネットワークの最も基本的な単位は「ドメイン」であることはわかっていますが、これは WIN2K に特有のものではありませんが、Active Directory は 1 つ以上のドメインを通じて実行できます。独立したコンピュータでは、ドメインはコンピュータ自体を指しますが、同時に、物理的な場所を異なるネットワーク セグメントに分割して、各ドメインに独自のセキュリティ ポリシーを持たせることもできます。他のドメインとの信頼関係との関係。複数のドメインが信頼関係を通じて接続されている場合、Active Directory を複数の信頼するドメインで共有できます。

職場で他のドメイン名でリクエストをリクエストするには AJAX を使用する必要があるため、アクセスは拒否されます。これは、セキュリティ上の考慮事項に基づいて、AJAX はローカル リソースにのみアクセスでき、クロスドメイン リソースにはアクセスできないためです。

たとえば、Web サイトのドメイン名が aaa.com で、AJAX 経由で bbb.com ドメイン名のコンテンツをリクエストしたい場合、ブラウザはそれを安全でないとみなしてアクセスを拒否します。

クロスドメインの問題が発生する状況はいくつかあります:

この問題を解決するためにバックグラウンドで Baidu で解決策を検索し、合計 3 つの解決策がまとめられました: プロキシ、JSONP、XHR2 (XMLHttpRequest レベル 2) ）。

最初のメソッドプロキシ: このメソッドは、バックエンド (ASP、PHP、JAVA、ASP.NET) を介して他のドメイン名でコンテンツを取得し、取得したコンテンツをフロントエンドに返すことです。同じドメイン名であれば、クロスドメインの問題は発生しません。

実装コード: AJAXリクエストを作成します(ページアドレス: http://localhost/ajax/proxy.html)

var request = null;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHttp");
}
request.onreadystatechange = function(){
console.log(this.readyState);
if(this.readyState===4 && this.status===200){
var resultObj = eval("("+this.responseText+")"); //将返回的文本数据转换JSON对象
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex; //将返回的内容显示在页面中
}
}
request.open("POST","proxy.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("name=吕铭印&sex=男");

AJAXリクエストを作成します。

proxy.php コード

header("Content-type:text/html;charset=utf-8");
$url = "http://localhost:63342/ajax/proxy.js";
$contents = file_get_contents($url);
echo $contents;

PHP コードを使用して、localhost:63342 にある proxy.js ファイルを取得します。

proxy.js コード

{
name : "吕铭印",
sex : "男"
}

proxy.html 実行結果

この時点では、プロキシを使用して、異なるドメイン間のファイルにアクセスします。

まず、AJAXを使用してproxy.htmlのバックグラウンドでproxy.phpファイルにアクセスし、proxy.phpがリクエストを受信した後、proxy.jsのコンテンツを取得した後、localhost:63342のproxy.jsファイルにアクセスします。コンテンツを戻る フロントエンド ページはクロスドメイン機能を実現します。

複数のクロスドメイン ファイルにアクセスしたい場合は、バックグラウンドの proxy.php ファイルにパラメータの形式でアクセスしたいファイルのアドレスを指定できます。

2 番目のメソッド JSONP (GET リクエストのみをサポート): その後、JS ファイルを呼び出すときにクロスドメインの影響がないことが発見され、2 番目のメソッドが派生しました。

クライアントの呼び出しとさらなる処理のために、データをリモートサーバー上の js ファイルにロードします。

jsonp.html

var url = "http://localhost:63342/ajax/jsonp.php?name=吕铭印&sex=男&callbackname=jsonp_callback"; //访问localhost:63342下的jsonp.php
var scriptTag = document.createElement("script"); //创建一个script标签
scriptTag.setAttribute("src",url); //设置script的src属性
document.body.appendChild(scriptTag); //将script标签添加到body中
//回调函数
var jsonp_callback = function(resultObj){
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;
}

jsonp.php

$name = $_GET["name"];
$sex = $_GET["sex"];
$callbackname = $_GET["callbackname"]; //回调函数名称
echo "$callbackname({name:'$name',sex:'$sex'})";

jsonp.html 実行結果:

実装原則: スクリプトタグを使用したリモート JS ファイルの呼び出しはクロスドメインの影響を受けないため、 script タグでは、src 属性を通じてリモート ファイル にアクセスします。

実はこれはAJAXには属しませんが、AJAX風の機能を実現できます。

3 番目のメソッド XMLHttpRequest レベル 2: HTML5 によって提供される XMLHttpRequest レベル 2 には、クロスドメイン アクセスとその他のいくつかの新機能が実装されています

これには、リモート サーバー側に次のコードを追加する必要があります

header('Access-Control-Allow-Origin:*'); //*代表可访问的地址，可以设置指定域名
header('Access-Control-Allow-Methods:POST,GET');

この方法では、 クライアント一般的な AJAX コードで十分です。

要約: プロキシの実装は最も面倒ですが、AJAX をサポートするブラウザであればどれでもこの方法を使用できます。

JSONP は比較的単純ですが、GET メソッド呼び出しのみをサポートします。

XHR2 が最もシンプルですが、HTML5 のみをサポートしています。モバイル端末向けに開発している場合は、XHR2 の使用を選択できます。

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

推奨読書:

同じドメイン内のJSカプセル化、jsonpクロスドメイン(コード付き)

jQueryはテキストボックスのフォーカスを切り替えるようにキーボードを設定します

以上がAJAX はプロキシ、JSONP、および XHR2 を使用してクロスドメインを実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。