AJAXドメイン間ソリューション

ドメイン間メソッド:1、サブドメイン間iframe 2、JSONPの欠点:getメソッドのみサポート;バックエンドコードを調整する3、CORSローカルはどのようにドメインをまたいで本機のhostsファイルを修正することを模擬します

127.0.0.1 a.test.com
127.0.0.1 b.test.com

サブドメイン間ソリューションがa.test.comアクセスb.test.comのインタフェース、ajaxは許されず、iframeは効果を実現することができます.iframeの協力により、サブドメイン間での要求操作を許可する:ドメインの昇格-document.domain="test.com"JSONPソリューションHTML種は、すべてのsrc属性付きラベルがドメインにまたがることができ、script/img/iframe.したがって、scriptを使用して、他のドメインの動的スクリプトをロードできます.このスクリプトには、目的のデータ情報が含まれています.方法1、前後端は約束して、callback関数名はhandlerです

//  script  
//url http     
var url="http://localhost:8080/xxx.do";
//  script                  JS      
function createScriptElement(){
   var script = document.createElement('script');
   script.setAttribute('src', url+"?callback=handler");
   document.querySelector("head").appendChild(script);
}
//            
function handler(data){
   alert(data);
}
/*http://localhost:8080/xxx.do?callback=handler         ，
      callback          handler，            
        ： {"xxx": "xxx", "yyy": "yyy"}
        ： handler({"xxx": "xxx", "yyy": "yyy"})
  script           handler({"xxx": "xxx", "yyy": "yyy"})   js    ，
        handler    ，      {"xxx": "xxx", "yyy": "yyy"}
                handler      ，           
*/

方法2,前後端にcallback関数名を約定する必要がない

function jsonp(url,data,callback){
   var script=document.createElement('script');
   document.body.appendChild(script);
   data=data||{};
   data.callback='cb'+new Date().getTime();//      
   window[data.callback]=callback;
    url+='?'+$.param(data);

    script.src=url;
    script.onload=function(){
       document.body.removeChild(script);
    }
}
//       
res.setHeader('Content-type','application/javascript');
res.send(req.query.callback+'('+JSON.stringify({a:1,b:2})+')');

方法3,jqueryを用いたパッケージング方法

$.getJSON('http://b.test.com/testjsonp2?callback=?',
{test:'ok'},function(){});

$.ajax('http://b.test.com/testjsonp2?callback=?',
{dataType:'jsonp'}).done(function(){});

$.ajax('http://b.test.com/testjsonp2',
{dataType:'jsonp',jsonp:'cbname',jsonpCallback:'cbfun'},
success:function(){})

CORSソリューションCORSは全称ドメイン間リソース共有(Cross-Origin Resource Sharing)であり、ajaxドメイン間リソース要求方式であり、現代ブラウザをサポートし、IEは10以上をサポートする.
xhrをサポートし、level 2標準のブラウザはドメイン間セキュリティのために、ブラウザが要求が許可されているかどうかを検証するために、サーバ応答ヘッダにいくつかの情報を提供する必要があります.Access-Control-Allow-Orgin Access-Control-Allow-Method Access-Control-Allow-Headersの実装は簡単です.ソース間リソース共有(CORS)は、クライアント+サービス側のコラボレーション宣言によって要求の安全を確保します.クライアント

/*     XMLHttpRequest      ，
               ，           ：Origin*/
    var xhr = new XMLHttpRequest();
    xhr.open("post", "http://b.example.com/Test.ashx", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");　　　
    //      
    xhr.setRequestHeader("Origin", "http://a.example.com");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var responseText = xhr.responseText;
            console.info(responseText);
        }
    }
    xhr.send();

サーバ側

//                      ：Access-Control-Allow-Origin
context.Response.ContentType = "text/plain";
//           
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
context.Response.Write("Hello World");

ビューアは、対応するヘッダにOriginの値が含まれているかどうかを判断し、ある場合はブラウザが応答を処理し、ブラウザが含まれていなければ直接却下することができ、この場合は応答データを取得できません.
1、JSONPはGET要求しか実現できないが、CORSはすべてのタイプのHTTP要求をサポートする.2、CORSを使用すると、開発者は通常のXMLHttpRequestを使用して要求を開始し、データを取得することができ、JSONPより良いエラー処理がある.3、JSONPは主に古いブラウザにサポートされており、CORSをサポートしていないことが多いが、ほとんどの現代ブラウザはCORSをサポートしている.