一，目前主流的JSONP，這個(gè)名字的來源是jq的Ajax請(qǐng)求有現(xiàn)成的封裝好了的跨域方法，只需要在Ajax請(qǐng)求里設(shè)置一個(gè)dataType屬性等于jsonp即可：
$.ajax({??
????????type?:?"get",??
????????async:false,??
? ? ? ? url?:?"http://xxxx.com/index.html?sid=1494&busiId=101",
????????dataType?:?"jsonp",//數(shù)據(jù)類型為jsonp??
????????jsonp:?"jsonpCallback",//服務(wù)端用于接收callback調(diào)用的function名,實(shí)際可以不填??
????????success?:?function(data){
? ? ? ? ? ? 上面jsonp參數(shù)可以不填，因?yàn)閖q會(huì)把返回值放到success里設(shè)置此處的回調(diào)，所以實(shí)際上像平常的ajax請(qǐng)求那樣寫即可
? ? ? ? },??
????????error:function(){? ? ?alert('fail');? ? ? ?}??
????});??
jsonp的原理實(shí)則很簡(jiǎn)單，相當(dāng)于利用了一個(gè)瀏覽器的漏洞，因?yàn)槠匠Ｔ贖TML里引入資源時(shí)無論是css、圖片、script都是可以不分站點(diǎn)的，也就是自帶了跨域，此時(shí)我們只需用js創(chuàng)建一個(gè)script標(biāo)簽，把src設(shè)置成服務(wù)器的地址，并把回調(diào)加在src(即http:xxxx.com/index.html?callback=xxxxx)，此時(shí)服務(wù)器配合截取callback，然后返回此callback的參數(shù)調(diào)用(即返回一個(gè)可執(zhí)行的JS代碼)，就實(shí)現(xiàn)了跨域并回調(diào)的效果。
此方式的好處是兼容性好，瀏覽器都支持，但安全性不夠高，且只不支持POST請(qǐng)求，即使發(fā)的是post請(qǐng)求，也會(huì)變?yōu)間et。
二、W3C推薦的CORS，此種方式是標(biāo)準(zhǔn)推薦的，是一個(gè)更好的方式，也是未來的方式，前端的實(shí)現(xiàn)方式很簡(jiǎn)單，只是在原生的http請(qǐng)求基礎(chǔ)上，在設(shè)置請(qǐng)求頭部信息時(shí)，要多設(shè)置一個(gè)Origin屬性，把此屬性指向服務(wù)器允許的地址即可：
? ?var?xhr =?new?XMLHttpRequest();
????xhr.open("post",?"http://xxxxx.com/index.html",?true);
????xhr.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");
????// 聲明請(qǐng)求源
????xhr.setRequestHeader("Origin",?"http://example.com");
????xhr.onreadystatechange =?function?() {
????????if?(xhr.readyState == 4 && xhr.status == 200) {
????????????var?responseText = xhr.responseText;
????????????console.info(responseText);
????????}
????}
????xhr.send();
此方式的好處是安全且是標(biāo)準(zhǔn)推薦的，缺點(diǎn)是ie10以下的瀏覽器不支持，所以導(dǎo)致它尚未能成為主流方式。
