1. 程式人生 > >JQuery的Ajax跨域請求的解決方式

JQuery的Ajax跨域請求的解決方式

        今天在專案中須要做遠端資料載入並渲染頁面,直到開發階段才意識到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的呼叫程式碼演示樣例:

$.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\"}])"); }