首页 > 代码库 > jquery jsonp请求错误处理

jquery jsonp请求错误处理

jQuery将ajax方法进行了封装,jsonp可以轻松实现跨域请求。

$.ajax({type: ‘GET‘, url: "<%= SysUtils::TASK_CENTER_URL %>/all_tasks_h/verbose",
          async: false,
          dataType: "jsonp",
          jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
          timeout: 10,
          jsonpCallback:"flightHandler",
          success: function (msg) {
          if(msg){
              $(‘#main-content‘).text(JSON.stringify(msg));
          }else{
              $("#main-content").text("未返回数据,请勿频繁刷新"); } },
error:
function(jqXHR,textStatus){
var error_info = $(‘<div class="alert alert-danger">连接失败,请勿频繁刷新,如需帮助请联系管理员</div>‘);
$(
"#main-content").empty().append(error_info); }
});

上面的方法正常的情况下可以执行,但是虽然浏览器终端报出错误(404或其他网络错误),但你的error回调却没有被执行!?如果出错的情况下,error回调确没有执行。

我们仔细看看ajax方法的文档,在它error回调说明的最后有一句话:

Note: This handler is not called for cross-domain script and cross-domain JSONP requests. This is an Ajax Event.

这就说明在调用跨域的脚本及jsonp请求时,这个错误将不会被执行,并强调指出这个error是一个 Ajax Event.

 其实,严格而讲jsonp不是ajax,ajax是通过XMLHttpRequest对象发送异步请求,而jsonp则是利用js标签天生具备的跨域能力来实现跨域资源访问。也就是说,虽然它的名字叫JSONP(JSON with Padding),但它底层是通过js标签实现的,它跟json以及普通异步请求关系都不大,jquery之所以把jsonp请求放到ajax方法里面,只是为了让api更方便调用而已。 (JSONP的详细描述可以查看WIKI,或者google)

那怎么做才能使JSONP的error回调被执行呢?

有两个方法,方法一:添加timeout参数。

$.ajax({
  url: ‘<%= SysUtils::TASK_CENTER_URL%>/all_tasks_h/verbose‘, 
type:
‘GET‘,
dataType:
‘jsonp‘, // dataType为jsonp
timeout: 5000, // 添加timeout参数
success: function(data) { $(‘.result‘).text(JSON.stringify(data)); },
error:
function(jqXHR, textStatus) {
// 此时textStatus为‘timeout’
$(‘#main-content‘).text(‘error‘); alert(‘JSONP error!‘);
}
});

 

添加timeout参数后,虽然JSONP请求本身的错误没有被捕获,但是最终会因为超时而执行error回调。


 

那还有没有方法使error回调在JSONP错误发生时就执行呢?

方法二出场:使用jquery jsonp插件 - https://github.com/jaubourg/jquery-jsonp

以下为常见的jqeury jsonp插件调用代码:

$.jsonp({
url: ‘<%= SysUtils::TASK_CENTER_URL%>/all_tasks_h/verbose‘, 
callbackParameter:
"callback",
timeout:
5000,
error:
function(xOptions, textStatus) {
// 错误发生时,立即执行
$(‘.result‘).text(‘error‘
);
alert(
‘JSONP error!‘);
},
success:
function(data) {
$(
‘#main-content‘).text(JSON.stringify(data));
}
});

 

使用jsonp插件,能够在错误发生时立即执行error回调,并且还附带如’数据过滤’等功能,更多详细介绍请查看它的主页。

以上。

jquery jsonp请求错误处理