JSONP原理及應(yīng)用

之前的文章中簡(jiǎn)單介紹過前端可以實(shí)現(xiàn)的跨域方式，這次介紹一種更為常用的跨域方式，但這種跨域方式需要服務(wù)器端實(shí)現(xiàn)。

JSONP意思是填充式JSON，是JSON的一種跨域應(yīng)用。實(shí)現(xiàn)原理是利用HTML script標(biāo)簽可以獲取其他域中的JS代碼并執(zhí)行的特性，因此可以利用這一特性來傳送數(shù)據(jù)。

實(shí)現(xiàn)方法

JSONP最常見的應(yīng)用方式是利用回調(diào)函數(shù)處理跨域數(shù)據(jù)。

通過在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ù)器端中就可以通過url的參數(shù)中獲取到回調(diào)函數(shù)名，通過字符串的拼接，把響應(yīng)數(shù)據(jù)以參數(shù)的形式傳入到回調(diào)函數(shù)中。一并返回給客戶端。

如此一來，客戶端的script就能獲得如下一段代碼，并開始執(zhí)行。

handleResponse(data);

jQuery中實(shí)現(xiàn)JSONP

首先介紹下$.ajax的參數(shù)

type：請(qǐng)求方式 GET/POST
url:請(qǐng)求地址
async:布爾類型，默認(rèn)為true 表示請(qǐng)求是否為異步，如果為false表示為同步。
dataType：返回的數(shù)據(jù)類型
jsonp：傳遞給請(qǐng)求處理程序或頁面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)
jsonpCallback：自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫"?"，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)求處理程序或頁面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)  
        jsonpCallback: "receive",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù)  
        success: function (data) {  
            alert(data.name);  
        },  
        error: function () {  
            alert('fail');  
        }  
    });  
}