JSONP原理及應(yīng)用
之前的文章中簡(jiǎn)單介紹過(guò)前端可以實(shí)現(xiàn)的跨域方式漩勤，這次介紹一種更為常用的跨域方式感挥，但這種跨域方式需要服務(wù)器端實(shí)現(xiàn)。
JSONP意思是填充式JSON越败，是JSON的一種跨域應(yīng)用链快。實(shí)現(xiàn)原理是利用HTML script標(biāo)簽可以獲取其他域中的JS代碼并執(zhí)行的特性，因此可以利用這一特性來(lái)傳送數(shù)據(jù)眉尸。
實(shí)現(xiàn)方法
JSONP最常見(jiàn)的應(yīng)用方式是利用回調(diào)函數(shù)處理跨域數(shù)據(jù)。
通過(guò)在Script標(biāo)簽的src中巨双，以參數(shù)的形式把回調(diào)函數(shù)發(fā)送到服務(wù)器中
var script = document.creatElement("srcipt");
script.src = "http://....?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);
然后在本地聲明函數(shù)處理獲得的響應(yīng)數(shù)據(jù)
function handleResponse(response){
console.log(response);
}
在服務(wù)器端中就可以通過(guò)url的參數(shù)中獲取到回調(diào)函數(shù)名噪猾，通過(guò)字符串的拼接，把響應(yīng)數(shù)據(jù)以參數(shù)的形式傳入到回調(diào)函數(shù)中筑累。一并返回給客戶(hù)端袱蜡。
如此一來(lái)，客戶(hù)端的script就能獲得如下一段代碼慢宗，并開(kāi)始執(zhí)行坪蚁。
handleResponse(data);
jQuery中實(shí)現(xiàn)JSONP
首先介紹下$.ajax的參數(shù)
type：請(qǐng)求方式 GET/POST
url:請(qǐng)求地址
async:布爾類(lèi)型，默認(rèn)為true 表示請(qǐng)求是否為異步镜沽，如果為false表示為同步敏晤。
dataType：返回的數(shù)據(jù)類(lèi)型
jsonp：傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)
jsonpCallback：自定義的jsonp回調(diào)函數(shù)名稱(chēng)缅茉，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名嘴脾，也可以寫(xiě)"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù)
success：調(diào)用成功執(zhí)行的函數(shù)
error：異常處理函數(shù)
如上，jQuery中JSONP的實(shí)現(xiàn)為
function SendData() {
$.ajax({
type: "get",
async: false,
url: "/home/ReturnJson",
dataType: "jsonp",
jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的译打，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)
jsonpCallback: "receive",//自定義的jsonp回調(diào)函數(shù)名稱(chēng)耗拓，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫(xiě)"?"奏司，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù)
success: function (data) {
alert(data.name);
},
error: function () {
alert('fail');
}
});
} 