jQuery jsonp无法捕获404、500状态错误

最新推荐文章于 2021-08-06 02:51:08 发布

转载最新推荐文章于 2021-08-06 02:51:08 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pao8041/p/4750403.html

文章标签：

#javascript #json #前端 #ViewUI

探讨了使用jQuery AJAX调用JSONP API时遇到服务端500错误但前端未触发error事件的问题。分析原因在于JSONP实现机制及IE6-8不支持script标签的onload和onerror事件。提出了通过设置timeout参数来解决该问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天同事在用jQuery的ajax方法去调用一个jsonp的api时，服务端出现了500错误，但是前端的jQuery代码却没有触发error事件，代码如下：

$.ajax({
        url: 'http://ptres.37.com/js/sq/modules/base44.js',
        type: 'GET',
        dataType: 'jsonp'
    })
    .done(function() {
        console.log("success");
    })
    .fail(function() {
        console.log("error");
    }).always(function(){
        console.log("always");
    });

如上的一段代码，在服务端出错时（http状态码为：5XX、4XX），ajax绑定的done, fail, always方法竟然一个都没有被触发。挺意外的，为什么这样呢？难道是jQuery的bug？

仔细思考下jsonp的实现原理，其实不难找出问题的原因。

jsonp调用时其实是在header中创建一个script的dom节点，然后通过script的资源调用方式去向远程服务器发送请求的，问题的关键就在这个script标签上。如果想知道这个资源地址有没有请求成功，我首先想到的是onload和onerror这两个回调函数，遗憾的是，ie6,7,8都是不支持script的onload和onerror回调！我想，这个应该是jquery无法捕获到这个错误的原因吧。

那么有没有其它办法来处理这个错误呢，答案是有的，并且很简单，只要加上timeout参数即可：

    $.ajax({
        url: 'http://ptres.37.com/js/sq/modules/base44.js',
        type: 'GET',
        timeout: 2000,
        dataType: 'jsonp'
    })
    .done(function() {
        console.log("success");
    })
    .fail(function() {
        console.log("error");
    }).always(function(){
        console.log("always");
    });