jQuery的Ajax跨域请求的解决方案

 

什么是jsonp格式呢？API原文：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

 

客户端JQuery.ajax的调用代码示例：

(1)方式一, jQuery的ajax方法

<scripttype="text/javascript">

//页面加载时执行

$(function() {
var jsonp_Server="http://localhost";
var url=jsonp_Server+"/jsonp/AjaxHandler.ashx?op=Test";
$.ajax({
type:"get",
url:url,
//是否异步方式请求,false为同步方式,会停留在success处,不会执行ajax下面的js
async:false,
dataType : "jsonp",
jsonp: "callbackparam",
//设置服务端用于接收callback的function名称的形参,使用Request.QueryString["callbackparam"]来接收传来的名称,默认为:callback
jsonpCallback:"success_jsonpCallback",
//设置callback的function名称,默认为:jQuery18305424128363374621_1412730639179
success:function(result){
var htmlString = "";
$.each(result, function(i,obj) {
htmlString +="Id:"+obj.Id+" Name:"+obj.Name+" Age:"+obj.Age+"<br/>";
});
$("#divmessage").html(htmlString);
}
});
});
</script>

 

请求的路径为:

http://localhost/jsonp/AjaxHandler.ashx?op=Test&callbackparam=success_jsonpCallback&_=1412735885087

返回结果为:

success_jsonpCallback([{"Id":"1","Name":"老婆","Age":"40"},{"Id":"2","Name":"小三","Age":"20"}])

 

(2)方式二,jQuery的getJSON方法

<scripttype="text/javascript">

//页面加载时执行

$(function() {

         varjsonp_Server="http://localhost";

         varurl=jsonp_Server+"/jsonp/AjaxHandler.ashx?op=Test&callbackparam=?";

         $.getJSON(url,function(result){

                   varhtmlString = "";

                   $.each(result,function(i,obj) {

                            htmlString+="Id:"+obj.Id+" Name:"+obj.Name+"Age:"+obj.Age+"<br/>";

                   });

                   $("#divmessage").html(htmlString);

         });

});

</script>

 

 

请求的路径为:

http://localhost/jsonp/AjaxHandler.ashx?op=Test&callbackparam=jQuery18305845338630024344_1412737144917&_=1412737144978

返回结果为:

jQuery18305845338630024344_1412737144917([{"Id":"1","Name":"老婆","Age":"40"},{"Id":"2","Name":"小三","Age":"20"}])

 

 

 

服务端返回数据的示例代码：

 

publicvoidProcessRequest(HttpContextcontext)

{

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

    stringop=context.Request.QueryString["op"];

    switch (op)

    {

        case"Test":

            Test(context);

            break;

    }

}

 

privatevoidTest(HttpContextcontext)

{

    stringresult=string.Empty;

    stringcallback=context.Request.QueryString["callback"];

 

    DataTabledt=newDataTable();

    dt.Columns.Add("Id");

    dt.Columns.Add("Name");

    dt.Columns.Add("Age");

    dt.Rows.Add("1","老婆","40");

    dt.Rows.Add("2","小三","20");

 

    //将DataTable数据源转换为json数据格式:[{"ColumnName":"ColumnValue",...},...]

    result=dt.ToJson();

    //以这种格式输出:context.Response.Write(callback+ "([{msg: \"hello world! \"}])");

    context.Response.Write(callback+"("+result+")");

    context.Response.End();

}

 

 

页面显示结果

Id:1 Name:老婆 Age:40

Id:2 Name:小三 Age:20