jquery ajax跨域请求

jquery ajax跨域请求--jquery ajax parsererror was not called

作者: IT小兵 | 2014年4月1日| 热度:12414℃ | 评论:2 |参与:2

在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]