JQuery的Ajax跨域請(qǐng)求原理概述及實(shí)例
更新時(shí)間：2013年04月26日 15:39:35 作者：
ajax跨域請(qǐng)求的問題，JQuery對(duì)于Ajax的跨域請(qǐng)求有兩類解決方案，不過都是只支持get方式，接下來(lái)為大家詳細(xì)介紹下客戶端JQuery.ajax的調(diào)用代碼
今天在項(xiàng)目中需要做遠(yuǎn)程數(shù)據(jù)加載并渲染頁(yè)面，直到開發(fā)階段才意識(shí)到ajax跨域請(qǐng)求的問題，隱約記得Jquery有提過一個(gè)ajax跨域請(qǐng)求的解決方式，于是即刻翻出Jquery的API出來(lái)研究，發(fā)
JQuery對(duì)于Ajax的跨域請(qǐng)求有兩類解決方案，不過都是只支持get方式。分別是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。
什么是jsonp格式呢？API原文：如果獲取的數(shù)據(jù)文件存放在遠(yuǎn)程服務(wù)器上（域名不同，也就是跨域獲取數(shù)據(jù)），則需要使用jsonp類型。使用這種類型的話，會(huì)創(chuàng)建一個(gè)查詢字符串參數(shù) callback=? ，這個(gè)參數(shù)會(huì)加在請(qǐng)求的URL后面。服務(wù)器端應(yīng)當(dāng)在JSON數(shù)據(jù)前加上回調(diào)函數(shù)名，以便完成一個(gè)有效的JSONP請(qǐng)求。意思就是遠(yuǎn)程服務(wù)端需要對(duì)返回的數(shù)據(jù)做下處理，根據(jù)客戶端提交的callback的參數(shù)，返回一個(gè)callback(json)的數(shù)據(jù)，而客戶端將會(huì)用script的方式處理返回?cái)?shù)據(jù)，來(lái)對(duì)json數(shù)據(jù)做處理。JQuery.getJSON也同樣支持jsonp的數(shù)據(jù)方式調(diào)用。
客戶端JQuery.ajax的調(diào)用代碼示例：
$.ajax({
type : "get",
async:false,
url : "http://www.xxx.com/ajax.do",
dataType : "jsonp",
jsonp: "callbackparam",//服務(wù)端用于接收callback調(diào)用的function名的參數(shù)
jsonpCallback:"success_jsonpCallback",//callback的function名稱
success : function(json){
alert(json);
alert(json[0].name);
},
error:function(){
alert('fail');
}
});
服務(wù)端返回?cái)?shù)據(jù)的示例代碼：
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
String callbackFunName = context.Request["callbackparam"];
context.Response.Write(callbackFunName + "([ { name:\"John\"}])");
}
JQuery對(duì)于Ajax的跨域請(qǐng)求有兩類解決方案，不過都是只支持get方式。分別是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。
什么是jsonp格式呢？API原文：如果獲取的數(shù)據(jù)文件存放在遠(yuǎn)程服務(wù)器上（域名不同，也就是跨域獲取數(shù)據(jù)），則需要使用jsonp類型。使用這種類型的話，會(huì)創(chuàng)建一個(gè)查詢字符串參數(shù) callback=? ，這個(gè)參數(shù)會(huì)加在請(qǐng)求的URL后面。服務(wù)器端應(yīng)當(dāng)在JSON數(shù)據(jù)前加上回調(diào)函數(shù)名，以便完成一個(gè)有效的JSONP請(qǐng)求。意思就是遠(yuǎn)程服務(wù)端需要對(duì)返回的數(shù)據(jù)做下處理，根據(jù)客戶端提交的callback的參數(shù)，返回一個(gè)callback(json)的數(shù)據(jù)，而客戶端將會(huì)用script的方式處理返回?cái)?shù)據(jù)，來(lái)對(duì)json數(shù)據(jù)做處理。JQuery.getJSON也同樣支持jsonp的數(shù)據(jù)方式調(diào)用。
客戶端JQuery.ajax的調(diào)用代碼示例：
復(fù)制代碼 代碼如下:
$.ajax({
type : "get",
async:false,
url : "http://www.xxx.com/ajax.do",
dataType : "jsonp",
jsonp: "callbackparam",//服務(wù)端用于接收callback調(diào)用的function名的參數(shù)
jsonpCallback:"success_jsonpCallback",//callback的function名稱
success : function(json){
alert(json);
alert(json[0].name);
},
error:function(){
alert('fail');
}
});
服務(wù)端返回?cái)?shù)據(jù)的示例代碼：
復(fù)制代碼 代碼如下:
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
String callbackFunName = context.Request["callbackparam"];
context.Response.Write(callbackFunName + "([ { name:\"John\"}])");
}
您可能感興趣的文章:
- jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)實(shí)例
- 跨域請(qǐng)求之jQuery的ajax jsonp的使用解惑
- jQuery.ajax 跨域請(qǐng)求webapi設(shè)置headers的解決方案
- Jquery Ajax請(qǐng)求文件下載操作失敗的原因分析及解決辦法
- 淺析jQuery Ajax請(qǐng)求參數(shù)和返回?cái)?shù)據(jù)的處理
- 教你如何終止JQUERY的$.AJAX請(qǐng)求
- jquery+ajax實(shí)現(xiàn)跨域請(qǐng)求的方法
- jQuery Ajax請(qǐng)求后臺(tái)數(shù)據(jù)并在前臺(tái)接收
- js與jQuery終止正在發(fā)送的ajax請(qǐng)求的方法
- jquery ajax 請(qǐng)求小技巧實(shí)例分析
相關(guān)文章
jquery 通過ajax請(qǐng)求獲取后臺(tái)數(shù)據(jù)顯示在表格上的方法
今天小編就為大家分享一篇jquery 通過ajax請(qǐng)求獲取后臺(tái)數(shù)據(jù)顯示在表格上的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-08-08
本篇文章主要給大家講述了用jquery如何寫出一個(gè)PC端的輪播圖效果的實(shí)例，有興趣的朋友參考下。2018-01-01
前些天記錄了java中for循環(huán)取map，發(fā)現(xiàn)用jquery的each一樣可以取map（我稱之為js的map，不要較勁），且順序和map中順序一致。2011-02-02
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建樹形菜單
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，EasyUI創(chuàng)建樹形菜單，內(nèi)容很豐富，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript和JQuery制作簡(jiǎn)易留言板功能，文中的示例代碼講解詳細(xì)，有需要的小伙伴可以參考一下2016-05-05
jquery是一個(gè)js插件庫(kù),現(xiàn)在很多前端開發(fā)人員都是使用它來(lái)操作dom的,對(duì)于dom操作,jquery提供了很多方法,這篇文章主要給大家介紹了關(guān)于jquery給元素設(shè)置屬性的簡(jiǎn)單方法,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)影院選座訂座效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
jquery+ajax實(shí)現(xiàn)直接提交表單實(shí)例分析
這篇文章主要介紹了jquery+ajax直接提交表單的方法,涉及jQuery調(diào)用ajax進(jìn)行表單提交所涉及的表單序列化、數(shù)值傳遞與處理、回調(diào)函數(shù)等相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jquery 表單 多選框的一種巧妙寫法 ,需要的朋友可以參考下2015-09-09
jquery任意位置浮動(dòng)固定層插件用法實(shí)例
這篇文章主要介紹了jquery任意位置浮動(dòng)固定層插件用法,實(shí)例分析了jQuery浮動(dòng)層插件的相關(guān)使用技巧,需要的朋友可以參考下2015-05-05