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

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

由于$ .getJSON仅仅是$ .ajax的一个包装,所以我决定重写这个东西,并且让人惊喜,它完美的工作。

现在乐趣开始了。 当我故意引起404(通过更改URL)或导致networking超时(通过不被连接到interwebs),错误事件根本不会触发。 我不知道我做错了什么。 非常感谢帮助。

代码如下:

$(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时,这个问题被问到

jQuery 1.5和更高版本更好地支持使用JSONP请求进行error handling。 但是,您需要使用$.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秒后没有成功的请求时调用error handling程序。

我也在这个主题上做了一个小博客 。

这是jQuery中本地jsonp实现的一个已知限制。 以下文本来自IBM DeveloperWorks

JSONP是构build混搭的一个非常强大的技术,但是,不幸的是,它不能解决你所有的跨域通信需求。 在投入发展资源之前,必须认真考虑一些弊端。 首先,对于JSONP调用没有error handling。 如果dynamic脚本插入工作,你会被调用; 如果没有,没有任何反应。 它只是默默地失败。 例如,您无法从服务器捕获404错误。 您也不能取消或重新启动请求。 但是,您可以在等待一段合理的时间后超时。 (未来的jQuery版本可能会有JSONP请求的中止function。)

但是, GoogleCode上提供了一个jsonp插件,用于支持error handling。 要开始,只需对代码进行以下更改。

您可以下载它,或者只是添加脚本引用到插件。

 <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); } }); }); 

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

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

这可能是jQuery的“已知”限制; 但是,它似乎没有很好的文件。 我今天花了大约4个小时,试图理解为什么我的超时不工作。

我切换到jquery.jsonp ,它的工作就像一个魅力。 谢谢。

似乎jQuery 1.5的解决。 我已经尝试了上面的代码,并得到callback。

我说“似乎是”,因为jQuery.ajax()的错误callback的文档仍然有以下说明:

注意:此处理程序不会被调用用于跨域脚本和JSONP请求。

在Jose Basilio的 答案中提到的jquery-jsonp jQuery插件现在可以在GitHub上find 。

不幸的是,这个文档有些简陋,所以我提供了一个简单的例子:

  $.jsonp({ cache: false, url: "url", callbackParameter: "callback", data: { "key" : "value" }, success: function (json, textStatus, xOptions) { // handle success - textStatus is "success" }, error: function (xOptions, textStatus) { // handle failure - textStatus is either "error" or "timeout" } }); 

重要在call中包含callbackParameter $ .jsonp()否则我发现callback函数永远不会被注入服务调用的查询string(当前版本为jquery-jsonp 2.4.0版本)。

我知道这个问题是旧的,但使用JSONP处理错误的问题仍然没有解决。 希望这个更新会帮助其他人,因为这个问题是谷歌“jQuery jsonperror handling”中排名最高的。

听剧本的恐怖事件怎么样? 我有这个问题,并通过修补脚本标记创buildjquery的方法来解决它。 这里有一些有趣的代码:

 // Attach handlers for all browsers script.onload = script.onreadystatechange = function( _, isAbort ) { if ( isAbort || !script.readyState || /loaded|complete/.test( script.readyState ) ) { cleanup(); // Callback if not abort if ( !isAbort ) { callback( 200, "success" ); } } }; /* ajax patch : */ script.onerror = function(){ cleanup(); // Sends an inappropriate error, still better than nothing callback(404, "not found"); }; function cleanup(){ // Handle memory leak in IE script.onload = script.onreadystatechange = null; // Remove the script if ( head && script.parentNode ) { head.removeChild( script ); } // Dereference the script script = undefined; } 

你对这个解决scheme有什么看法? 是否可能导致兼容性问题?