摘要：中的跨域請(qǐng)求應(yīng)該也算是一個(gè)重點(diǎn)，具體什么叫跨域，在這里我就不展開(kāi)了，可以查一下瀏覽器的同源策略和跨域的定義。再看后臺(tái)文件文件接收回調(diào)函數(shù)并把要返回的參數(shù)以參數(shù)注入的方式注入到回調(diào)函數(shù)中，再返回給客戶(hù)端。

js中的跨域請(qǐng)求應(yīng)該也算是一個(gè)重點(diǎn)，具體什么叫跨域，在這里我就不展開(kāi)了，可以查一下瀏覽器的同源策略和跨域的定義。原來(lái)只知道常用的jsonp和document.domain這兩種方式，這幾天學(xué)習(xí)了一下其他幾種跨域請(qǐng)求的方式，正好一起做個(gè)總結(jié)。

jsonp請(qǐng)求應(yīng)該是大家最為熟悉的一種（至少是我知道的第一種跨域請(qǐng)求方式）。jsonp的原理是利用
文件底部的

文件接收回調(diào)函數(shù)并把要返回的參數(shù)以參數(shù)注入的方式注入到回調(diào)函數(shù)中，再返回給客戶(hù)端。

這樣的話瀏覽器解析script標(biāo)簽，并執(zhí)行返回的js文檔，此時(shí)服務(wù)器返回的數(shù)據(jù)作為參數(shù)，傳到頁(yè)面中定義好的 jsonpBack 函數(shù)里.（動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)）,就拿到了我們需要的跨域數(shù)據(jù)。

這里補(bǔ)充一點(diǎn)就是jquery對(duì)jsonp有著很好的支持，jquery中$.getJSON方法將jsonp的調(diào)用方式進(jìn)行了封裝，用起來(lái)十分方便，使用的方式如下即可：

這種方式用在主域名相同子域名不同的跨域訪問(wèn)中，舉個(gè)例子：http://a.frame.com和http://b.frame.com 他們的主域名都是frame.com 這兩個(gè)域名中的文件可以用這種方式進(jìn)行訪問(wèn)，通過(guò)在兩個(gè)域中具體的文件中設(shè)置document.domain="frame.com"就可達(dá)到跨域訪問(wèn)的目的。

實(shí)際應(yīng)用中常常用在iframe中窗口之間的訪問(wèn)，根據(jù)瀏覽器的同源策略，瀏覽器中不同域的框架之間是不能進(jìn)行js的交互操作的，所以一個(gè)窗口是不能拿到另一個(gè)窗口中的contentWindow對(duì)象的屬性和方法的（注意是能拿到contentWindow對(duì)象的，只是屬性和方法都不可用）。為了能拿到數(shù)據(jù)，只要在兩個(gè)iframe中分別寫(xiě)入document.domain="主域名"，這樣設(shè)置之后，就能拿到contentWindow對(duì)象的屬性和方法了。代碼就這么簡(jiǎn)單的一行，我就不寫(xiě)小例子了。

window的name屬性有個(gè)特征：在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁(yè)面都是共享一個(gè)window.name的，每個(gè)頁(yè)面對(duì)window.name都有讀寫(xiě)的權(quán)限，window.name是持久存在一個(gè)窗口載入過(guò)的所有頁(yè)面中的，并不會(huì)因新頁(yè)面的載入而進(jìn)行重置。

這是什么意思呢？通俗來(lái)講，就是比如我在a.html這個(gè)頁(yè)面中設(shè)置了window.name="a";然后讓window重新加載b.html頁(yè)面，然后在b.html頁(yè)面中輸出window.name會(huì)發(fā)現(xiàn)window.name=“a”。所以就算a.html和b.html這兩個(gè)頁(yè)面不是在同一個(gè)域中的，也可以在b頁(yè)面中拿到a頁(yè)面設(shè)置的window.name的值，跨域的核心思路就是這個(gè)原理。

實(shí)際應(yīng)用中也是常常用在兩個(gè)iframe之間(需要結(jié)合iframe的特性來(lái)用)，先上一張從別人那邊借鑒過(guò)來(lái)的原理圖，我再按照自己的理解進(jìn)行分析：

圖中有三個(gè)頁(yè)面，getDomainData.html是獲取數(shù)據(jù)的頁(yè)面，null.html是一個(gè)和getDomainData.html同域的空頁(yè)面，它的作用是作為一個(gè)中轉(zhuǎn)站，進(jìn)行數(shù)據(jù)的過(guò)渡。data.html是要獲取數(shù)據(jù)的所在頁(yè)面，這里有著我們要的數(shù)據(jù)，它和getDomainData.html處于不同域中，所以取數(shù)據(jù)是跨域訪問(wèn)。具體的過(guò)程是這樣的：在getDomainData.html中建立一個(gè)子頁(yè)面iframe，把這個(gè)iframe的src指向b.com/data.html，這樣當(dāng)這個(gè)iframe加載完成后就可以訪問(wèn)到data.html中的window.name的數(shù)據(jù)，之后再將iframe的src改為a.com/null.html，跳回getDomainData.html的同一個(gè)域，這樣根據(jù)同源策略，getDomainData.html就可以訪問(wèn)到null.html中取得的data.html的數(shù)據(jù)了。獲取數(shù)據(jù)以后最好銷(xiāo)毀這個(gè)iframe，釋放掉內(nèi)存，也保證了安全。下面附上代碼小例子：

getDomainData.html：

data.html:

最后的iframe銷(xiāo)毀：

window.postMessages是html5中實(shí)現(xiàn)跨域訪問(wèn)的一種新方式，可以使用它來(lái)向其它的window對(duì)象發(fā)送消息，無(wú)論這個(gè)window對(duì)象是屬于同源或不同源。
該方式的使用還是十分簡(jiǎn)單的，給要發(fā)送數(shù)據(jù)的頁(yè)面中的window對(duì)象調(diào)用一個(gè)postMessage(message,targetOrigin)方法即可，該方法的第一個(gè)參數(shù)message為要發(fā)送的消息，類(lèi)型只能為字符串；第二個(gè)參數(shù)targetOrigin用來(lái)限定接收消息的那個(gè)window對(duì)象所在的域，如果不想限定域，直接使用通配符 * 。再讓接收數(shù)據(jù)頁(yè)面的window對(duì)象監(jiān)聽(tīng)自身的message事件來(lái)獲取傳過(guò)來(lái)的消息，消息內(nèi)容儲(chǔ)存在該事件對(duì)象的data屬性中。簡(jiǎn)單的小例子如下：

test.html(發(fā)送頁(yè)面)：

test2.html（接收頁(yè)面）

測(cè)試結(jié)果如下

關(guān)于這個(gè)用法困擾了我好久，困擾1：因?yàn)樽詈髲棾龅南⑹窃趖est.html，而不是在test2.html中，我不確定是因?yàn)閠est.html包含了test2.html，所以瀏覽器渲染才彈出的alert,還是test2.html接收到消息的反饋。后來(lái)查閱了權(quán)威的文檔，才有了進(jìn)一步的理解，應(yīng)該是test2.html收到消息，以iframe在test.html中渲染加載出的。
困擾2：postMessage的調(diào)用對(duì)象是目標(biāo)窗口還是發(fā)送窗口，是否能以window形式調(diào)用？
查閱文檔后得出結(jié)論：*postMessage的調(diào)用對(duì)象，是其他窗口的一個(gè)引用，即目標(biāo)窗口，不是要發(fā)送的窗口，（這里比較出乎意料） 而且postMessage想要通信必須使得一個(gè)窗口以iframe的形式存在于另一個(gè)窗口，或者一個(gè)窗口是從另一個(gè)窗口通過(guò)window.open()或者超鏈接的形式打開(kāi)的（同樣可以用window.opener獲取源窗口）；換句話說(shuō)，你要交換數(shù)據(jù)，必須能獲取目標(biāo)窗口(target window)的引用，不然兩個(gè)窗口之間毫無(wú)聯(lián)系，想通信也無(wú)能為力，所以不能直接以主頁(yè)面window的形式調(diào)用。

具體的權(quán)威解釋請(qǐng)看這個(gè)鏈接： window.postMessage

CORS(Corss-Origin-Resource Sharing,跨源資源共享)，是一種網(wǎng)絡(luò)瀏覽器的技術(shù)規(guī)范，它為Web服務(wù)器定義了一種方式，允許網(wǎng)頁(yè)從不同的域訪問(wèn)其資源，而這種訪問(wèn)是被同源策略所禁止的。CORS系統(tǒng)定義了一種瀏覽器和服務(wù)器交互的方式來(lái)確定是否允許跨域請(qǐng)求。 它是一個(gè)妥協(xié)，有更大的靈活性，但比起簡(jiǎn)單地允許所有這些的要求來(lái)說(shuō)更加安全。
CORS背后的基本思想，就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請(qǐng)求或響應(yīng)是應(yīng)該成功還是應(yīng)該失敗。

CORS的使用還是十分簡(jiǎn)便的，比如一個(gè)簡(jiǎn)單的GET或者POST請(qǐng)求，在發(fā)送的時(shí)候給它附加一個(gè)額外的origin頭部，其中包含請(qǐng)求頁(yè)面的源信息（協(xié)議、域名和端口），以便服務(wù)器根據(jù)這個(gè)頭部信息來(lái)決定是否給以響應(yīng)。下面是javascript高級(jí)程序設(shè)計(jì)書(shū)上的一個(gè)小例子：

Origin:http://www.nczonline.net

如果服務(wù)器認(rèn)為這個(gè)請(qǐng)求可以接受，就在Access-Control-Allow-Origin頭部中回發(fā)相同的源消息（如果是公共資源，可以回發(fā)“ * ”）。例如：

Access-Control-Allow-Origin：http://www.nczonline.net

這樣設(shè)置之后，服務(wù)器與瀏覽器就可以進(jìn)行跨域信息的交換了。具體的在不同瀏覽器上的支持和使用，我就不展開(kāi)了，js高級(jí)程序設(shè)計(jì)書(shū)上提到了很多，網(wǎng)上查一下也有很多。

Web Sockets是一種新瀏覽器API，能在一個(gè)多帶帶的持久連接上提供全雙工、雙向通信，使用ws（代替http://）或wss(代替https://)協(xié)議，可用于任意的客戶(hù)端和服務(wù)器程序。
web sockets原理：在JS創(chuàng)建了web socket之后，會(huì)有一個(gè)HTTP請(qǐng)求發(fā)送到瀏覽器以發(fā)起連接。取得服務(wù)器響應(yīng)后，建立的連接會(huì)使用HTTP升級(jí)從HTTP協(xié)議交換為web sockt協(xié)議。
使用的小例子：

// 創(chuàng)建一個(gè)Socket實(shí)例
var socket = new WebSocket("ws://www.example.com/server.php"); 

// 打開(kāi)Socket 
socket.onopen = function(event) { 

  // 發(fā)送消息
  socket.send("a secret"); 

  // 監(jiān)聽(tīng)消息的接收
  socket.onmessage = function(event) { 
    var data=event.data;
    //處理data...
  }; 

  // 監(jiān)聽(tīng)socket的關(guān)閉
  socket.onclose = function(event) { 
    console.log("socket has closed",event); 
  }; 

  // 關(guān)閉Socket
  //socket.close() 
};

同樣附上權(quán)威文檔供參考：Web Workers API

除此之外還有一些跨域訪問(wèn)的方式：比如Comet、圖像Ping、SSE等，感興趣的可以直接查找這些內(nèi)容。在這些跨域訪問(wèn)方式上，各有各的適用訪問(wèn)和相應(yīng)的限制，需要結(jié)合實(shí)際來(lái)適用。我在這里有個(gè)疑問(wèn)：我自己運(yùn)用的比較多的就是jsonp這種方式，那么在實(shí)際開(kāi)發(fā)中，比較推崇的跨域訪問(wèn)方式是哪種呢？還有就是html5的postMessage是不是可以取代window.name（同樣都需要一個(gè)iframe作為中間媒介）這類(lèi)訪問(wèn)方式，這個(gè)新API方式是不是在實(shí)際中很有效呢？希望有經(jīng)驗(yàn)的大?？梢越獯穑粍俑屑?。