jQuery ajax (jsonp) ignoriert eine Zeitüberschreitung und löst das Fehlerereignis nicht aus

Um einige grundlegende Fehlerbehandlungen hinzuzufügen, wollte ich einen Code neu schreiben, der jQuerys $ .getJSON verwendete, um einige Fotos von Flickr abzurufen. Der Grund dafür ist, dass $ .getJSON keine Fehlerbehandlung bietet oder nicht mit Zeitüberschreitungen arbeitet.

Da $ .getJSON nur ein Wrapper um $ .ajax ist, habe ich beschlossen, das Ding neu zu schreiben und Überraschung zu überraschen, es funktioniert einwandfrei.

Jetzt fängt der Spaß aber an. Wenn ich absichtlich einen 404 verursache (indem ich die URL ändere) oder das Netzwerk eine Zeitüberschreitung verursacht (indem ich nicht mit den Interwebs verbunden bin), wird das Fehlerereignis überhaupt nicht ausgelöst. Ich weiß nicht, was ich falsch mache. Hilfe wird sehr geschätzt.

Hier ist der Code:

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

});

Ich möchte hinzufügen, dass diese Frage gestellt wurde, als jQuery auf Version 1.4.2 war

jQuery 1.5 und höher unterstützen die Fehlerbehandlung bei JSONP-Anforderungen besser. Sie müssen jedoch die $.ajaxMethode anstelle von verwenden $.getJSON. Für mich funktioniert das:

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

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

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

Das Timeout scheint den Trick zu tun und den Fehlerbehandler aufzurufen, wenn nach 10 Sekunden keine erfolgreiche Anforderung vorliegt.

Ich habe auch einen kleinen Blogpost zu diesem Thema gemacht.

Dies ist eine bekannte Einschränkung bei der nativen jsonp-Implementierung in jQuery. Der folgende Text stammt von IBM DeveloperWorks

JSONP ist eine sehr leistungsfähige Technik zum Erstellen von Mashups, aber leider nicht das Allheilmittel für alle Ihre domänenübergreifenden Kommunikationsanforderungen. Es hat einige Nachteile, die ernsthaft berücksichtigt werden müssen, bevor Entwicklungsressourcen bereitgestellt werden. In erster Linie gibt es keine Fehlerbehandlung für JSONP-Aufrufe. Wenn das dynamische Einfügen von Skripten funktioniert, werden Sie aufgerufen. wenn nicht, passiert nichts. Es scheitert einfach lautlos. Beispielsweise können Sie keinen 404-Fehler vom Server abfangen. Sie können die Anforderung auch nicht abbrechen oder neu starten. Sie können jedoch eine Zeitüberschreitung feststellen, nachdem Sie eine angemessene Zeit gewartet haben. (Zukünftige jQuery-Versionen verfügen möglicherweise über eine Abbruchfunktion für JSONP-Anforderungen.)

Allerdings gibt es eine JSONP Plug-in auf Googlecode, die Unterstützung für die Fehlerbehandlung zur Verfügung stellt. Nehmen Sie zunächst die folgenden Änderungen an Ihrem Code vor.

Sie können es entweder herunterladen oder einfach eine Skriptreferenz zum Plug-In hinzufügen.

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

Ändern Sie dann Ihren Ajax-Aufruf wie folgt:

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

Eine Lösung, wenn Sie mit jQuery 1.4 nicht weiterkommen:

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

Dies kann eine "bekannte" Einschränkung von jQuery sein. es scheint jedoch nicht gut dokumentiert zu sein. Ich habe heute ungefähr 4 Stunden damit verbracht zu verstehen, warum meine Auszeit nicht funktioniert hat.

Ich wechselte zu jquery.jsonp und es funktionierte wie ein Zauber. Danke dir.

Scheint ab jQuery 1.5 gelöst zu sein. Ich habe den obigen Code ausprobiert und erhalte den Rückruf.

Ich sage "scheint zu sein", weil die Dokumentation des Fehlerrückrufs für jQuery.ajax () immer noch den folgenden Hinweis enthält:

Hinweis: Dieser Handler wird nicht für domänenübergreifende Skript- und JSONP-Anforderungen aufgerufen.

Das in Jose Basilios Antwort erwähnte jQuery-Plugin jquery-jsonp ist jetzt auf GitHub zu finden .

Leider ist die Dokumentation etwas spartanisch, daher habe ich ein einfaches Beispiel gegeben:

    $.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"
        }
    });

Wichtig Fügen Sie den callbackParameter in den Aufruf $ .jsonp () ein. Andernfalls wurde festgestellt, dass die Rückruffunktion niemals in die Abfragezeichenfolge des Serviceaufrufs eingefügt wird (aktuell ab Version 2.4.0 von jquery-jsonp).

Ich weiß, dass diese Frage alt ist, aber das Problem der Fehlerbehandlung mit JSONP ist immer noch nicht gelöst. Hoffentlich hilft dieses Update anderen, da diese Frage bei Google für "jquery jsonp error handle" an erster Stelle steht.

Was ist mit dem Abhören des Fehlerereignisses des Skripts? Ich hatte dieses Problem und löste es durch Patchen der Methode von jquery, in der das Skript-Tag erstellt wurde. Hier ist der interessante Code:

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

Was halten Sie von dieser Lösung? Ist es wahrscheinlich, dass es Kompatibilitätsprobleme verursacht?