zurücksendet. Kommt diese an, wird die Anwort an den Inhalt des Absatzes
#response
angehängt.
$('#queued-requests').click(function() {
     $('#response').empty();
     $.each([1,2,3,4,5,6,7,8,9,10], function() {
     $.ajaxQueue({url: 'server.php',
     data: { data: this },
     success: function(data) { $('#response').append(data); }
     });
     });
     $.dequeue( $.ajaxQueue, "ajax" );
     return false;
     });
    Der Button »Gequeuete Anfragen« trägt jede Anfrage in eine Queue ein, indem er die Funktion
ajaxQueue()
aufruft.Intern wird die Funktion
ajax()
mit den angegebenen Optionen aufgerufen, wenn eine Anfrage aus der Queue geholt wird. Nachdem alle Anfragen eingetragen wurden, löst ein Aufruf von
dequeue()
mit der Funktion
ajaxQueue
als Parameter die erste Anfrage aus. Alle folgenden Anfragen werden anschließend abgearbeitet.
$('#synced-requests').click(function() {
     $('#response').empty();
     $.each([1,2,3,4,5,6,7,8,9,10], function() {
     $.ajaxSync({url: 'server.php',
     data: { data: this },
     success: function(data) { $('#response').append(data); }
     });
     });
     return false;
     });
    });
})(jQuery);
    Die letzte Gruppe von Anfragen nutzt die Funktion
ajaxSync()
, umdie Anfragen parallel abzuschicken. Die angegebenen Callbacks werden aber synchronisiert, wenn die Antworten wieder eintreffen.
    Diskussion
    Antworten von den nicht gequeueten Anfragen kommen in einer nicht vorhersagbaren Reihenfolge zurück. Dieses Verhalten muss nicht unbedingt unerwünscht sein – in vielen Fällen ist es sogar zu bevorzugen. Aber es gibt Szenarien, in denen man mehr Kontrolle über die Ajax-Anfragen und -Antworten haben möchte. Die von
ajaxQueue()
bereitgestellte Funktionalität ist dann sinnvoll, wenn jede Anfrage von der Antwort der vorherigen Anfrage abhängt, während
ajaxSync()
dafür genutzt werden kann, Daten zu verändern, die von verschiedenen Servern geholt werden müssen. Dabei kann mit der Verarbeitung erst begonnen werden, wenn alle Server eine Antwort geliefert haben und alle Daten vorhanden sind.

Ajax und der Zurück-Button
    Problem
    Belebt man Webseiten mit Hilfe von Ajax, erlebt der Anwender eine praktische und interaktive Oberfläche, die sich durch klassische HTTP-Anfragen nicht erzielen lässt. Änderungen am Inhalt des Browser-Fensters mit Ajax führen aber leider auch dazu, dass die Zurück- und Vorwärts-Buttons in Ihrem Browser nicht mehr sinnvoll zu gebrauchen sind. Zudem sind auch Lesezeichen nicht mehr so einfach (sinnvoll) anzulegen.
    Lösung
    Die Lösung für dieses Problem liegt darin, jede Ajax-Anfrage mit einer eindeutigen URL zu verbinden. Diese URL kann dann als Lesezeichen verwendet und von den Zurück- und Vorwärts-Buttons genutzt werden. Eine Methode dafür ist das Verwenden von Hash-Werten. Diese werden im Allgemeinen genutzt, um auf eine bestimmte Position in einem Dokument zu verweisen. http://de.wikipedia.org/wiki/Kulturapfel#Symbolik verweist zum Beispiel auf der Wikipedia-Seite zu (Kultur-)Äpfeln auf den Abschnitt über die Symbolik. In diesem Rezept wird sich der Hash-Wert auf Inhalte beziehen, die über eine Ajax-Anfrage geladen wurden.
    In unserem Fall ist das Beispiel-Projekt ein kleines Glossar. Es besteht aus drei Einträgen. Klicken Sie auf einen der Einträge, wird die Definition für das Wort per Ajax geladen und angezeigt. Der gesamte Inhalt könnte zugegebenermaßen problemlos auf einer einzelnen Seite angezeigt werden. Aber das gleiche Vorgehen lässt sich auch für größere, unterschiedlichere Daten nutzen, wie zum Beispiel den Inhalt von Registerkarten:


    
    
    



    

17.6 Ajax und der Zurück-Button

    Äpfel
    Orangen
    Bananen
    

    Die erforderlichen JavaScript-Dateien werden im Kopf des Dokuments eingebunden. Die Datei
jquery.history.js
enthält das jQuery-Plugin History(zu finden unter http://plugins.jquery.com/project/history ). Es gibt ein Anker-Element für jeden der drei Einträge im Glossar. Die Definition für Eintrag wird im Absatz angezeigt, deren
id
den Wert
definition
besitzt:
(function($) {
    function historyLoad(hash) {
     if(hash) { $('#definition').load('server.php',{word: hash}); }
     else { $('#definition').empty(); }
    }

    $(document).ready(function()