发现JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式
什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理,根据客户端提交的callback的参数,返回一个callback(json)的数据,而客户端将会用script的方式处理返回数据,来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。
客户端
var xhrurl = 'http://localhost:8001/Ajax/ticketNotify.ashx?cu=kefu1'; $.ajax({ type : "get", async : false, url :xhrurl, cache : false, dataType : "jsonp", jsonp: "callbackparam", jsonpCallback:"jsonpCallback1", success : function(json){ alert(json[0].name); }, error:function(e){ alert("error"); } });
服务端
String callbackFunName = context.Request["callbackparam"];
context.Response.Write(callbackFunName + "([ { \"name\":\"John\"}])");
PS:客户端的jsonp参数是用来通过url传参,传递jsonpCallback参数的参数名,比较拗口,通俗点讲:
jsonp: "callbackparam" jsonpCallback:"jsonpCallback1"
这两个参数最终会拼接在请求的url后面,变成 http://www.xxx.com/ajax/xxx.ashx?callbackparam=jsonCallback1 服务端要获取这个参数值:"jsonCallback1" ,
拼接在要输出的JSON数据最前面,不然就算请求成功你也只会看到警告: Resource interpreted as Script but transferred with MIME type text/plain:
却看不到success定义的函数执行。
顺带一提: 在chrome浏览器里,还可以在服务端设置header信息 context.Response.AddHeader("Access-Control-Allow-Origin", "*");
来达到跨域请求的目的,并且不需要设置ajax以下参数
dataType : "jsonp",
jsonp: "callbackparam",
jsonpCallback:"jsonpCallback1"
以正常ajax请求方式就可以获得数据。