jQuery Ajax (JSONP) ignoriert ein Timeout und nicht ausgelöst, das Fehlerereignis

Question

einige grundlegende Fehlerbehandlung hinzuzufügen, wollte ich ein Stück Code neu zu schreiben, die jQuery $ .getJSON verwendet in einigen Fotos von Flickr zu ziehen. Der Grund dafür ist, dass $ .getJSON nicht die Fehlerbehandlung oder die Arbeit mit Timeouts bietet.

Da $ .getJSON ist nur ein Wrapper um $ Schnipsel Ich beschloss, die Sache und was für eine Überraschung zu umschreiben, es funktioniert einwandfrei.

obwohl

Jetzt beginnt der Spaß. Wenn ich ein 404 absichtlich verursachen (indem die URL zu verändern) oder bewirken, dass die Netzwerk-Timeout (durch nicht auf die interwebs angeschlossen zu werden), wird das Fehlerereignis nicht ausgelöst, überhaupt nicht. Ich bin ratlos, 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 mag hinzufügen, dass diese Frage gestellt wurde, als jQuery auf Version 1.4.2 war

Answer 1

jQuery 1.5 und höher hat eine bessere Unterstützung für Fehler mit JSONP Anfragen Handhabung. Allerdings müssen Sie die $.ajax Methode anstelle von $.getJSON verwenden. Für mich ist dies funktioniert:

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

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

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

Der Timeout scheint den Trick und rufen Sie die Fehlerbehandlung zu tun, wenn es keine erfolgreiche Anforderung nach 10 Sekunden ist.

Ich habe ein wenig Blogpost zu diesem Thema auch.

Answer 2

Dies ist eine bekannte Einschränkung mit der nativen JSONP Implementierung in jQuery. Der folgende Text ist von IBM Developer

  

JSONP ist eine sehr leistungsfähige Technik für   Bau von Mashups, aber leider,   es ist kein Allheilmittel für alle Ihre   Cross-Domain-Kommunikation benötigt. Es   einige Nachteile hat, die ergriffen werden müssen   ernsthaft in Betracht vor   begehen Entwicklungsressourcen.   In erster Linie ist es kein Fehler   Handhabung für JSONP Anrufe. wenn die   dynamisches Skript Einfügen funktioniert, Sie   erhalten genannt; wenn nicht, geschieht nichts.   Es scheitert nur still. Zum Beispiel,   Sie sind nicht in der Lage einen 404-Fehler zu fangen   vom Server. Ebenso wenig können Sie stornieren oder   starten Sie den Antrag. Sie können jedoch,   Timeout nach einer angemessenen Warte   Zeitraum. (Zukunft jQuery   Versionen kann eine Abbruch Funktion haben für   JSONP Anfragen.)

Allerdings gibt es einen JSONP Plug-in auf der Google , die Unterstützung für Fehler bietet Handhabung. Um loszulegen, nur die folgenden Änderungen an Ihrem Code.

Sie können entweder laden Sie es, oder einfach nur einen Skript Bezug auf den Plug-in hinzuzufügen.

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

Dann ist Ihre Ajax-Aufruf ändern, wie unten dargestellt:

$(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

Eine Lösung, wenn Sie mit jQuery stecken 1.4:

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

Answer 4

Dies kann eine „bekannte“ Einschränkung von jQuery sein; jedoch scheint es nicht gut dokumentiert werden. Ich verbrachte etwa 4 Stunden heute versuchen zu verstehen, warum meine Timeout nicht funktioniert.

Ich wechselte zu jquery.jsonp und es hat funktioniert mag einen Reiz. Danke.

Answer 5

Es scheint, als von jQuery 1.5 gelöst werden. Ich habe den Code oben versucht, und ich bekomme den Rückruf.

Ich sage „scheint zu sein“, weil die Dokumentation des Fehler-Callback für jQuery.ajax () hat immer noch die folgende Anmerkung:

  

. Hinweis: Dieser Handler nicht für Cross-Domain-Skript und JSONP Anfragen genannt wird

Answer 6

Die jQuery-JSONP jQuery-Plugin erwähnt in Jose Basilio answer jetzt auf GitHub .

Leider ist die Dokumentation etwas spartanisch, so habe ich ein einfaches Beispiel zu finden:

    $.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 die callbackParameter im Aufruf $ .jsonp () finde ich habe nichts anderes, dass die Callback-Funktion wird nie in den Query-String des Serviceabrufs injiziert (Strom ab Version 2.4.0 von jquery-JSONP).

Ich weiß, diese Frage ist alt, aber das Problem der Fehlerbehandlung JSONP verwendet, ist immer noch nicht ‚aufgelöst‘. Hoffentlich wird dieses Update andere als diese Frage ist die bestplatzierten innerhalb von Google für „jquery JSONP Fehlerbehandlung“ unterstützen.

Answer 7

Was kann man das Skript des onerror Ereignis zu hören? Ich hatte dieses Problem und löste es durch jQuerys Verfahren Patchen, wo der Script-Tag erstellt wurde. Hier ist das interessantes Stück 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, um Kompatibilitätsprobleme verursachen?