jQuery是一個廣泛使用的JavaScript庫,其中最突出的特點之一就是它對Ajax的支持。jQuery的Ajax能力包括發(fā)送異步請求、監(jiān)聽響應、處理純文本響應和XML響應、自動序列化表單數(shù)據(jù)等等。但是,由于Ajax請求的跨域限制,通過Ajax請求不能直接訪問跨域資源。這時就有jsonp(JSON with padding,填充式JSON)這個方案浮出水面了。這篇文章將介紹jQuery 3.2.1中的jsonp特性。
jsonp的核心思想是利用腳本標簽的src屬性來實現(xiàn)跨域請求。在客戶端發(fā)起jsonp請求時,服務器返回的是一段JavaScript代碼,這段代碼會執(zhí)行一個回調(diào)函數(shù),并將服務器的響應數(shù)據(jù)以參數(shù)的形式傳遞給該函數(shù)。在傳遞參數(shù)時,不再使用XMLHttpRequest對象,而是以腳本的形式嵌入到頁面中,這種方式可以繞過Ajax跨域限制。jsonp的使用方法是將dataType設置為"jsonp",同時在url中指定回調(diào)函數(shù)名,例如:
$.ajax({ url: "http://some-domain.com/get-data.php?callback=processData", dataType: "jsonp", success: function(response) { // Process the response data } }); function processData(data) { // Handle the response data }
其中,回調(diào)函數(shù)processData是在服務器端定義的,會返回一段JavaScript代碼,該代碼會被瀏覽器執(zhí)行。該回調(diào)函數(shù)需要以參數(shù)的形式接受服務器響應的數(shù)據(jù)。
需要注意的是,如果需要在jsonp中傳遞復雜的參數(shù),可以在url中拼接查詢參數(shù),例如:
$.ajax({ url: "http://some-domain.com/get-data.php?callback=processData&id=123&name=Joe", dataType: "jsonp", success: function(response) { // Process the response data } }); function processData(data) { // Handle the response data }
在url中添加查詢參數(shù)時,需要注意對特殊字符進行轉(zhuǎn)義。
總之,通過jsonp,我們可以突破Ajax的跨域限制,實現(xiàn)跨域請求,并將服務器的響應數(shù)據(jù)傳入回調(diào)函數(shù)中進行處理。