快捷導(dǎo)航

jQuery中JSONP的兩種實(shí)現(xiàn)方式詳解

更新時(shí)間：2016年09月26日 14:58:10 投稿：lqh

這篇文章主要介紹了jQuery中JSONP的兩種實(shí)現(xiàn)方式詳解的相關(guān)資料,需要的朋友可以參考下

前臺(tái)代碼如下：

后臺(tái)Action代碼如下：

運(yùn)行后就可以看到結(jié)果了。我追蹤了下后臺(tái)ProcessCallback代碼，如下圖：

可以看到j(luò)sonCallback的值為"jQuery17104721...."，它是前端傳給遠(yuǎn)程服務(wù)器后臺(tái)Action的。這里 jQuery171..表示的是jQuery的版本，可以簡(jiǎn)單地將這個(gè)理解為JSONP類型請(qǐng)求回調(diào)函數(shù)，jQuery在我們每次指定Ajax請(qǐng)求方式為 JSONP時(shí)都會(huì)生成這么一個(gè)JSONP回調(diào)函數(shù)。雖然jQuery會(huì)自動(dòng)幫我們生成一個(gè)回調(diào)函數(shù)，但是我們也可以通過(guò)設(shè)置 jsonpCallback 參數(shù)為jsonp請(qǐng)求定制一個(gè)我們自己的回調(diào)函數(shù)。

第一種方式下面這三行代碼設(shè)定了JSONP請(qǐng)求方式：

dataType: "jsonp",

jsonp: "jsonpcallback",// 指定回調(diào)函數(shù)，這里名字可以為其他任意你喜歡的，比如callback，不過(guò)必須與下一行的GET參數(shù)一致

data: "name=jxq&email=feichexia@yahoo.com.cn&jsonpcallback=?", // jsonpcallback與上面的jsonp值一致

第二種方式則直接在GET參數(shù)后面帶上jsonpcallback=?來(lái)標(biāo)識(shí)。

我們可以推斷這么做以后，jQuery內(nèi)部機(jī)制就幫我們繞過(guò)了瀏覽器的跨域訪問(wèn)限制，然后就可以像正常請(qǐng)求同域Action一樣請(qǐng)求跨域Action了。

最后返回的是一個(gè)函數(shù)表達(dá)式：

return jsonCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";

這樣返回給前端的就是類似這種jQuery17104721....('{Name:"jxq", Email:"feichexia@yahoo.com.cn"}')，它一返回到前端就會(huì)執(zhí)行，得到的是一個(gè)JavaScript對(duì)象，對(duì)象有兩個(gè)屬性：Name和Email，所以我們可以直接調(diào)用json.Name和json.Email

通過(guò)此文，希望能幫助大家學(xué)習(xí)掌握此部分知識(shí)，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: