JSONP是一種跨域數據請求方式,它的原理是利用script標簽可以進行跨域請求的特性。在請求JSONP數據時,客戶端通過script標簽向服務器請求數據,服務器將數據包裝在一個函數中,并將函數名傳遞給客戶端,客戶端通過動態創建script標簽再將函數名作為callback參數傳遞給服務器,服務器將數據通過函數名執行并返回給客戶端,從而得到跨域的數據。下面是JSONP請求的例子:
$.ajax({ type: "get", async: false, url: "http://example.com/api/jsonp", dataType: "jsonp", jsonp: "callback", jsonpCallback:"success", success: function(data) { console.log(data); }, error: function() { console.log('fail'); } });
在這個例子中,請求地址是一個JSONP的接口,dataType設置為"jsonp",jsonp為回調函數的參數名,jsonpCallback為回調函數的名稱,success為回調成功調用的函數。通過上述配置,jQuery會自動根據當前的回調函數名稱來組織最終發送的請求地址,客戶端向服務器請求數據時將會把請求的地址加上callback參數的名稱,如下所示:
http://example.com/api/jsonp?callback=success
服務器得到請求后,將數據打包成一個JSONP格式的響應,如下所示:
success({ "status": "200", "message": "請求成功", "data": { "id": "10001", "name": "張三", "email": "zhangsan@example.com" } });
服務器返回的數據采用了函數調用的形式,success為客戶端傳遞過來的回調函數名稱,服務器將返回的數據以函數調用的形式包裹,最終的響應內容可以直接被客戶端解析為JSON格式的數據。客戶端接收到響應后,會自動執行回調函數,將獲得的JSON數據傳入回調函數,從而實現JSONP跨域。