ジャバスクリプト--->いくつかの他のクロスドメイン技術（画像のPing、JSONP、コメット）

過去CORS（クロスオリジンリソースの共有、クロスドメイン・リソースの共有）でクロスドメインのAjax通信を実現するように見えることは困難である
あなたが使用できるDOMは、クロスドメインリクエストを実行することができ、クロスドメイン通信を実現するための機能を：

サーバーへの一方向通信ブラウザ：
この技術はimg.srcクロスドメインイベントを使用し、画像のPingと呼ばれる
ことができないimg.srcが唯一のブラウザのデータがサーバーに到着した場合にロードし、エラーイベントを聞くことによって決定することができますが、任意のコンテンツサーバを取得

// 图片Ping
var img = new Image();
img.onload = img.onerror = function() {
    alert("Done!");
};
img.src = "http://www.example.com/test?name=Nicholas";
// 由于是单向,因此最常用于跟踪用户点击页面或动态广告的曝光次数

コールバック双方向通信の機能：
。この技術は、JSONP（パディングとJSON、パラメトリックJSON）と呼ばれている
中で、動的に<script>を使用してsrc属性JSONP
：使用すると、最初のJSONPコールバック関数（のhandleResponseなど）を決定した
後、および要求URLでの戦いに？コールバック=のhandleResponseフォームでのコールバック関数

// JSONP
function handleResponse(response) {    // 回调函数
    alert("You`re at IP address " + response.ip + ", which is in " + resonse.city + ", " +response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";    // 带回调函数的url路劲放入src属性中
document.body.insertBefore(script, document.body.firstChild);

// 注1: response是请求freegeoip.net主机,端口80,json文件的数据返回的,使用的是http协议

：ページ・サーバ・テクノロジにデータをプッシュする
彗星：ロングポーリングの実装およびストリーム：ページ・サーバ・テクノロジにプッシュデータは、二つの概念を紹介します

// 长轮询:
// 页面发起一个到服务器的请求,然后服务器一直保持连接打开,直到有数据可以发送
// 发送完毕后,浏览器关闭连接,随即又发起一个新的连接并等待
// 此项技术可以通过XHR对象和setTimeout事件实现.

// 流
// 使用HTTP流实现:在页面的整个生命周期内只使用一个HTTP连接
// 具体来说,就是浏览器向服务器发送一个请求,然后与服务器保持连接打开状态,周期性的向浏览器发送数据
// 在Firefox、Safari、Opera和Chrome中,通过侦听readystatechange事件及检测readyState的值是否为3(接收到部分数据)
// 就可以利用XHR对象实现HTTP流

// 使用XHR 对象实现HTTP流
function createStreamingClient(url, progress, finished) {
    var xhr = new XMLHttpRequest,
        received = 0;
    
    xhr.open("get", url, true);
    xhr.onreadystatechange = function() {
        var result;
         
        if( xhr.readyState == 3) {
            // 只取得最新数据并调整计数器
            result = xhr.responseText.substring(received);
            received += result.length;
             
            // 调用progress回调函数
            progress(result);
        } else if ( xhr.readyState == 4) {
            finished(xhr.responseText)
        }
        xhr.send(null);
        return xhr;
}
// 调用
var client = createStreamingClient("streaming.php", function(data) {
                 alert("Received: " + data);
             }, function(data){
                 alert("Done!");
});

参考 "JavaScriptの高度なプログラミング"（第3版）P586〜P589

ジャバスクリプト--->いくつかの他のクロスドメイン技術（画像のPing、JSONP、コメット）

おすすめ