? ? ? ?JavaScript是一種在Web開發(fā)中經(jīng)常使用的前端動態(tài)腳本技術(shù)造挽。在JavaScript中盗迟，有一個很重要的安全性限制劫侧，被稱為“Same-Origin Policy”（同源策略）。這一策略對于JavaScript代碼能夠訪問的頁面內(nèi)容做了很重要的限制葵礼，即JavaScript只能訪問與包含它的文檔在同一域下的內(nèi)容。
? ? ? ?JavaScript這個安全策略在進(jìn)行多iframe或多窗口編程并鸵、以及Ajax編程時顯得尤為重要鸳粉。根據(jù)這個策略，在baidu.com下的頁面中包含的JavaScript代碼园担，不能訪問在google.com域名下的頁面內(nèi)容届谈；甚至不同的子域名之間的頁面也不能通過JavaScript代碼互相訪問。對于Ajax的影響在于弯汰，通過XMLHttpRequest實現(xiàn)的Ajax請求艰山，不能向不同的域提交請求，例如咏闪，在abc.example.com下的頁面曙搬，不能向def.example.com提交Ajax請求，等等鸽嫂。
? ? ? ? 然而纵装，當(dāng)進(jìn)行一些比較深入的前端編程的時候，不可避免地需要進(jìn)行跨域操作据某，這時候“同源策略”就顯得過于苛刻橡娄。JSONP跨域GET請求是一個常用的解決方案，下面我們來看一下JSONP跨域是如何實現(xiàn)的癣籽，并且探討下JSONP跨域的原理挽唉。
? ? ? ?利用在頁面中創(chuàng)建<script>節(jié)點的方法向不同域提交HTTP請求的方法稱為JSONP，這項技術(shù)可以解決跨域提交Ajax請求的問題才避。JSONP的工作原理如下所述：
假設(shè)在http://example1.com/index.php這個頁面中向http://example2.com/getinfo.php提交GET請求橱夭，我們可以將下面的JavaScript代碼放在http://example1.com/index.php這個頁面中來實現(xiàn)：節(jié)點的方法向不同域提交HTTP請求的方法稱為JSONP，這項技術(shù)可以解決跨域提交Ajax請求的問題桑逝。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請求從http://example2.com/getinfo.php返回時棘劣，可以返回一段JavaScript代碼，這段代碼會自動執(zhí)行楞遏，可以用來負(fù)責(zé)調(diào)用http://example1.com/index.php頁面中的一個callback函數(shù)茬暇。
? ? ? ?JSONP的優(yōu)點是：它不像XMLHttpRequest對象實現(xiàn)的Ajax請求那樣受到同源策略的限制；它的兼容性更好寡喝，在更加古老的瀏覽器中都可以運行糙俗，不需要XMLHttpRequest或ActiveX的支持；并且在請求完畢后可以通過調(diào)用callback的方式回傳結(jié)果预鬓。
? ? ? ?JSONP的缺點則是：它只支持GET請求而不支持POST等其它類型的HTTP請求巧骚；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進(jìn)行JavaScript調(diào)用的問題。
再來一個例子：
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ù)后,會動態(tài)執(zhí)行這個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事件了
//請求出錯處理
alert("請求出錯(請檢查相關(guān)度網(wǎng)絡(luò)狀況.)");
}
});
有時也會看到這樣的寫法：
$.getJSON("http://跨域的dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?",
function(json){
if(json.屬性名==值){
// 執(zhí)行代碼
}
});
? ? ? ?這種方式其實是上例$.ajax({..}) api的一種高級封裝劈彪，有些$.ajax api底層的參數(shù)就被封裝而不可見了竣蹦。
這樣，jquery就會拼裝成如下的url get請求：
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)沧奴，通過 jsoncallback = request.getParameter("jsoncallback") 得到j(luò)query端隨后要回調(diào)的js function name:jsonp1236827957501 然后 response的內(nèi)容為一個Script Tags:"jsonp1236827957501("+按請求參數(shù)生成的json數(shù)組+")"; jquery就會通過回調(diào)方法動態(tài)加載調(diào)用這個js tag:jsonp1236827957501(json數(shù)組); 這樣就達(dá)到了跨域數(shù)據(jù)交換的目的痘括。
JSONP原理
? ? ? ? JSONP的最基本的原理是：動態(tài)添加一個<script>標(biāo)簽，而script標(biāo)簽的src屬性是沒有跨域的限制的滔吠。這樣說來纲菌，這種跨域方式其實與ajax XmlHttpRequest協(xié)議無關(guān)了。標(biāo)簽疮绷，而script標(biāo)簽的src屬性是沒有跨域的限制的翰舌。這樣說來，這種跨域方式其實與ajax XmlHttpRequest協(xié)議無關(guān)了冬骚。
? ? ? ?這樣其實"jQuery AJAX跨域問題"就成了個偽命題灶芝，jquery $.ajax方法名有誤導(dǎo)人之嫌。
? ? ? ?如果設(shè)為dataType: 'jsonp'唉韭，這個$.ajax方法就和ajax XmlHttpRequest沒什么關(guān)系了，取而代之的則是JSONP協(xié)議犯犁。JSONP是一個非官方的協(xié)議属愤，它允許在服務(wù)器端集成Script tags返回至客戶端，通過javascript callback的形式實現(xiàn)跨域訪問酸役。
? ? ? ?JSONP即JSON with Padding住诸。由于同源策略的限制，XmlHttpRequest只允許請求當(dāng)前源（域名涣澡、協(xié)議贱呐、端口）的資源。如果要進(jìn)行跨域請求入桂， 我們可以通過使用html的script標(biāo)記來進(jìn)行跨域請求奄薇，并在響應(yīng)中返回要執(zhí)行的script代碼，其中可以直接使用JSON傳遞javascript對象抗愁。 這種跨域的通訊方式稱為JSONP馁蒂。
? ? ? ? jsonCallback 函數(shù)jsonp1236827957501(....)：是瀏覽器客戶端注冊的，獲取跨域服務(wù)器上的json數(shù)據(jù)后蜘腌，回調(diào)的函數(shù)
? ? ? ?Jsonp的執(zhí)行過程如下：
? ? ? ?首先在客戶端注冊一個callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)傳給服務(wù)器沫屡。注意：服務(wù)端得到callback的數(shù)值后，要用jsonp1236827957501(......)把將要輸出的json內(nèi)容包括起來撮珠，此時沮脖，服務(wù)器生成 json 數(shù)據(jù)才能被客戶端正確接收。
? ? ? ? 然后以 javascript 語法的方式，生成一個function勺届， function 名字就是傳遞上來的參數(shù) 'jsoncallback'的值 jsonp1236827957501 .
? ? ? ?最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞绞豢。胖玫?function 中，這樣就生成了一段 js 語法的文檔涮因，返回給客戶端废睦。
? ? ? ?客戶端瀏覽器，解析script標(biāo)簽养泡，并執(zhí)行返回的 javascript 文檔嗜湃，此時javascript文檔數(shù)據(jù)，作為參數(shù)澜掩， 傳入到了客戶端預(yù)先定義好的 callback 函數(shù)(如上例中jquery $.ajax()方法封裝的的success: function (json))里购披。
? ? ? ?可以說jsonp的方式原理上和是一致的(qq空間就是大量采用這種方式來實現(xiàn)跨域數(shù)據(jù)交換的)。JSONP是一種腳本注入(Script Injection)行為肩榕，所以有一定的安全隱患刚陡。
? ? ? ?那jquery為什么不支持post方式跨域呢？
? ? ? ?雖然采用post+動態(tài)生成iframe是可以達(dá)到post跨域的目的(有位js牛人就是這樣把jquery1.2.5 打patch的)株汉，但這樣做是一個比較極端的方式筐乳，不建議采用。
? ? ? ?也可以說get方式的跨域是合法的乔妈，post方式從安全角度上蝙云，被認(rèn)為是不合法的，萬不得已還是不要劍走偏鋒路召。
? ? ? ?client端跨域訪問的需求看來也引起w3c的注意了勃刨，看資料說html5 WebSocket標(biāo)準(zhǔn)支持跨域的數(shù)據(jù)交換，應(yīng)該也是一個將來可選的跨域數(shù)據(jù)交換的解決方案股淡。
來個超簡單的例子：
<!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 是客戶端注冊的身隐，獲取跨域服務(wù)器上的json數(shù)據(jù)后，回調(diào)的函數(shù)唯灵。http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback 這個 url 是跨域服務(wù)器取 json 數(shù)據(jù)的接口贾铝，參數(shù)為回調(diào)函數(shù)的名字，返回的格式為：jsonpCallback({msg:'this is json data'})
? ? ? ?簡述原理與過程：首先在客戶端注冊一個callback, 然后把callback的名字傳給服務(wù)器埠帕。此時忌傻，服務(wù)器先生成 json 數(shù)據(jù)。 然后以 javascript 語法的方式搞监，生成一個function , function 名字就是傳遞上來的參數(shù) jsonp水孩。最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞剑胖玫?function 中琐驴，這樣就生成了一段 js 語法的文檔俘种，返回給客戶端秤标。
? ? ? ?客戶端瀏覽器，解析script標(biāo)簽宙刘，并執(zhí)行返回的 javascript 文檔苍姜，此時數(shù)據(jù)作為參數(shù)，傳入到了客戶端預(yù)先定義好的 callback 函數(shù)里悬包。（動態(tài)執(zhí)行回調(diào)函數(shù)）
