? ? ? ?JavaScript是一種在Web開發(fā)中經(jīng)常使用的前端動(dòng)態(tài)腳本技術(shù)。在JavaScript中，有一個(gè)很重要的安全性限制，被稱為“Same-Origin Policy”（同源策略）。這一策略對(duì)于JavaScript代碼能夠訪問(wèn)的頁(yè)面內(nèi)容做了很重要的限制，即JavaScript只能訪問(wèn)與包含它的文檔在同一域下的內(nèi)容。
? ? ? ?JavaScript這個(gè)安全策略在進(jìn)行多iframe或多窗口編程、以及Ajax編程時(shí)顯得尤為重要。根據(jù)這個(gè)策略，在baidu.com下的頁(yè)面中包含的JavaScript代碼，不能訪問(wèn)在google.com域名下的頁(yè)面內(nèi)容；甚至不同的子域名之間的頁(yè)面也不能通過(guò)JavaScript代碼互相訪問(wèn)。對(duì)于Ajax的影響在于，通過(guò)XMLHttpRequest實(shí)現(xiàn)的Ajax請(qǐng)求，不能向不同的域提交請(qǐng)求，例如，在abc.example.com下的頁(yè)面，不能向def.example.com提交Ajax請(qǐng)求，等等。
? ? ? ? 然而，當(dāng)進(jìn)行一些比較深入的前端編程的時(shí)候，不可避免地需要進(jìn)行跨域操作，這時(shí)候“同源策略”就顯得過(guò)于苛刻。JSONP跨域GET請(qǐng)求是一個(gè)常用的解決方案，下面我們來(lái)看一下JSONP跨域是如何實(shí)現(xiàn)的，并且探討下JSONP跨域的原理。
? ? ? ?利用在頁(yè)面中創(chuàng)建<script>節(jié)點(diǎn)的方法向不同域提交HTTP請(qǐng)求的方法稱為JSONP，這項(xiàng)技術(shù)可以解決跨域提交Ajax請(qǐng)求的問(wèn)題。JSONP的工作原理如下所述：
假設(shè)在http://example1.com/index.php這個(gè)頁(yè)面中向http://example2.com/getinfo.php提交GET請(qǐng)求，我們可以將下面的JavaScript代碼放在http://example1.com/index.php這個(gè)頁(yè)面中來(lái)實(shí)現(xiàn)：節(jié)點(diǎn)的方法向不同域提交HTTP請(qǐng)求的方法稱為JSONP，這項(xiàng)技術(shù)可以解決跨域提交Ajax請(qǐng)求的問(wèn)題。JSONP的工作原理如下所述：
var eleScript= document.createElement("script");
eleScript.type ="text/javascript";
eleScript.src ="http://example2.com/getinfo.php";
document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
? ? ? ?當(dāng)GET請(qǐng)求從http://example2.com/getinfo.php返回時(shí)，可以返回一段JavaScript代碼，這段代碼會(huì)自動(dòng)執(zhí)行，可以用來(lái)負(fù)責(zé)調(diào)用http://example1.com/index.php頁(yè)面中的一個(gè)callback函數(shù)。
? ? ? ?JSONP的優(yōu)點(diǎn)是：它不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運(yùn)行，不需要XMLHttpRequest或ActiveX的支持；并且在請(qǐng)求完畢后可以通過(guò)調(diào)用callback的方式回傳結(jié)果。
? ? ? ?JSONP的缺點(diǎn)則是：它只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng)求；它只支持跨域HTTP請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行JavaScript調(diào)用的問(wèn)題。
再來(lái)一個(gè)例子：
var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':
$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};
$.ajax({
async:false,
url: http://跨域的dns/document!searchJSONResult.action,
type: "GET",
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: qsData,
timeout: 5000,
beforeSend: function(){
//jsonp 方式此方法不被觸發(fā).原因可能是dataType如果指定為jsonp的話,就已經(jīng)不是ajax事件了
},
success: function (json) {//客戶端jquery預(yù)先定義好的callback函數(shù),成功獲取跨域服務(wù)器上的json數(shù)據(jù)后,會(huì)動(dòng)態(tài)執(zhí)行這個(gè)callback函數(shù)
if(json.actionErrors.length!=0){
alert(json.actionErrors);
}
genDynamicContent(qsData,type,json);
},
complete: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 });
},
error: function(xhr){
//jsonp 方式此方法不被觸發(fā).原因可能是dataType如果指定為jsonp的話,就已經(jīng)不是ajax事件了
//請(qǐng)求出錯(cuò)處理
alert("請(qǐng)求出錯(cuò)(請(qǐng)檢查相關(guān)度網(wǎng)絡(luò)狀況.)");
}
});
有時(shí)也會(huì)看到這樣的寫法：
$.getJSON("http://跨域的dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?",
function(json){
if(json.屬性名==值){
// 執(zhí)行代碼
}
});
? ? ? ?這種方式其實(shí)是上例$.ajax({..}) api的一種高級(jí)封裝，有些$.ajax api底層的參數(shù)就被封裝而不可見了。
這樣，jquery就會(huì)拼裝成如下的url get請(qǐng)求：
http://跨域的dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=
%E7%94%A8%E4%BE%8B¤tUserId=5351&conditionBean.pageSize=15
? ? ? ? ?在響應(yīng)端(http://跨域的dns/document!searchJSONResult.action)，通過(guò) 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ì)通過(guò)回調(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屬性是沒(méi)有跨域的限制的。這樣說(shuō)來(lái)，這種跨域方式其實(shí)與ajax XmlHttpRequest協(xié)議無(wú)關(guān)了。標(biāo)簽，而script標(biāo)簽的src屬性是沒(méi)有跨域的限制的。這樣說(shuō)來(lái)，這種跨域方式其實(shí)與ajax XmlHttpRequest協(xié)議無(wú)關(guān)了。
? ? ? ?這樣其實(shí)"jQuery AJAX跨域問(wèn)題"就成了個(gè)偽命題，jquery $.ajax方法名有誤導(dǎo)人之嫌。
? ? ? ?如果設(shè)為dataType: 'jsonp'，這個(gè)$.ajax方法就和ajax XmlHttpRequest沒(méi)什么關(guān)系了，取而代之的則是JSONP協(xié)議。JSONP是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)。
? ? ? ?JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名、協(xié)議、端口）的資源。如果要進(jìn)行跨域請(qǐng)求， 我們可以通過(guò)使用html的script標(biāo)記來(lái)進(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í)行過(guò)程如下：
? ? ? ?首先在客戶端注冊(cè)一個(gè)callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)傳給服務(wù)器。注意：服務(wù)端得到callback的數(shù)值后，要用jsonp1236827957501(......)把將要輸出的json內(nèi)容包括起來(lái)，此時(shí)，服務(wù)器生成 json 數(shù)據(jù)才能被客戶端正確接收。
? ? ? ? 然后以 javascript 語(yǔ)法的方式，生成一個(gè)function， function 名字就是傳遞上來(lái)的參數(shù) 'jsoncallback'的值 jsonp1236827957501 .
? ? ? ?最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞剑胖玫?function 中，這樣就生成了一段 js 語(yǔ)法的文檔，返回給客戶端。
? ? ? ?客戶端瀏覽器，解析script標(biāo)簽，并執(zhí)行返回的 javascript 文檔，此時(shí)javascript文檔數(shù)據(jù)，作為參數(shù)， 傳入到了客戶端預(yù)先定義好的 callback 函數(shù)(如上例中jquery $.ajax()方法封裝的的success: function (json))里。
? ? ? ?可以說(shuō)jsonp的方式原理上和是一致的(qq空間就是大量采用這種方式來(lái)實(shí)現(xiàn)跨域數(shù)據(jù)交換的)。JSONP是一種腳本注入(Script Injection)行為，所以有一定的安全隱患。
? ? ? ?那jquery為什么不支持post方式跨域呢？
? ? ? ?雖然采用post+動(dòng)態(tài)生成iframe是可以達(dá)到post跨域的目的(有位js牛人就是這樣把jquery1.2.5 打patch的)，但這樣做是一個(gè)比較極端的方式，不建議采用。
? ? ? ?也可以說(shuō)get方式的跨域是合法的，post方式從安全角度上，被認(rèn)為是不合法的，萬(wàn)不得已還是不要?jiǎng)ψ咂h。
? ? ? ?client端跨域訪問(wèn)的需求看來(lái)也引起w3c的注意了，看資料說(shuō)html5 WebSocket標(biāo)準(zhǔn)支持跨域的數(shù)據(jù)交換，應(yīng)該也是一個(gè)將來(lái)可選的跨域數(shù)據(jù)交換的解決方案。
來(lái)個(gè)超簡(jiǎn)單的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transtional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Jsnop</title>
<script type="text/javascript">
function jsonpCallback(result)
{
alert(result.msg);
}
</script>
<script type="text/javascript" arc="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback">
</script>
</head>
<body>
</body>
</html>
? ? ? ? 其中 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'})
? ? ? ?簡(jiǎn)述原理與過(guò)程：首先在客戶端注冊(cè)一個(gè)callback, 然后把callback的名字傳給服務(wù)器。此時(shí)，服務(wù)器先生成 json 數(shù)據(jù)。 然后以 javascript 語(yǔ)法的方式，生成一個(gè)function , function 名字就是傳遞上來(lái)的參數(shù) jsonp。最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞剑胖玫?function 中，這樣就生成了一段 js 語(yǔ)法的文檔，返回給客戶端。
? ? ? ?客戶端瀏覽器，解析script標(biāo)簽，并執(zhí)行返回的 javascript 文檔，此時(shí)數(shù)據(jù)作為參數(shù)，傳入到了客戶端預(yù)先定義好的 callback 函數(shù)里。（動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)）
