jquery ajax跨域请求

    xiaoxiao2021-03-25  33

    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]

    转载请注明原文地址: https://ju.6miu.com/read-50257.html

    最新回复(0)