jquery的ajax跨域請(qǐng)求原理和示例
今天在項(xiàng)目中需要做遠(yuǎn)程數(shù)據(jù)加載并渲染頁面,直到開發(fā)階段才意識(shí)到ajax跨域請(qǐng)求的問題,隱約記得Jquery有提過一個(gè)ajax跨域請(qǐng)求的解決方式,于是即刻翻出Jquery的API出來研究,發(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ù),來對(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\"}])");
}
相關(guān)文章
7款風(fēng)格新穎的jQuery/CSS3菜單導(dǎo)航分享
下面給大家分享7款風(fēng)格新穎的jQuery/CSS3菜單導(dǎo)航讓用戶方便地找到想要的信息,而且更讓人有一種特殊的用戶體驗(yàn),希望大家會(huì)喜歡2013-04-04基于jQuery的試卷自動(dòng)排版系統(tǒng)實(shí)現(xiàn)代碼
題目提干、選擇題的選項(xiàng)、說明文字可以包含多媒體信息(文字、圖片、列表、表格、視頻等等……)。2011-01-01jQuery實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁遮罩層/彈出層效果兼容IE6、IE7
自寫寫的一個(gè)jQuery插件,可以實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁遮罩層/彈出層功能,并且兼容IE6、IE7,需要的朋友可以參考下2014-06-06Jquery easyui 實(shí)現(xiàn)動(dòng)態(tài)樹
本文給大家介紹jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹,本文通過代碼實(shí)例相結(jié)合的方式給大家展示jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹的過程,感興趣的朋友一起學(xué)習(xí)吧2015-11-11jquery實(shí)現(xiàn)員工信息添加與刪除功能
這篇文章主要為大家詳細(xì)介紹了利用jquery制作簡(jiǎn)易的員工信息添加與刪除,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09jQuery插件HighCharts繪制2D柱狀圖、折線圖和餅圖的組合圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D柱狀圖、折線圖和餅圖的組合圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件同時(shí)繪制折線圖、柱狀圖、餅狀圖組合圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jquery+css實(shí)現(xiàn)移動(dòng)端元素拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了jquery+css實(shí)現(xiàn)移動(dòng)端元素拖動(dòng)排序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02動(dòng)態(tài)調(diào)用css文件——jquery的應(yīng)用
這篇文章主要介紹了動(dòng)態(tài)調(diào)用css文件——jquery的應(yīng)用2007-02-02jquery打開直接跳到網(wǎng)頁最下面、最低端實(shí)現(xiàn)代碼
接下來為大家詳細(xì)介紹下jquery如何實(shí)現(xiàn)打開直接跳到網(wǎng)頁最下面,最低端,感興趣的朋友可以參考下哈2013-04-04jquery果凍抖動(dòng)效果實(shí)現(xiàn)方法
這篇文章主要介紹了jquery果凍抖動(dòng)效果實(shí)現(xiàn)方法,涉及animate方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01