JQuery Kochbuch (German Edition)

Server zu senden, wird ein Settings-Objekt mit den Parametern für die Anfrage an die Methode
$.ajax
übergeben. Dabei stehen eine ganze Reihe von Optionen zur Verfügung, die gebräuchlichsten dürften
type
,
url
,
complete
,
dataType
,
error
und
success
sein:
var options = {
    type: 'GET'
};
    Die erste Option, die man beim Aufsetzen einer Ajax-Anfrage benötigt, ist die Art der HTTP-Anfrage, die Sie an den Server schicken wollen. Im Großteil der Fälle wird das entweder ein GET oder ein POST sein:
var options = {
    type: 'GET',
    url: 'hello-ajax.html',
    dataType: 'html'
};
    Als nächstes schauen wir uns die Optionen
URL
und
dataType
an.
URL
ist recht selbsterklärend, wobei es eine Spezialität gibt: Setzt man die Option
cache
auf
false
, dann fügt jQuery eine GET-Variable
_=

(zum Beispiel
/server-ajax-gateway?_=6273551235126
) an die URL an, um Browser, Proxies und Server davon abzuhalten, eine zwischengespeicherte Antwort zurückzuschicken. Schließlich legt die Option
dataType
das Datenformat fest, das vom Server erwartet wird. Gehen Sie zum Beispiel davon aus, dass der Server XML zurückliefert, wäre der passende Wert für diese Option
xml
:
var options = {
    type: 'GET',
    url: 'hello-ajax.html',
    dataType: 'html',
    error: function(xhr, textStatus, errorThrown) {
     alert('Es ist ein Fehler aufgetreten! ' + errorThrown);
    },
    success: function(data, textStatus) {
     $('body').append( data );
    }
};
    Bei den nächsten beiden Optionen handelt es sich um zwei Callback-Methoden mit den Namen
error
und
success
. Sie sind durch ihre Namen schon gut beschrieben –
error
wird aufgerufen, wenn es bei der Anfrage zu einem Fehler gekommen ist,
success
wird genutzt, wenn die Antwort erfolgreich war (der Server also einen Response Type 200 zurückgegeben hat). Die andere, häufiger genutzte Option, ist
complete
,die eine Callback-Methode definiert, welche zum Schluss aufgerufen werden soll – egal, ob es einen Fehler gab oder nicht:
var options = {
    type: 'GET',
    url: 'hello-ajax.html',
    dataType: 'html',
    complete: function(xhr, textStatus) {
     // Verarbeiten der Antwort
    }
};
    Nachdem die Optionen festgelegt wurde, können wir unsere Anfrage ausführen:
var options = {
    type: 'GET',
    url: 'hello-ajax.html',
    dataType: 'html',
    complete: function(xhr, textStatus) {
     // Verarbeiten der Antwort
    }
};
$.ajax( options );
    Wir können unsere Optionen auch direkt beim Aufruf der Methode angeben:
$.ajax({
    type: 'GET',
    url: 'hello-ajax.html',
    dataType: 'html',
    complete: function(xhr, textStatus) {
     // Verarbeiten der Antwort
    }
});
    Unsere vollständige Lösung fragt nach der Datei
hello-ajax.html
und fügt den Inhalt (
html
) bei einer erfolgreichen Antwort an das

-Element an. Gab es einen Fehler, dann wird stattdessen die Methode
error
aufgerufenund der Anwender mit einer Nachricht informiert:
(function($) {
    $(document).ready(function() {
     $('#update').click(function() {
     $.ajax({
     type: 'GET',
     url: 'hello-ajax.html',
     dataType: 'html',
     success: function(html, textStatus) {
     $('body').append(html);
     },
     error: function(xhr, textStatus, errorThrown) {
     alert('Es ist ein Fehler aufgetreten! ' + errorThrown);
     }
     });
     });
    });
})(jQuery);

Ajax auf der gesamten Site verwenden
    Problem
    Sie haben eine große Web-Anwendung mit Ajax-Aufrufen überall im Code und müssen Standard-Einstellungen für alle Anfragen innerhalb der Anwendung setzen.
    Lösung
(function($) {
    $(document).ready(function() {
     $('#loadingIndicator')
     .bind('ajaxStart', function() {
     $(this).show();
     })
     .bind('ajaxComplete', function() {
     $(this).hide();
     });
     $.ajaxSetup({
     cache: true,
     dataType: 'json',
     error: function(xhr, status, error) {
     alert('Es ist ein Fehler aufgetreten: ' + error);
     },
     timeout: 60000, // Timeout von 60 Sekunden
     type: 'POST',
     url: 'ajax-gateway.php'
     }); // Ende von $.ajaxSetup()
    }); // Ende von .ready()
})(jQuery);
    Diskussion
    Wenn man mit größeren Anwendungen arbeitet, gibt es häufig ein allgemein genutztes Ajax-Gateway, durch das alle Anfragen laufen. Mit der Methode
$.ajaxSetup()
könnenwir Standard-Einstellungen für Ajax-Anfragen vorgeben, so dass die Ajax-Anfragen in der Anwendung einfacher zu nutzen sind:
$.ajax({
    data: {
     // Meine Anfrage-Daten für den Server
    },
     success: function(data) {
     // Anpassen der Benutzeroberfläche
    }
});
    Ein nicht unwichtiger Punkt ist die Timeout-Option, deren Wert in Millisekunden (Sekunden×1.000) angegeben wird – ein