摘要：回調(diào)函數(shù)數(shù)據(jù)就是了，回調(diào)函數(shù)用來響應(yīng)應(yīng)該在頁(yè)面中調(diào)用的函數(shù)，數(shù)據(jù)則用來傳入要執(zhí)行的回調(diào)函數(shù)。比如會(huì)得到小明這樣，里面的這個(gè)函數(shù)就能執(zhí)行并且得到數(shù)據(jù)了。

由于安全的原因，瀏覽器做了很多方面的工作，由此也就引入了一系列的跨域問題，需要注意的是：

跨域并非瀏覽器限制了發(fā)起跨站請(qǐng)求，而是跨站請(qǐng)求可以正常發(fā)起，但是返回結(jié)果被瀏覽器攔截了。最好的例子是 crsf 跨站攻擊原理，請(qǐng)求是發(fā)送到了后端服務(wù)器無論是否跨域！注意：有些瀏覽器不允許從HTTPS的域跨域訪問HTTP，比如Chrome和Firefox，這些瀏覽器在請(qǐng)求還未發(fā)出的時(shí)候就會(huì)攔截請(qǐng)求，這是一個(gè)特例

JSONP的全稱是 "JSON With Padding"， 詞面意思上理解就是 "填充式的JSON"。它不是一個(gè)新鮮的東西，隸屬于 JSON 的一種使用方法，或者說是一種使用模式，可以解決一些常見的瀏覽器端網(wǎng)頁(yè)跨域問題。

正如他的名稱一樣，它是指被包含在調(diào)用函數(shù)中的JSON，比如這樣:

callback({"Name": "小明", "Id" : 1823, "Rank": 7})

由于 jQuery 的一些原因，使得 JSONP 常常與 Ajax 混淆。實(shí)際上，他們沒有任何關(guān)系。

由于瀏覽器的同源策略，使得在網(wǎng)頁(yè)端出現(xiàn)了這個(gè)“跨域”的問題，然而我們發(fā)現(xiàn)，所有的 src 屬性并沒有受到相關(guān)的限制，比如 img / script 等。

JSONP 的原理就要從 script 說起。script 可以執(zhí)行其他域的js 函數(shù)，比如這樣：

a.html
...



...


b.js
callback({url: "http://www.rccoder.net"})

顯然，上面的代碼是可以執(zhí)行的，并且可以在console里面輸出http://www.rccoder.net

利用這一點(diǎn)，假如b.js里面的內(nèi)容不是固定的，而是根據(jù)一些東西自動(dòng)生成的， 嗯，這就是JSONP的主要原理了?；卣{(diào)函數(shù)+數(shù)據(jù)就是 JSON With Padding 了，回調(diào)函數(shù)用來響應(yīng)應(yīng)該在頁(yè)面中調(diào)用的函數(shù)，數(shù)據(jù)則用來傳入要執(zhí)行的回調(diào)函數(shù)。

至于這個(gè)數(shù)據(jù)是怎么產(chǎn)生的，說粗魯點(diǎn)無非就是字符串拼接了。

簡(jiǎn)單總結(jié)一下: Ajax 是利用 XMLHTTPRequest 來請(qǐng)求數(shù)據(jù)的，而它是不能請(qǐng)求不同域上的數(shù)據(jù)的。但是，在頁(yè)面上引用不同域的 js 文件卻是沒有任何問題的，這樣，利用異步的加載，請(qǐng)求一個(gè) js 文件，而這個(gè)文件的內(nèi)容是動(dòng)態(tài)生成的（后臺(tái)語(yǔ)言字符串拼接出來的），里面包含的是 JSON With Padding（回調(diào)函數(shù)+數(shù)據(jù)），之前寫的那個(gè)函數(shù)就因?yàn)樾录虞d進(jìn)來的這段動(dòng)態(tài)生成的 js 而執(zhí)行，也就是獲取到了他要獲取的數(shù)據(jù)。

重復(fù)一下，在一個(gè)頁(yè)面中，a.html這樣寫，得到 UserId 為 1823 的信息:

a.html

...
src="http://server2.example.com/RetrieveUser?UserId=1823&callback=parseResponse">
...

請(qǐng)求這個(gè)地址會(huì)得到一個(gè)可以執(zhí)行的 JavaScript。比如會(huì)得到：

  parseResponse({"Name": "小明", "Id" : 1823, "Rank": 7})

這樣，a.html里面的 parseResponse() 這個(gè)函數(shù)就能執(zhí)行并且得到數(shù)據(jù)了。

等等，jQuery到底做了什么:

jQuery 讓 JSONP 的使用API和Ajax的一模一樣：

$.ajax({
  method: "jsonp",
  url: "http://server2.example.com/RetrieveUser?UserId=1823",
  success: function(data) {
    console.log(data)
  } 
})

之所以可以這樣是因?yàn)?jQuery 在背后傾注了心血，它會(huì)在執(zhí)行的時(shí)候生成函數(shù)替換callback=dosomthing ，然后獲取到數(shù)據(jù)之后銷毀掉這個(gè)函數(shù)，起到一個(gè)臨時(shí)的代理器作用，這樣就拿到了數(shù)據(jù)。

JSONP 的后話：

JSONP的這種實(shí)現(xiàn)方式不受同源策略的影響，兼容性也很好；但是它之支持 GET 方式的清楚，只支持 HTTP 請(qǐng)求這種特殊的情況，對(duì)于兩個(gè)不同域之間兩個(gè)頁(yè)面的互相調(diào)用也是無能為力。

XMLHttpRequest 的同源策略看起來是如此的{{BANNED}}，即使是同一個(gè)公司的產(chǎn)品，也不可能完全在同一個(gè)域上面。還好，網(wǎng)絡(luò)設(shè)計(jì)者在設(shè)計(jì)的時(shí)候考略到了這一點(diǎn)，可以在服務(wù)器端進(jìn)行一些定義，允許部分網(wǎng)絡(luò)訪問。

CORS 的全稱是 Cross-Origin Resource Sharing，即跨域資源共享。他的原理就是使用自定義的 HTTP 頭部，讓服務(wù)器與瀏覽器進(jìn)行溝通，主要是通過設(shè)置響應(yīng)頭的 Access-Control-Allow-Origin 來達(dá)到目的的。這樣，XMLHttpRequest 就能跨域了。

值得注意的是，正常情況下的 XMLHttpRequest 是只發(fā)送一次請(qǐng)求的，但是跨域問題下很可能是會(huì)發(fā)送兩次的請(qǐng)求（預(yù)發(fā)送）。

更加詳細(xì)的內(nèi)容可以參見：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

CORS 的后話：

相比之下，CORS 就支持所有類型的 HTTP 請(qǐng)求了，但是在兼容上面，往往一些老的瀏覽器并不支持 CORS。

Desktop:

Mobile:

window.name 在一個(gè)窗口（標(biāo)簽）的生命周期之內(nèi)是共享的，利用這點(diǎn)就可以傳輸一些數(shù)據(jù)。

除此之外，結(jié)合 iframe 還能實(shí)現(xiàn)更加強(qiáng)大的功能：

需要3個(gè)文件： a/proxy/b

a.html

b.html

proxy 是一個(gè)代理文件，空的就可以，需要和 a 在同一域下

在不同的子域 + iframe交互的時(shí)候，獲取到另外一個(gè) iframe 的 window對(duì)象是沒有問題的，但是獲取到的這個(gè)window的方法和屬性大多數(shù)都是不能使用的。

這種現(xiàn)象可以借助document.domain 來解決。

example.com

1.example.com

這樣，就可以解決問題了。值得注意的是：document.domain 的設(shè)置是有限制的，只能設(shè)置為頁(yè)面本身或者更高一級(jí)的域名。

document.domain的后話：

利用這種方法是極其方便的，但是如果一個(gè)網(wǎng)站被攻擊之后另外一個(gè)網(wǎng)站很可能會(huì)引起安全漏洞。

這種方法可以把數(shù)據(jù)的變化顯示在 url 的 hash 里面。但是由于 chrome 和 IE 不允許修改parent.location.hash 的值，所以需要再加一層。

a.html 和 b.html 進(jìn)行數(shù)據(jù)交換。

a.html

function startRequest(){
    var ifr = document.createElement("iframe");
    ifr.style.display = "none";
    ifr.src = "http://2.com/b.html#paramdo";
    document.body.appendChild(ifr);
}

function checkHash() {
    try {
        var data = location.hash ? location.hash.substring(1) : "";
        if (console.log) {
            console.log("Now the data is "+data);
        }
    } catch(e) {};
}
setInterval(checkHash, 2000);

b.html

//模擬一個(gè)簡(jiǎn)單的參數(shù)處理操作
switch(location.hash){
    case "#paramdo":
        callBack();
        break;
    case "#paramset":
        //do something……
        break;
}

function callBack(){
    try {
        parent.location.hash = "somedata";
    } catch (e) {
        // ie、chrome的安全機(jī)制無法修改parent.location.hash，
        // 所以要利用一個(gè)中間域下的代理iframe
        var ifrproxy = document.createElement("iframe");
        ifrproxy.style.display = "none";
        ifrproxy.src = "http://3.com/c.html#somedata";    // 注意該文件在"a.com"域下
        document.body.appendChild(ifrproxy);
    }
}

c.html

//因?yàn)閜arent.parent和自身屬于同一個(gè)域，所以可以改變其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);

這樣，利用中間的 c 層就可以用 hash 達(dá)到 a 與 b 的交互了。

這個(gè)方法是 HTML5 的一個(gè)新特性，可以用來向其他所有的window對(duì)象發(fā)送消息。需要注意的是我們必須要保證所有的腳本執(zhí)行完才發(fā)送MessageEvent，如果在函數(shù)執(zhí)行的過程中調(diào)用了他，就會(huì)讓后面的函數(shù)超時(shí)無法執(zhí)行。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

http://www.cnblogs.com/rainman/archive/2011/02/21/1960044.html

原文地址： https://github.com/rccoder/blog/issues/5

歡迎 star 倉(cāng)庫(kù)~