JavaScript是一種在Web開發(fā)中經(jīng)常使用的前端動(dòng)態(tài)腳本技術(shù)。在JavaScript中，有一個(gè)很重要的安全性限制，被稱為“Same-Origin Policy”（同源策略）。這一策略對(duì)于JavaScript代碼能夠訪問的頁面內(nèi)容做了很重要的限制，即JavaScript只能訪問與包含它的文檔在同一域下的內(nèi)容。

JavaScript這個(gè)安全策略在進(jìn)行多iframe或多窗口編程、以及Ajax編程時(shí)顯得尤為重要。根據(jù)這個(gè)策略，在baidu.com下的頁面中包含的JavaScript代碼，不能訪問在google.com域名下的頁面內(nèi)容；甚至不同的子域名之間的頁面也不能通過JavaScript代碼互相訪問。對(duì)于Ajax的影響在于，通過XMLHttpRequest實(shí)現(xiàn)的Ajax請(qǐng)求，不能向不同的域提交請(qǐng)求，例如，在abc.example.com下的頁面，不能向def.example.com提交Ajax請(qǐng)求，等等。

然而，當(dāng)進(jìn)行一些比較深入的前端編程的時(shí)候，不可避免地需要進(jìn)行跨域操作，這時(shí)候“同源策略”就顯得過于苛刻。JSONP跨域GET請(qǐng)求是一個(gè)常用的解決方案，下面我們來看一下JSONP跨域是如何實(shí)現(xiàn)的，并且探討下JSONP跨域的原理。

利用在頁面中創(chuàng)建<script>節(jié)點(diǎn)的方法向不同域提交HTTP請(qǐng)求的方法稱為JSONP，這項(xiàng)技術(shù)可以解決跨域提交Ajax請(qǐng)求的問題。JSONP的工作原理如下所述：

假設(shè)在http://example1.com/index.php這個(gè)頁面中向http://example2.com/getinfo.php提交GET請(qǐng)求，我們可以將下面的JavaScript代碼放在http://example1.com/index.php這個(gè)頁面中來實(shí)現(xiàn)：

當(dāng)GET請(qǐng)求從http://example2.com/getinfo.php返回時(shí)，可以返回一段JavaScript代碼，這段代碼會(huì)自動(dòng)執(zhí)行，可以用來負(fù)責(zé)調(diào)用http://example1.com/index.php頁面中的一個(gè)callback函數(shù)。

JSONP的優(yōu)點(diǎn)是：它不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運(yùn)行，不需要XMLHttpRequest或ActiveX的支持；并且在請(qǐng)求完畢后可以通過調(diào)用callback的方式回傳結(jié)果。

JSONP的缺點(diǎn)則是：它只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng)求；它只支持跨域HTTP請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁面之間如何進(jìn)行JavaScript調(diào)用的問題。
再來一個(gè)例子：

這種方式其實(shí)是上例$.ajax({..}) api的一種高級(jí)封裝，有些$.ajax api底層的參數(shù)就被封裝而不可見了。
這樣，jquery就會(huì)拼裝成如下的url get請(qǐng)求：

在響應(yīng)端(http://跨域的dns/document!searchJSONResult.action)，通過 jsoncallback = request.getParameter("jsoncallback") 得到j(luò)query端隨后要回調(diào)的js function name:jsonp1236827957501 然后 response的內(nèi)容為一個(gè)Script Tags:"jsonp1236827957501("+按請(qǐng)求參數(shù)生成的json數(shù)組+")"; jquery就會(huì)通過回調(diào)方法動(dòng)態(tài)加載調(diào)用這個(gè)js tag:jsonp1236827957501(json數(shù)組); 這樣就達(dá)到了跨域數(shù)據(jù)交換的目的。

JSONP原理
JSONP的最基本的原理是：動(dòng)態(tài)添加一個(gè)<script>標(biāo)簽，而script標(biāo)簽的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實(shí)與ajax XmlHttpRequest協(xié)議無關(guān)了。
這樣其實(shí)"jQuery AJAX跨域問題"就成了個(gè)偽命題，jquery $.ajax方法名有誤導(dǎo)人之嫌。
如果設(shè)為dataType: 'jsonp'，這個(gè)$.ajax方法就和ajax XmlHttpRequest沒什么關(guān)系了，取而代之的則是JSONP協(xié)議。JSONP是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過javascript callback的形式實(shí)現(xiàn)跨域訪問。

JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名、協(xié)議、端口）的資源。如果要進(jìn)行跨域請(qǐng)求， 我們可以通過使用html的script標(biāo)記來進(jìn)行跨域請(qǐng)求，并在響應(yīng)中返回要執(zhí)行的script代碼，其中可以直接使用JSON傳遞javascript對(duì)象。 這種跨域的通訊方式稱為JSONP。

jsonCallback 函數(shù)jsonp1236827957501(....)：是瀏覽器客戶端注冊(cè)的，獲取跨域服務(wù)器上的json數(shù)據(jù)后，回調(diào)的函數(shù)

Jsonp的執(zhí)行過程如下：
首先在客戶端注冊(cè)一個(gè)callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)傳給服務(wù)器。注意：服務(wù)端得到callback的數(shù)值后，要用jsonp1236827957501(......)把將要輸出的json內(nèi)容包括起來，此時(shí)，服務(wù)器生成 json 數(shù)據(jù)才能被客戶端正確接收。

然后以 javascript 語法的方式，生成一個(gè)function， function 名字就是傳遞上來的參數(shù) 'jsoncallback'的值 jsonp1236827957501 .
最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞?，放置?function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。

客戶端瀏覽器，解析script標(biāo)簽，并執(zhí)行返回的 javascript 文檔，此時(shí)javascript文檔數(shù)據(jù)，作為參數(shù)， 傳入到了客戶端預(yù)先定義好的 callback 函數(shù)(如上例中jquery $.ajax()方法封裝的的success: function (json))里。
可以說jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空間就是大量采用這種方式來實(shí)現(xiàn)跨域數(shù)據(jù)交換的)。JSONP是一種腳本注入(Script Injection)行為，所以有一定的安全隱患。
那jquery為什么不支持post方式跨域呢？

雖然采用post+動(dòng)態(tài)生成iframe是可以達(dá)到post跨域的目的(有位js牛人就是這樣把jquery1.2.5 打patch的)，但這樣做是一個(gè)比較極端的方式，不建議采用。
也可以說get方式的跨域是合法的，post方式從安全角度上，被認(rèn)為是不合法的，萬不得已還是不要?jiǎng)ψ咂h。

client端跨域訪問的需求看來也引起w3c的注意了，看資料說html5 WebSocket標(biāo)準(zhǔn)支持跨域的數(shù)據(jù)交換，應(yīng)該也是一個(gè)將來可選的跨域數(shù)據(jù)交換的解決方案。

來個(gè)超簡單的例子：

其中 jsonCallback 是客戶端注冊(cè)的，獲取跨域服務(wù)器上的json數(shù)據(jù)后，回調(diào)的函數(shù)。http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback 這個(gè) url 是跨域服務(wù)器取 json 數(shù)據(jù)的接口，參數(shù)為回調(diào)函數(shù)的名字，返回的格式為：jsonpCallback({msg:'this is json data'})

簡述原理與過程：首先在客戶端注冊(cè)一個(gè)callback, 然后把callback的名字傳給服務(wù)器。此時(shí)，服務(wù)器先生成 json 數(shù)據(jù)。 然后以 javascript 語法的方式，生成一個(gè)function , function 名字就是傳遞上來的參數(shù) jsonp。最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞?，放置?function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。

客戶端瀏覽器，解析script標(biāo)簽，并執(zhí)行返回的 javascript 文檔，此時(shí)數(shù)據(jù)作為參數(shù)，傳入到了客戶端預(yù)先定義好的 callback 函數(shù)里。（動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)）

最新評(píng)論