在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery的jquery.ajax JSONP格式和jquery.getScript方式。
ajax要在各种浏览器下都实现完美的跨域需要借助于jsonp技术,jsonp实质是请求一个js脚本文件,在js文件载入完毕时执行某个函数,这样就可以完美的规则跨域问题了。
什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理,根据客户端提交的callback的参数,返回一个callback(json)的数据,而客户端将会用script的方式处理返回数据,来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。
jquery封装了jsonp请求的发送方式,使jsonp请求和ajax请求方式几乎相同了,如下是jquery跨域请求的写法:
1 2 3 4 5 6 7 8 9 10 11 12 $.ajax( { url: "testserver.php" , dataType: 'jsonp' , // 注意:JSONP <-- P (lowercase) success: function (json){ // do stuff with json (in this case an array) alert( "Success" ); }, error: function (){ alert( "Error" ); }, }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var AjaxUrl = "http://www.itools.info/?checkkne&jsoncallback=?" ; // " + " ?jsoncallback=? "; //之前没有加这句老是提示no transport,我没去深想。 $.ajax ({ type: " get ", contentType: " application/json; charset=utf-8 ", dataType: " json ", url: AjaxUrl, //这里是网址 success: function (data) { // CheckIphone(); }, timeout: 1000, error: function (XMLHttpRequest, textStatus, errorThrown) { if (errorThrown.message.indexOf(" was not called") >= 0) { submitNow(); } } });注意跨域请求的一般ajax请求的区别在于dataType设置成了jsonp了
对应的服务器端代码示例如下:
1 2 3 4 5 6 string accounts = GameRequest.GetQueryString( "accounts" ); string jsoncallback = GameRequest.GetQueryString( "jsoncallback" ); Response.ContentEncoding =System.Text.Encoding.UTF8; Response.ContentType = "application/json" ; htm = htm&(jsoncallback + "({" Success ":" True "," Content ":" " + accounts + " "})" ); Response.End();如果这时候出现报错,我们可以跟踪debugger一下。
错误情况,主要有:
1、服务端错误:这时候ajax是会异常的,请查一下http status;
2、浏览器解析错误:一般是parsererror 。responseText是200.
很可能是数据格式错误,或者json数据格式化不正确。
还有一种错误是:jquery ajax parsererror was not called。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
解决此问题:
首先分析错误提示:parsererror 是解析器错误,
jQuery15001997238997904205_1298484897373 was not called 是jQuery150019...此函数没被执行。
那么为什么这个函数没被调用呢?
我们来看一下,jQuery15001997238997904205_1298484897373 这个函数名的来由, 此是在跨域ajax时自动产生的,怎么跨域? jsoncallback=? 就是加一个这个,然后后台代码里也返回这个参数的值就行了。
1、后台加上返回的格式是json后,返回的就是json。
2、 success:function(data){ data = JSON.parse(data); // process data}
eval json字符串和JSON.parse区别:
对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象,以下举例说明:
var dataObj=eval("("+data+")");//转换为json对象
为什么要 eval这里要添加 “("("+data+")");//”呢?
原因在于:eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的: alert(eval("{}"); // return undefined alert(eval("({})");// return object[Object]