資訊專欄INFORMATION COLUMN
摘要：是一種協(xié)議，為了解決客戶端請求服務(wù)器跨域的問題，但是并非是正式的傳輸協(xié)議。結(jié)果明明請求回來數(shù)據(jù)，結(jié)果還是報錯。是一種使用數(shù)據(jù)的方式，返回的不是對象，是包含對象的腳本。
1、什么是JSONP
一般來說位于 server1.example.com 的網(wǎng)頁無法與不是 server1.example.com的服務(wù)器溝通，而 HTML 的
這里就說明不允許跨域請求，那么怎么辦？?換成jsonp好了。就改了dataType這個字段。
$.ajax({
url: "http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10",
type: "GET",
dataType: "jsonp",
timeout: 5000,
contentType: "application/json; charset=utf-8",
success: function (result) {
alter("aaaa");
}
});
結(jié)果：?Uncaught SyntaxError: Unexpected token!
what the fuck！?明明請求回來數(shù)據(jù)，結(jié)果還是報錯。原因是ajax請求服務(wù)器，而返回的數(shù)據(jù)格式不符合jsonp的返回格式，那么jsonp格式是什么樣的？
Callback({msg:"this?is?json?data"})
這是什么叼東西，奇葩誰定義的！如果你這么想，看來你沒有仔細(xì)看第1點，JSON是一種輕量級的數(shù)據(jù)交換格式，像xml一樣。JSONP是一種使用JSON數(shù)據(jù)的方式，返回的不是JSON對象，是包含JSON對象的javaScript腳本。但是上圖是一段json串，所以報錯啦。
3、參數(shù)返回處理有一點你會發(fā)現(xiàn)在你是用jsonp協(xié)議請求時，在參數(shù)中除了自己填寫的參數(shù)外還有名為callback的參數(shù)，如圖：
? ?????
看看這個參數(shù)是什么東西，因為我在ajax請求的時候沒有指定，jsonp這個參數(shù)，那么系統(tǒng)默認(rèn)參數(shù)名為“callback”。沒有指定jsonpCallback參數(shù), 那么jquery會生成隨機(jī)的函數(shù)名，如上圖所示。
比如我如下配置：
$.ajax({
? ? ? ? ? ? url: "http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10",
? ? ? ? ? ? type: "GET",
? ? ? ? ? ? dataType: "jsonp",
????????? jsonp:"callbacka",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(默認(rèn)為:callback)
? ? ? ? ? ? jsonpCallback:"success_jsonpCallback",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動生成的隨機(jī)函數(shù)名
timeout: 5000,
? ? ? ? ? ? contentType: "application/json; charset=utf-8",
? ? ? ? ? ? success: function (result) {
? ? ? ? ? ? ? ?alter("aaaa");
? ? ? ? ? ? }
? ? ? ?});
那么服務(wù)器亦可以通過下面方法獲取回調(diào)的函數(shù)名：
string callbackFunName =request.getParameter（"callbacka"）;//獲取的就是success_jsonpCallback 字符串
注意：系統(tǒng)會區(qū)分函數(shù)名大小寫。
那么下面按照格式包裝一下看看咯：
String callback = request.getParameter("callback"); //不指定函數(shù)名默認(rèn) callback
return callback+ "(" +?jsonStr + ")"
包了一下，結(jié)果真的不報錯，看下返回數(shù)據(jù)如下圖：
首先在客戶端注冊一個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))里。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80040.html
摘要：跨域完全講解今天在慕課網(wǎng)上學(xué)習(xí)了跨域完全講解我在收集面試題的時候其實就已經(jīng)有過跨域的問題的了，當(dāng)時候知道了為什么會存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學(xué)習(xí)，又加深了跨域的理解，以此記錄下來。 AJAX跨域完全講解 今天在慕課網(wǎng)上學(xué)習(xí)了AJAX跨域完全講解：https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經(jīng)有過AJAX跨域...
摘要：跨域完全講解今天在慕課網(wǎng)上學(xué)習(xí)了跨域完全講解我在收集面試題的時候其實就已經(jīng)有過跨域的問題的了，當(dāng)時候知道了為什么會存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學(xué)習(xí)，又加深了跨域的理解，以此記錄下來。 AJAX跨域完全講解 今天在慕課網(wǎng)上學(xué)習(xí)了AJAX跨域完全講解：https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經(jīng)有過AJAX跨域...
摘要：請求服務(wù)器數(shù)據(jù)并規(guī)定回調(diào)函數(shù)為上面代碼通過動態(tài)添加元素，向服務(wù)器發(fā)出請求。另外假設(shè)向服務(wù)發(fā)送的請求是這樣的在這種情況下，是表示請求的請求參數(shù)，而是應(yīng)用程序的回調(diào)函數(shù)的名稱。清單調(diào)用回調(diào)服務(wù)注意，我們使用作為回調(diào)函數(shù)名，而非真實的函數(shù)名。 同源策略 同源策略(Same origin policy)，它是由Netscape提出的一個著名的安全策略?，F(xiàn)在所有支持JavaScript的瀏覽器都...
摘要：時間年月日星期三說明本文部分內(nèi)容均來自慕課網(wǎng)。當(dāng)預(yù)檢請求通過的時候，才發(fā)送真正的請求。 時間：2018年04月18日星期三說明：本文部分內(nèi)容均來自慕課網(wǎng)。@慕課網(wǎng)：https://www.imooc.com教學(xué)源碼：https://github.com/zccodere/s...學(xué)習(xí)源碼：https://github.com/zccodere/s... 第一章：課程介紹 1-1 課程介...
閱讀 2638·2021-11-19 09:56
閱讀 898·2021-09-24 10:25
閱讀 1660·2021-09-09 09:34
閱讀 2218·2021-09-09 09:33
閱讀 1068·2019-08-30 15:54
閱讀 556·2019-08-29 18:33
閱讀 1281·2019-08-29 17:19
閱讀 518·2019-08-29 14:19
