JQuery Kochbuch (German Edition)

Timeout von
6000
würde also für sechs Sekunden stehen. Beim Setzen dieses Wertes sollten Sie bedenken, wie weit das Internet global schon gewachsen ist. Manche Ihrer Besucher nutzen vielleicht Verbindungen mit einer höheren Latenz als die in Ihrer Region. Setzen Sie diesen Wert also nicht zu niedrig (zum Beispiel fünf Sekunden). Ein höherer Wert wie 30 oder 60 Sekunden ermöglichst es auch bei Verbindungen mit einer sehr hohen Latenz (zum Beispiel bei Satelliten-Verbindungen), Ihre Anwendung nutzen zu können.
    Im vorigen Beispiel wird die Anfrage ein POST an
ajax-gateway.php
sein. Wenn ein Fehler auftritt, wird er von der error-Funktion abgehandelt, die in
$.ajaxSetup()
definiert ist. Es ist immer noch möglich, die Einstellungen für eine bestimmte Anfrage zu überschreiben:
$.ajax({
    url: 'another-url.php',
     data: {
     // Meine Anfrage-Daten für den Server
     },
     success: function(data) {
     // Anpassen der Benutzeroberfläche
    }
});
    Die vorige Anfrage würde an
another-url.php
anstatt an
ajax-gateway.php
geschickt werden. Ein Vorteil der Ajax-Architektur von jQuery ist, dass globale Eventswie
ajaxComplete
,
ajaxError
,
ajaxSend
,
ajaxStart
,
ajaxStop
und
ajaxSuccess
zur Verfügung stehen. Diese Events lassen sich über die Methode
.bind('
event
'
, callback)
oder die Kurzform
.event
(callback)
nutzen. Das folgende Beispiel zeigt die beiden Methoden zum Binden des Callback an das Event
ajaxError
:
(function($) {
    $(document).ready(function() {
     $('#loadingIndicator')
     .ajaxError(function() {
     // Ihr Code
     });
     // oder über bind()
     $('#loadingIndicator')
     .bind('ajaxError', function() {
     // Ihr Code
     });
    });
})(jQuery);
    Hier eine kure Auflistung der Events, die zur Verfügung stehen. Sie sind in der Reihenfolge ihres Auftretens angegeben:
    ajaxStart
Wird beim Start einer Ajax-Anfrage ausgelöst, wenn keine anderen Anfragen »unterwegs« sind
    ajaxSend
Wird vor dem Abschicken jeder einzelnen Anfrage ausgelöst
    ajaxSuccess
oder
ajaxError
Wird bei einer erfolgreichen oder erfolglosen Anfrage ausgelöst
    ajaxComplete
Wird zum Abschluss einer Anfrage ausgelöst (unabhängig von ihrem Erfolg)
    ajaxStop
Wird ausgelöst, wenn keine weiteren Ajax-Anfragen mehr unterwegs sind
    Im nächsten Rezept werden wir diese Events auch einsetzen.

Einfache Ajax-Anwendung mit Rückmeldungen an den Benutzer
    Problem
    Sie müssen für den Anwender einen Status-Indikator präsentieren, wenn Ajax-Anfragen in Bearbeitung sind. Nach Vervollständigung der Anfragen soll er wieder verborgen werden.
    Lösung
(function($) {
    $(document).ready(function() {
     $('#ajaxStatus')
     .ajaxStart(function() {
     $(this).show();
     })
     .ajaxStop(function() {
     $(this).hide();
     });

     // Start der Ajax-Anfrage, wenn der Button doAjaxButton angeklickt wird
     $('#doAjaxButton').click(function() {
     $.ajax({
     url: 'ajax-gateway.php',
     data: { val: "Hello world" },
     dataType: 'json',
     success: function(json) {
     // Code zur Verarbeitung der Daten
     $('body').append( 'Rückgabewert: ' + json.val );
     }
     });
     });
    });
})(jQuery);
    Diskussion
    Einer der großen Vorteile der Ajax-Implementierung von jQuery ist die Verfügbarkeit von globalen Ajax-Events, die mit jeder Ajax-Anfrage für alle Elemente ausgelöst werden. In der folgenden Lösung binden wir zwei der Events,
ajaxStart
und
ajaxStop
, mit den Methoden (in Kurzform) an das XHTML-Element mit der ID
ajaxStatus
. Wird die Ajax-Anfrage durch einen Klick auf
#doAjaxButton
ausgelöst, wird das Event
ajaxStart
angetriggert. Dadurch wird für das Element
#ajaxStatus
die Methode
show()
ausführt. Beachten Sie, dass diese Events automatisch ausgelöst werden und ein Nebenprodukt der Verwendung von
$.ajax()
(oder anderen Kurzform-Methoden wie
$.get()
) sind. Damit haben wir eine sauber entkoppelte Lösung für die Anzeige eines anwendungsweiten Status beim Abschicken von Ajax-Anfragen:
(function($) {
    $(document).ready(function() {
     $('#ajaxStatus')
     .ajaxStart(function() {
     $(this).show();
     })
     .ajaxStop(function() {
     $(this).hide();
     });

     // Start der Ajax-Anfrage, wenn der Button doAjaxButton angeklickt wird
     $('#doAjaxButton').click(function() {
     $.ajax({
     url: 'ajax-gateway.php',
     data: { val : 'Hello world' },
     dataType: 'json',
     success: function(json) {
     // Code zur Verarbeitung der Daten
     $('body').append( 'Rückgabewert: ' + json.val );
     }
     });
     });
    });
})(jQuery);
    Lassen Sie uns ein paar der weiteren Events anschauen und uns mit dem Unterschied zwischen lokalen