JQuery的Ajax跨域請求的解決方式
阿新 • • 發佈:2018-11-14
今天在專案中須要做遠端資料載入並渲染頁面,直到開發階段才意識到ajax跨域請求的問題,隱約記得Jquery有提過一個ajax跨域請求的解決方式,於是即刻翻出Jquery的API出來研究,發現JQuery對於Ajax的跨域請求有兩類解決方式,只是都是僅僅支援get方式。各自是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。
什麼是jsonp格式呢?API原文:假設獲取的資料檔案存放在遠端server上(域名不同,也就是跨域獲取資料)。則須要使用jsonp型別。
使用這樣的型別的話,會建立一個查詢字串引數 callback=? ,這個引數會加在請求的URL後面。
server端應當在JSON資料前加上回調函式名,以便完畢一個有效的JSONP請求。
意思就是遠端服務端須要對返回的資料做下處理。依據client提交的callback的引數,返回一個callback(json)的資料,而client將會用script的方式處理返回資料,來對json資料做處理。JQuery.getJSON也相同支援jsonp的資料方式呼叫。
clientJQuery.ajax的呼叫程式碼演示樣例:
type :
"get"
,
async:
false
,
url :
"http://www.xxx.com/ajax.do"
,
dataType :
"jsonp"
,
jsonp:
"callbackparam"
,
//服務端用於接收callback呼叫的function名的引數
jsonpCallback:
"success_jsonpCallback"
,
//callback的function名稱
success :
function
(json){
alert(json);
alert(json[0].name);
},
error:
function
(){
alert(
'fail'
);
}
});
服務端返回資料的演示樣例程式碼:
public void ProcessRequest (HttpContext context) {
context.Response.ContentType =
"text/plain"
;
String callbackFunName = context.Request[
"callbackparam"
];
context.Response.Write(callbackFunName +
"([ { name:\"John\"}])"
);
}