jquery的ajax跨域請求原理和示例

字號:


    今天在項目中需要做遠程數(shù)據(jù)加載并渲染頁面,直到開發(fā)階段才意識到ajax跨域請求的問題,隱約記得Jquery有提過一個ajax跨域請求的解決方式,于是即刻翻出Jquery的API出來研究,發(fā)
    JQuery對于Ajax的跨域請求有兩類解決方案,不過都是只支持get方式。分別是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。
    什么是jsonp格式呢?API原文:如果獲取的數(shù)據(jù)文件存放在遠程服務(wù)器上(域名不同,也就是跨域獲取數(shù)據(jù)),則需要使用jsonp類型。使用這種類型的話,會創(chuàng)建一個查詢字符串參數(shù) callback=? ,這個參數(shù)會加在請求的URL后面。服務(wù)器端應(yīng)當在JSON數(shù)據(jù)前加上回調(diào)函數(shù)名,以便完成一個有效的JSONP請求。意思就是遠程服務(wù)端需要對返回的數(shù)據(jù)做下處理,根據(jù)客戶端提交的callback的參數(shù),返回一個callback(json)的數(shù)據(jù),而客戶端將會用script的方式處理返回數(shù)據(jù),來對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ù)端返回數(shù)據(jù)的示例代碼:
    代碼如下:
    public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/plain";
    String callbackFunName = context.Request["callbackparam"];
    context.Response.Write(callbackFunName + "([ { name:\"John\"}])");
    }