クロスドメインJSの概要を達成するためにいくつかの方法

クロスドメイン

同一生成元ポリシーが存在するが、それはクロスドメインのjsではまだ非常に一般的ですが、そこにdocument.domainを、window.name、写真ピング、JSONP、CORSが、簡単には、ここでは次の画像のping、JSONPとCORSメモをまとめます。

絵ピング

シンプルなクロスドメインを達成することができ、他のドメインのURLへのimgのsrcセットは、あなたが応答を受信したか否かを判断するためにオンロードとは、onerrorイベントを使用できるように画像は、任意のURLからロードすることができます。

VaRのIMG =新しいイメージ（）;
img.src = 'のhttp：//www.jb51.net';
img.οnerrοr=関数（）{
 警告（ 'エラー'）;
}
img.οnlοad=関数（）{
 警告（ '成功'）;
}

ここでは、新たな対象IMG、与えられたURLアドレスはブログで、ここではエラーイベントなので、ポップアップエラーがあり、URLが画像に変更された場合http://images.jb51.net//710118/o_MacBook%20Air.pngそれは、単純なクロスドメインを達成するために、情報の成功をロードするためのonloadポップアップ表示されます。

画像のみのping要求やテキストにアクセスすることはできません応答を得る送ることができますクロスドメインを使用し、それだけで応答が広告のクリックを追跡するために使用することができるかどうかを監視することができます。

JSONP

JSONPは、以前パディングとJSONとして、翻訳が満たされているJSON、パラメトリックJSONを知られ、コールバック関数コールバックをJSONです。

このコールバックは、達成するために、私たち自身でJSONデータを受信することが可能であるということですので、スクリプトSRCクロスドメインなので、そう、URLを送信した後、サーバーに渡されたコールバックパラメータを追加し、サーバは、パラメータ、コールバックなどのデータを返します。処理のため。

次のように単純なコードは次のとおりです。

ます。<script type = "text / javascriptの">
関数呼び出し（データ）{
 警告（data.city）。
}
</ SCRIPT>
ます。<script type = "text / javascriptの" SRC = 'のhttp：？//freegeoip.net/json/コールバック=コール'> </ SCRIPT>

ここでは、スクリプトのsrcがある設定http://freegeoip.net/json/?callback=callこれがモザイクのように、その後、コールバックパラメータを（ここで訪問することができます興味を持っている）のgetユーザーのIPアドレスのAPIです、 URLの後に、JSONデータは、我々はコールのためのコールバック関数を定義し、返されるJSONデータをパラメータとして渡すを呼び出します、この関数は単にユーザーのポップアップ都会呼び出し、パラメータのコールバックとして返されます。ここでの出力は、河北省の著者です。その他の情報IPは公式ウェブサイトを閲覧することができ、そこには、このようなようにCOUNTRY_NAME、TIME_ZONEとして、上記で詳述されています。

CORS（クロスリソースの共有）

CORSをXDomainRequestは、XDRオブジェクトをインスタンス化するためのリソース、クロスサイトリソース教材の共有、AJAX全体で共有し、それは非常に実際には同じである、すなわちされ、我々は唯一のresponseTextにアクセスすることができ、イベントトリガーは、負荷やエラー、書き込みとXHRですずっと同じでなく、オープンして送信する必要があります。

あなたはクロスブラウザを達成する必要がある場合は、単にXHRデモを取るためにここにmyvin、XHRでインスタンス化されたFF、Chromeとその他のブラウザについては、XDRと互換性を持つことができます。

XHRとして、次のとおりです。

VaRのXHR =新しいXMLHttpRequestを（）;   
VaRのURL = "http://www.jb51.net"。
xhr.open（ 'GET'、URL）; 
xhr.send（NULL）。

这里使用的url是http://www.jb51.net，和ajax唯一的区别就是url使用的是跨域的绝对地址，在ajax中使用的本页面内的相对地址或绝对地址。

看一下控制台，这里用的是ff40.0.3，显示信息如下：

已阻止跨源请求：同源策略禁止读取位于 http://www.jb51.net 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。

所以用CORS实现跨域还有一步要做，就是在服务器端设置Access-Control-Allow-Origin。

转自：http://www.jb51.net/article/73872.htm