快捷導(dǎo)航

JQuery的Ajax跨域請(qǐng)求原理概述及實(shí)例

更新時(shí)間：2013年04月26日 15:39:35 作者：

ajax跨域請(qǐng)求的問(wèn)題，JQuery對(duì)于Ajax的跨域請(qǐng)求有兩類(lèi)解決方案，不過(guò)都是只支持get方式，接下來(lái)為大家詳細(xì)介紹下客戶端JQuery.ajax的調(diào)用代碼

今天在項(xiàng)目中需要做遠(yuǎn)程數(shù)據(jù)加載并渲染頁(yè)面，直到開(kāi)發(fā)階段才意識(shí)到ajax跨域請(qǐng)求的問(wèn)題，隱約記得Jquery有提過(guò)一個(gè)ajax跨域請(qǐng)求的解決方式，于是即刻翻出Jquery的API出來(lái)研究，發(fā)
JQuery對(duì)于Ajax的跨域請(qǐng)求有兩類(lèi)解決方案，不過(guò)都是只支持get方式。分別是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。

什么是jsonp格式呢？API原文：如果獲取的數(shù)據(jù)文件存放在遠(yuǎn)程服務(wù)器上（域名不同，也就是跨域獲取數(shù)據(jù)），則需要使用jsonp類(lèi)型。使用這種類(lèi)型的話，會(huì)創(chuàng)建一個(gè)查詢(xún)字符串參數(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名稱(chēng) 
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\"}])"); 
} 

您可能感興趣的文章: