jquery的ajax跨域請求原理和示例
來源:易賢網(wǎng) 閱讀:1010 次 日期:2014-05-09 15:46:24
溫馨提示:易賢網(wǎng)小編為您整理了“jquery的ajax跨域請求原理和示例”,方便廣大網(wǎng)友查閱!

今天在項目中需要做遠程數(shù)據(jù)加載并渲染頁面,直到開發(fā)階段才意識到ajax跨域請求的問題,隱約記得Jquery有提過一個ajax跨域請求的解決方式,于是即刻翻出Jquery的API出來研究,發(fā)

JQuery對于Ajax的跨域請求有兩類解決方案,不過都是只支持get方式。分別是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。

什么是jsonp格式呢?API原文:如果獲取的數(shù)據(jù)文件存放在遠程服務器上(域名不同,也就是跨域獲取數(shù)據(jù)),則需要使用jsonp類型。使用這種類型的話,會創(chuàng)建一個查詢字符串參數(shù) callback=? ,這個參數(shù)會加在請求的URL后面。服務器端應當在JSON數(shù)據(jù)前加上回調函數(shù)名,以便完成一個有效的JSONP請求。意思就是遠程服務端需要對返回的數(shù)據(jù)做下處理,根據(jù)客戶端提交的callback的參數(shù),返回一個callback(json)的數(shù)據(jù),而客戶端將會用script的方式處理返回數(shù)據(jù),來對json數(shù)據(jù)做處理。JQuery.getJSON也同樣支持jsonp的數(shù)據(jù)方式調用。

客戶端JQuery.ajax的調用代碼示例:

代碼如下:

$.ajax({

type : "get",

async:false,

url : "http://www.xxx.com/ajax.do",

dataType : "jsonp",

jsonp: "callbackparam",//服務端用于接收callback調用的function名的參數(shù)

jsonpCallback:"success_jsonpCallback",//callback的function名稱

success : function(json){

alert(json);

alert(json[0].name);

},

error:function(){

alert('fail');

}

});

服務端返回數(shù)據(jù)的示例代碼:

代碼如下:

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

String callbackFunName = context.Request["callbackparam"];

context.Response.Write(callbackFunName + "([ { name:\"John\"}])");

}

更多信息請查看IT技術專欄

更多信息請查看網(wǎng)絡編程
易賢網(wǎng)手機網(wǎng)站地址:jquery的ajax跨域請求原理和示例
關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65317125(9:00—18:00) 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權所有:易賢網(wǎng)