jQuery ajax(jsonp)忽略超时并且不会触发错误事件

Question

为了添加一些基本的错误处理,我想重写一段使用jQuery的$ .getJSON来从Flickr中提取一些照片的代码.这样做的原因是$ .getJSON不提供错误处理或使用超时.

因为$ .getJSON只是$ .ajax的包装,所以我决定改写这个东西并惊喜,它完美无缺.

现在开始有趣了.当我故意导致404(通过更改URL)或导致网络超时(没有连接到互联网)时,错误事件根本不会触发.我不知道自己做错了什么.非常感谢帮助.

这是代码:

$(document).ready(function(){

    // var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne"; // correct URL
    var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne_______"; // this should throw a 404

    $.ajax({
        url: jsonFeed,
        data: { "lang" : "en-us",
                "format" : "json",
                "tags" : "sunset"
        },
        dataType: "jsonp",
        jsonp: "jsoncallback",
        timeout: 5000,
        success: function(data, status){
            $.each(data.items, function(i,item){
                $("<img>").attr("src", (item.media.m).replace("_m.","_s."))
                          .attr("alt", item.title)
                          .appendTo("ul#flickr")
                          .wrap("<li><a href=\"" + item.link + "\"></a></li>");
                if (i == 9) return false;
            });
        },
        error: function(XHR, textStatus, errorThrown){
            alert("ERREUR: " + textStatus);
            alert("ERREUR: " + errorThrown);
        }
    });

});

我想补充说,当jQuery版本为1.4.2时,会问这个问题

Answer 1

jQuery 1.5及更高版本可以更好地支持JSONP请求的错误处理.但是,您需要使用该$.ajax方法而不是$.getJSON.对我来说,这有效:

var req = $.ajax({
    url : url,
    dataType : "jsonp",
    timeout : 10000
});

req.success(function() {
    console.log('Yes! Success!');
});

req.error(function() {
    console.log('Oh noes!');
});

超时似乎可以解决问题并在10秒后没有成功请求时调用错误处理程序.

我也在这个主题上做了一些博文.

Answer 2

这是jQuery中本机jsonp实现的已知限制.以下文本来自IBM DeveloperWorks

JSONP是一种用于构建mashup的非常强大的技术,但不幸的是,它并不能解决所有跨域通信需求.它有一些缺点,在提交开发资源之前必须认真考虑.首先,JSONP调用没有错误处理.如果动态脚本插入有效,则会调用; 如果没有,没有任何反应.它只是默默地失败了.例如,您无法从服务器捕获404错误.你也不能取消或重启请求.但是,等待一段合理的时间后,您可以超时.(未来的jQuery版本可能具有JSONP请求的中止功能.)

但是,GoogleCode上提供了一个jsonp插件,可以为错误处理提供支持.要开始使用,只需对代码进行以下更改即可.

您可以下载它,也可以只向插件添加脚本引用.

<script type="text/javascript" 
     src="http://jquery-jsonp.googlecode.com/files/jquery.jsonp-1.0.4.min.js">
</script>

然后修改你的ajax调用,如下所示:

$(function(){
    //var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne"; // correct URL
    var jsonFeed = "http://api.flickr.com/services/feeds/photos_public.gne_______"; // this should throw a 404  
    $.jsonp({
        url: jsonFeed,
        data: { "lang" : "en-us",
                "format" : "json",
                "tags" : "sunset"
        },
        dataType: "jsonp",
        callbackParameter: "jsoncallback",
        timeout: 5000,
        success: function(data, status){
            $.each(data.items, function(i,item){
                $("<img>").attr("src", (item.media.m).replace("_m.","_s."))
                          .attr("alt", item.title)
                          .appendTo("ul#flickr")
                          .wrap("<li><a href=\"" + item.link + "\"></a></li>");
                if (i == 9) return false;
            });
        },
        error: function(XHR, textStatus, errorThrown){
            alert("ERREUR: " + textStatus);
            alert("ERREUR: " + errorThrown);
        }
    });
});

Answer 3

一个解决方案,如果你坚持使用jQuery 1.4:

var timeout = 10000;
var id = setTimeout( errorCallback, timeout );
$.ajax({
    dataType: 'jsonp',
    success: function() {
        clearTimeout(id);
        ...
    }
});

Answer 4

这可能是jQuery的"已知"限制; 但是,它似乎没有很好的记录.今天我花了大约4个小时试图理解为什么我的超时不起作用.

我切换到jquery.jsonp,它的工作很喜欢魅力.谢谢.