Timeout Funktion für jQuery Ajax / JSONP Requests

Gestern stand ich vor dem Problem, dass ich bei einem jQuery Ajax Request mit JSONP einen Timeout einbauen wollte. Alles kein Problem – man muss einfach nur den Parameter “timeout” gefolgt von einem Millisekunden Wert beim Request-Zusammenbau angeben. Jedoch wollte ich auch eine Funktion einbauen, die dem User mitteilt, dass seine Anfrage vom Server nicht beantwortet werden konnte. Prinzipiell ist dies auch mit dem jQuery Ajax Call möglich, jedoch nicht, wenn man JSONP verwendet. Es gibt aber den Umweg der allgemeinen Ajax Konfiguration, mit der man trotzdem einen Timeout und auch eine Fehlerbehandlung implementieren kann.

Nachdem ich mir aus der jQuery Doku und vielen Forenbeiträgen die einzelnen Details zusammengetragen habe, möchte ich diese hier einfach mal in gebündelter Form loswerden:

$.ajaxSetup({
    timeout: 10000,
    "error":function(XMLHttpRequest,textStatus, errorThrown) {
        if(errorThrown == "timeout") {
            alert("Ups, wir haben einen Timeout...");
        }
    }
});

Dieses Stückchen Code ist eigentlich alles, was man dazu benötigt. Führt es einfach aus, bevor der erste Ajax Call abgesetzt wird. Doch gehen wir das einfach mal einzeln durch.

$.ajaxSetup

dient der allgemeinen Konfiguration von Ajax Calls. Man kann innerhalb von $.ajaxSetup jeden Parameter verwenden, der auch bei $.ajax verwendet werden kann. Setzt man Parameter mit $.ajaxSetup, so können diese immer innerhalb des eigentlichen $.ajax Calls überschrieben werden.

Mit

timeout: 10000

setzen wir einen Timeout von 10 Sekunden. Diesen Wert kann man bei jedem einzelnen Call auch nochmal extra überschreiben.

Und am Schluss implementieren wir mit

"error":function(XMLHttpRequest,textStatus, errorThrown) {
        if(errorThrown == "timeout") {
            alert("Ups, wir haben einen Timeout...");
        }

unsere Fehlerbehandlung. Die erstellte Methode fängt dabei alle Fehler, die bei einem Ajax Call entstehen, ab. Daher habe ich an dieser Stelle auch den if-Block eingebaut, der dediziert nur meinen Timeout Fehler abfängt. Weiter Fehlernamen sind: “error”, “abort”, und “parsererror”. Im XLMHttpRequest Objekt bekommt man das Request Objekt des Ajax Calls mitgeliefert und kann so herausfinden, um welchen Call es sich eigentlich handelt.

Durch die Verwendung von $.ajaxSetup haben wir zum einen das Timeout Verhalten von Ajax Calls an einer zentralen Stelle konfiguriert, zum andern haben wir über diesen Umweg auch die Funktionalität für JSONP Requests überhaupt erst ermöglicht.

Published by

bytelude

Softwareentwickler, Technik Fanatiker, Apple Fan, Kinoliebhaber, Prokrastinations-Spezialist

Leave a Reply

Your email address will not be published. Required fields are marked *