jQuery中JSONP的兩種實現(xiàn)方式詳解
前臺代碼如下:
后臺Action代碼如下:
運行后就可以看到結(jié)果了。我追蹤了下后臺ProcessCallback代碼,如下圖:
可以看到j(luò)sonCallback的值為"jQuery17104721....",它是前端傳給遠程服務(wù)器后臺Action的。這里 jQuery171..表示的是jQuery的版本,可以簡單地將這個理解為JSONP類型請求回調(diào)函數(shù),jQuery在我們每次指定Ajax請求方式為 JSONP時都會生成這么一個JSONP回調(diào)函數(shù)。雖然jQuery會自動幫我們生成一個回調(diào)函數(shù),但是我們也可以通過設(shè)置 jsonpCallback 參數(shù)為jsonp請求定制一個我們自己的回調(diào)函數(shù)。
第一種方式下面這三行代碼設(shè)定了JSONP請求方式:
dataType: "jsonp",
jsonp: "jsonpcallback",// 指定回調(diào)函數(shù),這里名字可以為其他任意你喜歡的,比如callback,不過必須與下一行的GET參數(shù)一致
data: "name=jxq&email=feichexia@yahoo.com.cn&jsonpcallback=?", // jsonpcallback與上面的jsonp值一致
第二種方式則直接在GET參數(shù)后面帶上jsonpcallback=?來標識。
我們可以推斷這么做以后,jQuery內(nèi)部機制就幫我們繞過了瀏覽器的跨域訪問限制,然后就可以像正常請求同域Action一樣請求跨域Action了。
最后返回的是一個函數(shù)表達式:
return jsonCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";
這樣返回給前端的就是類似這種jQuery17104721....('{Name:"jxq", Email:"feichexia@yahoo.com.cn"}'),它一返回到前端就會執(zhí)行,得到的是一個JavaScript對象,對象有兩個屬 性:Name和Email,所以我們可以直接調(diào)用json.Name和json.Email
通過此文,希望能幫助大家學習掌握此部分知識,謝謝大家對本站的支持!
- 輕松搞定jQuery+JSONP跨域請求的解決方案
- 使用jquery的jsonp如何發(fā)起跨域請求及其原理詳解
- 原生js jquery ajax請求以及jsonp的調(diào)用方法
- 關(guān)于jQuery.ajax()的jsonp碰上post詳解
- jQuery使用JSONP實現(xiàn)跨域獲取數(shù)據(jù)的三種方法詳解
- 淺談JQuery+ajax+jsonp 跨域訪問
- 解決jQuery使用JSONP時產(chǎn)生的錯誤
- 用jQuery與JSONP輕松解決跨域訪問的問題
- jquery ajax jsonp跨域調(diào)用實例代碼
- jQuery使用jsonp實現(xiàn)百度搜索的示例代碼
相關(guān)文章
jQuery EasyUI NumberBox(數(shù)字框)的用法
jQuery EasyUI 數(shù)字框(NumberBox)用法2010-07-07jquery實現(xiàn)checkbox 全選/全不選的通用寫法
本篇文章主要是對jquery實現(xiàn)checkbox 全選/全不選的通用寫法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02