JQuery Kochbuch (German Edition)

und globalen Ajax-Events beschäftigen. Lokale Ajax-Events (durch die Verwendung von
$.ajaxSetup()
oder beim Aufruf von
$.ajax()
definiert) sind
beforeSend
,
success
,
error
und
complete
. Diese Events sind inline definiert und direkt mit einer einzelnen Ajax-Anfrage verbunden. Globale Ajax-Events sind mit den lokalen Events verbunden, werden aber für jedes Element ausgelöst, das sie bindet, und nutzen die jQuery-eigene Architektur zum Event Handling. Der folgende Code zeigt, wie Sie lokale Ajax-Events nutzen können (zum Beispiel
complete
):
$.ajax({
    type: 'GET',
    url: 'ajax-gateway.php',
    dataType: 'html',
    complete: function(xhr, textStatus) {
     // Code zur Verarbeitung der Daten
    }
});
    Hier in der Reihenfolge des Aufrufs die Events für eine erfolgreiche Ajax-Anfrage (zusammen mit dem Gültigkeitsbereich):
    ajaxStart
(global)
beforeSend
(lokal)
ajaxSend
(global)
success
(lokal)
ajaxSuccess
(global)
complete
(lokal)
ajaxComplete
(global)
ajaxStop
(global)
    Bei einer fehlerhaften Ajax-Anfrage sieht die Reihenfolge wie folgt aus, wobei
success
und
ajaxSuccess
durch
error
und
ajaxError
ausgetauscht sind:
    ajaxStart
(global)
beforeSend
(lokal)
ajaxSend
(global)
error
(lokal)
ajaxError
(global)
complete
(lokal)
ajaxComplete
(global)
ajaxStop
(global)
    ajaxStart
und
ajaxStop
sind zwei spezielle Events im globalen Gültigkeitsbereich. Sie unterscheiden sich dadurch von den anderen Events, dass sie abhängig vom Einsatz mehrerer paralleler Ajax-Anfragen ausgelöst werden.
ajaxStart
wird gerufen, wenn eine erste Anfrage gestartet wird (und keine andere schon »unterwegs« ist).
ajaxStop
wird ausgelöst, wenn keinerlei andere Ajax-Anfragen mehr abzuwarten sind. Diese beiden Events werden daher auch bei mehreren gleichzeitigen Anfragen nur einmal ausgelöst:
(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',
     complete: function() {
     // Code zur Verarbeitung der Daten
     }
     });
     $.ajax({
     url: 'ajax-data.php',
     complete: function() {
     // Code zur Verarbeitung der Daten
     }
     });
     });
    });
})(jQuery);
    Die Methode
$.ajax()
besitzt die Option
global
, die die Werte
true
oder
false
annehmen kann. Setzt man
global
auf
false
, dann lassen sich die globalen Events unterdrücken.
    ----
    Note
    Wenn Sie in Ihrer Anwendung Performance-Probleme bemerken, kann das an dem Aufwand für die Event Propagation liegen, wenn es viele Elemente gibt. In diesem Fall erhalten Sie durch das Setzen von
global
auf
false
eventuell eine Performance-Verbesserung.
    ----
    Der Callback
beforeSend
istein lokales Event, das die Veränderung des
XMLHttpRequest
-Objekts (welches als Argument übergeben wird) erlaubt, bevor die Anfrage abgeschickt wird. Im folgenden Beispiel legen wir für die Anfrage eigene HTTP-Header fest. Es ist möglich, die Anfrage abzubrechen, indem wir den Callback
false
zurückgeben lassen:
(function($) {
    $(document).ready(function() {
     // Start der Ajax-Anfrage, wenn der Button doAjaxButton angeklickt wird
     $('#doAjaxButton').click(function() {
     $.ajax({
     url: 'ajax-gateway.php',
     beforeSend: function(xmlHttpRequest) {
     xmlHttpRequest.setRequestHeader('X-SampleHeader',
     'Hallo Welt');
     },
     complete: function() {
     // Code zur Verarbeitung der Daten
     }
     });
     });
    });
})(jQuery);
    Nutzen wir alle diese Events für unsere Lösung, erhalten wir folgenden Code:
(function($) {
    $(document).ready(function() {
     $('#ajaxError')
     .ajaxError(function(evt, xhr, ajaxOptions, error) {
     $(this)
     .html( 'Fehler: ' + ( xhr ? xhr.status : '' )
     + ' ' + ( error ? error :'Unknown' ) )
     .show();
     })
     .ajaxSuccess(function() {
     $(this).hide();
     });

     $('#ajaxStatus')
     .ajaxStart(function() {
     $(this).show();
     })
     .ajaxSend(function() {
     $(this).html('Anfrage abschicken ...');
     })
     .ajaxStop(function() {
     $(this).html('Anfrage abgeschlossen ...');
     var t = this;
     setTimeout(function() {
     $(t).hide();
     }, 1500);
     });

     // Start der Ajax-Anfrage, wenn der Button doAjaxButton angeklickt wird
     $('#doAjaxButton').click(function() {
     $.ajax({
     url: 'ajax-gateway.php',
     complete: function() {
     // Code zur Verarbeitung der Daten
     }
     });
     });
    });
})(jQuery);

Ajax-Hilfsfunktionen und Datentypen
    Problem
    Sie müssen eine Ajax-GET-Anfrage an den