[Ajax in vier Tagen lernen] Am zweiten Tag des Ajax-Lernprogramms stellen JavaScript und Ajax asynchrone Anforderungen

Autor：Eve Cole Aktualisierungszeit：2009-07-06 16:37:17

Die meisten Webanwendungen verwenden ein Anforderungs-/Antwortmodell, um eine vollständige HTML-Seite vom Server abzurufen. Es ist oft ein sich wiederholender Vorgang, bei dem man auf eine Schaltfläche klickt, auf die Antwort des Servers wartet, dann auf eine andere Schaltfläche klickt und dann noch einmal wartet. Mit Ajax und dem XMLHttpRequest-Objekt können Sie ein Anforderungs-/Antwortmodell verwenden, bei dem der Benutzer nicht auf eine Antwort vom Server warten muss. In diesem Artikel erklärt Brett McLaughlin, wie man XMLHttpRequest-Instanzen erstellt, die sich an verschiedene Browser anpassen, Anfragen erstellen und senden und auf den Server antworten können.

Im vorherigen Artikel dieser Reihe (siehe Ressourcen für einen Link) haben wir Ajax-Anwendungen vorgestellt und die grundlegenden Konzepte untersucht, die Ajax-Anwendungen vorantreiben. Im Mittelpunkt stehen viele Technologien, die Sie wahrscheinlich bereits kennen: JavaScript, HTML und XHTML, ein bisschen dynamisches HTML und das DOM (Document Object Model). Dieser Artikel geht auf einen Punkt näher ein und konzentriert sich auf bestimmte Ajax-Details.

In diesem Artikel beginnen Sie, sich mit den grundlegendsten Objekten und Programmiermethoden im Zusammenhang mit Ajax vertraut zu machen: dem XMLHttpRequest-Objekt. Dieses Objekt ist eigentlich nur ein roter Faden, der sich über alle Ajax-Anwendungen erstreckt, und wie Sie vielleicht erwarten, müssen Sie dieses Objekt gründlich verstehen, um Ihr volles Programmierpotenzial auszuschöpfen. Tatsächlich werden Sie manchmal feststellen, dass Sie XMLHttpRequest offensichtlich nicht verwenden können, um XMLHttpRequest korrekt zu verwenden. Was ist los?

Web 2.0 auf einen Blick

Bevor wir uns mit dem Code befassen, werfen wir einen Blick auf aktuelle Perspektiven – es ist wichtig, sich über das Konzept von Web 2.0 im Klaren zu sein. Wenn Sie den Begriff Web 2.0 hören, sollten Sie sich zunächst fragen: „Was ist Web 1.0?“ Obwohl Web 1.0 selten erwähnt wird, bezieht es sich tatsächlich auf das traditionelle Web mit einem völlig anderen Anforderungs- und Antwortmodell. Gehen Sie beispielsweise auf die Website Amazon.com und klicken Sie auf eine Schaltfläche oder geben Sie einen Suchbegriff ein. Eine Anfrage wird an den Server gesendet und die Antwort wird an den Browser zurückgegeben. Bei der Anfrage handelt es sich nicht nur um eine Liste von Büchern und Titeln, sondern um eine weitere vollständige HTML-Seite. Daher kann es zu Flackern oder Zittern kommen, wenn der Webbrowser die Seite mit dem neuen HTML neu zeichnet. Tatsächlich sind die Anfragen und Antworten auf jeder neuen Seite, die Sie sehen, deutlich sichtbar.

Web 2.0 eliminiert diese sichtbare Hin- und Her-Interaktion (weitgehend). Besuchen Sie beispielsweise eine Website wie Google Maps oder Flickr (siehe Ressourcen für Links zu diesen Web 2.0- und Ajax-fähigen Websites). Auf Google Maps können Sie beispielsweise die Karte ziehen, um sie mit minimalem Neuzeichnen zu vergrößern und zu verkleinern. Natürlich gibt es weiterhin Anfragen und Antworten, diese bleiben jedoch im Verborgenen. Als Benutzer ist die Erfahrung komfortabler und ähnelt einer Desktop-Anwendung. Dieses neue Gefühl und Paradigma entsteht, wenn jemand Web 2.0 erwähnt.

Es geht darum, diese neuen Interaktionen zu ermöglichen. Natürlich müssen Sie weiterhin Anfragen stellen und Antworten erhalten, aber es ist die Neuzeichnung des HTML-Codes für jede Anfrage-/Antwort-Interaktion, die das Gefühl langsamer, umständlicher Web-Interaktionen erzeugt. Es ist also klar, dass wir eine Möglichkeit brauchen, Anfragen zu senden und Antworten zu empfangen, die nur die erforderlichen Daten und nicht die gesamte HTML-Seite enthalten. Sie benötigen die gesamte neue HTML-Seite nur dann, wenn Sie möchten, dass der Benutzer die neue Seite sieht.

Bei den meisten Interaktionen werden jedoch Details zu vorhandenen Seiten hinzugefügt, der Haupttext geändert oder Originaldaten überschrieben. In diesen Fällen ermöglichen Ajax- und Web 2.0-Methoden das Senden und Empfangen von Daten, ohne die gesamte HTML-Seite zu aktualisieren. Für diejenigen, die viel Zeit online verbringen, kann diese Funktion dazu führen, dass sich Ihre Anwendungen schneller und reaktionsfähiger anfühlen, sodass sie von Zeit zu Zeit auf Ihre Website zurückkehren.

Einführung in XMLHttpRequest

Um dieses wunderbare Wunder wirklich zu verwirklichen, müssen Sie mit einem JavaScript-Objekt, nämlich XMLHttpRequest, sehr vertraut sein. Dieses kleine Objekt gibt es tatsächlich schon seit einiger Zeit in mehreren Browsern und es ist das Herzstück von Web 2.0, Ajax und vielen anderen Dingen, die ich in den nächsten Monaten in dieser Kolumne behandeln werde. Um Ihnen einen schnellen Überblick zu geben, sind hier nur einige der Methoden und Eigenschaften aufgeführt, die für dieses Objekt verwendet werden.

·open(): Stellt eine neue Anfrage an den Server her.
·send(): Senden Sie eine Anfrage an den Server.
·abort(): Aktuelle Anfrage abbrechen.
·readyState: Stellt den Bereitschaftsstatus des aktuellen HTML bereit.
·responseText: Der vom Server zurückgegebene Anforderungsantworttext.

Machen Sie sich keine Sorgen, wenn Sie diese (oder einige davon) nicht kennen. Wir werden jede Methode und Eigenschaft in den nächsten Artikeln behandeln. Was Sie jetzt genau wissen sollten, ist, was mit XMLHttpRequest zu tun ist. Beachten Sie, dass sich diese Methoden und Eigenschaften auf das Senden von Anfragen und das Verarbeiten von Antworten beziehen. Wenn Sie sich tatsächlich alle Methoden und Eigenschaften von XMLHttpRequest ansehen, werden Sie feststellen, dass sie sich alle auf ein sehr einfaches Anforderungs-/Antwortmodell beziehen. Offensichtlich werden wir nicht auf ein besonders neues GUI-Objekt oder eine sehr obskure Art der Benutzerinteraktion stoßen, wir werden sehr einfache Anfragen und sehr einfache Antworten verwenden. Es hört sich vielleicht nicht nach viel an, aber die gute Verwendung dieses Objekts kann Ihre Anwendung revolutionieren.

Bei Simple New

muss zunächst eine neue Variable erstellt und ihr eine XMLHttpRequest-Objektinstanz zugewiesen werden. Dies ist so einfach wie die Verwendung des neuen Schlüsselworts für den Objektnamen in JavaScript, wie in Listing 1 gezeigt.

Listing 1. Erstellen eines neuen XMLHttpRequest-Objekts

Ist es nicht schwierig? Denken Sie daran, dass Sie für JavaScript keine Variablentypen angeben müssen, sodass Sie nicht das tun müssen, was Sie in Listing 2 tun (was Sie möglicherweise in der Java-Sprache tun würden).

Listing 2. Java-Pseudocode zum Erstellen einer XMLHttpRequestXMLHttpRequest

-Anfrage = new XMLHttpRequest();

Sie erstellen also in JavaScript eine Variable mit var, geben ihr einen Namen (z. B. „request“) und weisen ihr dann eine neue XMLHttpRequest-Instanz zu. Das Objekt kann dann in Funktionen verwendet werden.

Fehlerbehandlung

Tatsächlich kann alles Mögliche schief gehen, und der obige Code bietet keine Fehlerbehandlung. Ein besserer Ansatz besteht darin, das Objekt zu erstellen und es ordnungsgemäß zu beenden, wenn etwas schief geht. Beispielsweise unterstützen alle älteren Browser (ob Sie es glauben oder nicht, es gibt immer noch Leute, die ältere Versionen von Netscape Navigator verwenden) XMLHttpRequest nicht, und Sie müssen diese Benutzer wissen lassen, dass etwas nicht stimmt. Listing 3 zeigt, wie Sie dieses Objekt erstellen, um eine JavaScript-Warnung auszugeben, wenn ein Problem auftritt.

Listing 3. Erstellen einer XMLHttpRequest mit Fehlerbehandlungsfunktionen

if (!request)
alarm("Fehler beim Initialisieren von XMLHttpRequest!");
</script>

Stellen Sie sicher, dass Sie diese Schritte verstanden haben:

1. Erstellen Sie eine neue Variablenanforderung und weisen Sie ihr den Wert „false“ zu. Als Beurteilungsbedingung wird später False verwendet, was bedeutet, dass das XMLHttpRequest-Objekt noch nicht erstellt wurde.
2. Try/Catch-Block hinzufügen:
1) Versuchen Sie, ein XMLHttpRequest-Objekt zu erstellen.
2) Wenn dies fehlschlägt (catch (failed)), ist garantiert, dass der Wert der Anforderung immer noch falsch ist.
3. Überprüfen Sie, ob die Anfrage immer noch falsch ist (sie wird nicht falsch sein, wenn alles normal ist).
4. Wenn ein Problem auftritt (Anfrage ist falsch), verwenden Sie eine JavaScript-Warnung, um den Benutzer darüber zu informieren, dass ein Problem aufgetreten ist.

Der Code ist sehr einfach und für die meisten JavaScript- und Webentwickler wird es länger dauern, ihn wirklich zu verstehen, als den Code zu lesen und zu schreiben. Jetzt verfügen Sie über einen XMLHttpRequest-Objekterstellungscode, der auf Fehler überprüft wird und Ihnen sagen kann, was schief gelaufen ist.

Bei Microsoft

scheint alles in Ordnung zu sein

, zumindest bis man den Code mit dem Internet Explorer ausprobiert. Wenn Sie auf diese Weise experimentieren, werden Sie die in Abbildung 1 dargestellte schlechte Situation sehen.

Abbildung 1. Internet Explorer-Meldefehler

Offensichtlich stimmt etwas nicht, und Internet Explorer ist kaum ein veralteter Browser, da er von 70 % der Welt verwendet wird. Mit anderen Worten: Wenn Sie Microsoft und Internet Explorer nicht unterstützen, werden Sie in der Web-Welt nicht beliebt sein! Daher müssen wir bei Microsoft-Browsern einen anderen Ansatz verfolgen.

Es wurde bestätigt, dass Microsoft Ajax unterstützt, die XMLHttpRequest-Version hat jedoch einen anderen Namen. Tatsächlich nennt es mehrere verschiedene Dinge. Wenn Sie neuere Versionen von Internet Explorer verwenden, müssen Sie das Objekt Msxml2.XMLHTTP verwenden, während ältere Versionen von Internet Explorer Microsoft.XMLHTTP verwenden. Wir müssen beide Objekttypen (sowie Nicht-Microsoft-Browser) unterstützen. Schauen Sie sich Listing 4 an, das auf dem vorherigen Code aufbaut und Unterstützung für Microsoft hinzufügt.

Ist Microsoft beteiligt?

Es wurde viel über das wachsende Interesse und Engagement von Ajax und Microsoft in diesem Bereich geschrieben. Tatsächlich heißt es, dass Microsofts neueste Version des Internet Explorers – Version 7.0, die in der zweiten Jahreshälfte 2006 erscheinen soll – XMLHttpRequest direkt unterstützen wird, sodass Sie das neue Schlüsselwort anstelle des gesamten Msxml2.XMLHTTP-Erstellungscodes verwenden können. Aber seien Sie nicht zu aufgeregt, ältere Browser müssen weiterhin unterstützt werden, sodass browserübergreifender Code nicht so schnell verschwinden wird.

Listing 4. Unterstützung für Microsoft-Browser hinzufügen

if (!request)
alarm("Fehler beim Initialisieren von XMLHttpRequest!");
</script>

Durch diese geschweiften Klammern kann man leicht verwirrt werden, daher werden die einzelnen Schritte im Folgenden vorgestellt:

1. Erstellen Sie eine neue Variablenanforderung und weisen Sie ihr den Wert „false“ zu. Verwenden Sie „false“ als Beurteilungsbedingung, was bedeutet, dass das XMLHttpRequest-Objekt noch nicht erstellt wurde.
2. Try/Catch-Block hinzufügen:
1) Versuchen Sie, ein XMLHttpRequest-Objekt zu erstellen.
2) Wenn es fehlschlägt (catch (trymicrosoft)):
1>Versuchen Sie, eine neuere Version des Microsoft-Browsers zu verwenden, um ein Microsoft-kompatibles Objekt (Msxml2.XMLHTTP) zu erstellen.
2> Wenn dies fehlschlägt (catch (othermicrosoft)), versuchen Sie, ein Microsoft-kompatibles Objekt (Microsoft.XMLHTTP) mit einer älteren Version des Microsoft-Browsers zu erstellen.
2) Wenn dies fehlschlägt (catch (failed)), ist garantiert, dass der Wert der Anforderung immer noch falsch ist.
3. Überprüfen Sie, ob die Anfrage immer noch falsch ist (sie wird nicht falsch sein, wenn alles gut geht).
4. Wenn ein Problem auftritt (Anfrage ist falsch), verwenden Sie eine JavaScript-Warnung, um den Benutzer darüber zu informieren, dass ein Problem aufgetreten ist.

Nachdem Sie den Code auf diese Weise geändert und mit dem Internet Explorer getestet haben, sollten Sie das erstellte Formular sehen (ohne Fehlermeldung). Die Ergebnisse meines Experiments sind in Abbildung 2 dargestellt.

Abbildung 2. Internet Explorer funktioniert normal

Statisch vs. dynamisch

Schauen Sie sich die Listings 1, 3 und 4 noch einmal an. Beachten Sie, dass der gesamte Code direkt im Skript-Tag verschachtelt ist. JavaScript-Code wie dieser, der nicht in einem Methoden- oder Funktionskörper platziert ist, wird als statisches JavaScript bezeichnet. Das bedeutet, dass der Code irgendwann ausgeführt wird, bevor die Seite dem Benutzer angezeigt wird. (Obwohl die Spezifikation nicht mit absoluter Genauigkeit weiß, welche Auswirkungen dieser Code auf den Browser haben wird, wenn er ausgeführt wird, wird garantiert, dass er ausgeführt wird, bevor der Benutzer mit der Seite interagieren kann.) Dies ist auch die allgemeinste Vorgehensweise Ajax-Programmierer erstellen XMLHttpRequest-Objekte.

Allerdings könnten Sie diesen Code auch in eine Methode wie Listing 5 einfügen.

Listing 5. Verschieben des XMLHttpRequest-Erstellungscodes in eine Methode

var request

;
versuchen {
request = new XMLHttpRequest();
} Catch (trymicrosoft) {
versuchen {
request = new ActiveXObject("Msxml2.XMLHTTP");
} Catch (othermicrosoft) {
versuchen {
request = new ActiveXObject("Microsoft.XMLHTTP");
} Fang (fehlgeschlagen) {
Anfrage = falsch;
}
}
}

if (!request)
alarm("Fehler beim Initialisieren von XMLHttpRequest!");
}
</script>

Wenn Sie Ihren Code auf diese Weise schreiben, müssen Sie diese Methode aufrufen, bevor Sie Ajax verarbeiten. Daher wird auch Code wie Listing 6 benötigt.

Listing 6. Methode mit XMLHttpRequest erstellen

var request

if (!request)
alarm("Fehler beim Initialisieren von XMLHttpRequest!");
}

Funktion getCustomerInfo() {
createRequest();
// Etwas mit der Anfragevariablen machen
}
</script>

Das einzige Problem dieses Codes besteht darin, dass er die Fehlerbenachrichtigung verzögert, weshalb die meisten Ajax-Programmierer diesen Ansatz nicht verwenden. Angenommen, Sie haben ein komplexes Formular mit 10 oder 15 Feldern, Auswahlfeldern usw. und möchten einen Ajax-Code aktivieren, wenn der Benutzer Text in das 14. Feld eingibt (von oben nach unten in der Reihenfolge des Formulars). Zu diesem Zeitpunkt versucht die Ausführung von getCustomerInfo(), ein XMLHttpRequest-Objekt zu erstellen, schlägt jedoch (in diesem Fall) fehl. Dem Benutzer wird dann eine Warnung angezeigt, die ihn deutlich darauf hinweist, dass er die App nicht verwenden kann. Aber Benutzer verbringen bereits viel Zeit damit, Daten in Formulare einzugeben! Das ist sehr nervig, und es wird die Benutzer offensichtlich nicht dazu verleiten, auf Ihre Website zurückzukehren.

Wenn Sie statisches JavaScript verwenden, werden Benutzern sehr schnell Fehlermeldungen angezeigt, wenn sie auf die Seite klicken. Das ist doch auch nervig, oder? Der Benutzer könnte fälschlicherweise glauben, dass Ihre Webanwendung nicht in seinem Browser ausgeführt werden kann. Aber es ist auf jeden Fall besser, als dass sie 10 Minuten damit verbringen, Informationen einzugeben, nur um später den gleichen Fehler zu sehen. Daher empfehle ich, statischen Code zu schreiben, damit Benutzer Probleme so früh wie möglich erkennen können.

Nachdem

Sie eine Anfrage mit XMLHttpRequest gesendet

und das Anfrageobjekt erhalten haben, können Sie in den Anfrage-/Antwortzyklus eintreten. Denken Sie daran, dass der einzige Zweck von XMLHttpRequest darin besteht, Ihnen das Senden von Anfragen und den Empfang von Antworten zu ermöglichen. Alles andere ist die Aufgabe von JavaScript, CSS oder anderem Code auf der Seite: das Ändern der Benutzeroberfläche, das Wechseln von Bildern, das Interpretieren der vom Server zurückgegebenen Daten. Nachdem Sie den XMLHttpRequest vorbereitet haben, können Sie die Anfrage an den Server senden.

Willkommen bei Sandbox

Ajax verwendet ein Sandbox-Sicherheitsmodell. Daher kann Ajax-Code (insbesondere das XMLHttpRequest-Objekt) Anforderungen nur an dieselbe Domäne senden, in der er sich befindet. Wir werden uns in einem zukünftigen Artikel ausführlicher mit Sicherheit und Ajax befassen, wissen aber vorerst nur, dass Code, der auf dem lokalen Computer ausgeführt wird, nur Anfragen an serverseitige Skripts auf dem lokalen Computer stellen kann. Wenn Sie möchten, dass der Ajax-Code auf www.breakneckpizza.com ausgeführt wird, muss die Anfrage von einem Skript gesendet werden, das in www.breakneckpizza.com ausgeführt wird.

Um die Server-URL festzulegen,

müssen Sie zunächst die URL des verbundenen Servers ermitteln. Dies ist keine besondere Anforderung für Ajax, aber es ist trotzdem notwendig, die Verbindung herzustellen, und jetzt sollten Sie natürlich wissen, wie man eine URL erstellt. In den meisten Anwendungen wird diese URL aus einer Kombination einiger statischer Daten und Daten aus einem Formular erstellt, das der Benutzer verarbeitet. Beispielsweise ruft der JavaScript-Code in Listing 7 den Wert des Telefonnummernfelds ab und erstellt daraus eine URL.

Listing 7. Erstellen der Anforderungs-URL

if (!request)
warning("Fehler beim Initialisieren von XMLHttpRequest!");

function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
}
</script>

Hier ist nichts schwer zu verstehen. Zunächst erstellt der Code eine neue Variable phone und weist ihr den Wert des Formularfelds mit der ID „phone“ zu. Listing 8 zeigt das XHTML für dieses Formular, in dem Sie das Telefonfeld und sein ID-Attribut sehen können.

Listing 8. Break-Neck-Pizza aus

<body>
<p><img src="breakneck-logo_4c.gif" alt="Break Neck Pizza" /></p>
<form action="POST">
<p>Geben Sie Ihre Telefonnummer ein:
<input type="text" size="14" name="phone" id="phone"
onChange="getCustomerInfo();" />
</p>
<p>Ihre Bestellung wird geliefert</p>
<div id="address"></div>
<p>Geben Sie hier Ihre Bestellung ein:</p>
<p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>
<p><input type="submit" value="Pizza bestellen" id="submit" /></p>
</form>
</body>

Beachten Sie außerdem, dass die in Listing 8 gezeigte getCustomerInfo()-Methode ausgelöst wird, wenn der Benutzer eine Telefonnummer eingibt oder die Telefonnummer ändert. Diese Methode ruft die Telefonnummer ab und erstellt eine URL-Zeichenfolge, die in der URL-Variablen gespeichert wird. Denken Sie daran: Da der Ajax-Code in einer Sandbox gespeichert ist und nur eine Verbindung mit derselben Domäne herstellen kann, ist in der URL eigentlich kein Domänenname erforderlich. Das Skript in diesem Beispiel heißt /cgi-local/lookupCustomer.php. Abschließend wird die Telefonnummer als GET-Parameter an das Skript angehängt: „phone=" + escape(phone).

Wenn Sie die Methode escape() noch nicht gesehen haben, wird sie verwendet, um alle Zeichen zu maskieren, die nicht korrekt im Klartext gesendet werden können. Beispielsweise werden Leerzeichen in Telefonnummern in die Zeichen %20 umgewandelt, sodass diese Zeichen in der URL übergeben werden können.

Sie können beliebig viele Parameter hinzufügen. Wenn Sie beispielsweise einen weiteren Parameter hinzufügen müssen, hängen Sie ihn einfach an die URL an und trennen Sie ihn durch das kaufmännische Und-Zeichen (&) [der erste Parameter wird durch ein Fragezeichen (?) vom Skriptnamen getrennt].

Öffnen Sie die Anfrage.

Sobald Sie die URL für die Verbindung haben, können Sie die Anfrage konfigurieren. Dies kann mit der open()-Methode des XMLHttpRequest-Objekts erreicht werden. Diese Methode hat fünf Parameter:

request-type: der Typ der zu sendenden Anfrage. Typische Werte sind GET oder POST, es kann aber auch eine HEAD-Anfrage gesendet werden.
URL: Die URL, zu der eine Verbindung hergestellt werden soll.
asynch: true, wenn Sie eine asynchrone Verbindung verwenden möchten, andernfalls false. Dieser Parameter ist optional und hat standardmäßig den Wert „true“.
Benutzername: Wenn eine Authentifizierung erforderlich ist, können Sie hier den Benutzernamen angeben. Dieser optionale Parameter hat keinen Standardwert. Passwort: Wenn eine Authentifizierung erforderlich ist, können Sie hier ein Passwort festlegen. Dieser optionale Parameter hat keinen Standardwert.

Öffnet open()?
Internetentwickler sind sich nicht einig darüber, was genau die open()-Methode bewirkt. Es wird jedoch keine Anfrage geöffnet. Wenn Sie das Netzwerk und die Datenübertragung zwischen einer XHTML/Ajax-Seite und ihrem Verbindungsskript überwachen, werden Sie beim Aufruf der open()-Methode keine Kommunikation feststellen. Es ist unklar, warum dieser Name gewählt wurde, aber es ist eindeutig keine gute Wahl.

Normalerweise werden die ersten drei Parameter verwendet. Selbst wenn eine asynchrone Verbindung erforderlich ist, sollte der dritte Parameter als „true“ angegeben werden. Dies ist die Standardeinstellung, aber es ist leichter zu verstehen, darauf zu bestehen, explizit anzugeben, ob die Anfrage asynchron oder synchron ist.

Die Kombination dieser Elemente führt normalerweise zu einer Codezeile wie der in Listing 9 gezeigten.

Listing 9.

Anfragefunktion getCustomerInfo() {

öffnen

var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
}

Sobald Sie die URL eingerichtet haben, ist der Rest einfach. Für die meisten Anfragen reicht GET (Sie werden in einem späteren Artikel sehen, wann POST erforderlich ist) plus die URL, und das ist alles, was Sie brauchen, um die open()-Methode zu verwenden.

Asynchronität herausfordern

Im nächsten Artikel dieser Reihe werde ich viel Zeit damit verbringen, asynchronen Code zu schreiben und zu verwenden, aber Sie sollten verstehen, warum der letzte Parameter von open() so wichtig ist. In einem allgemeinen Anforderungs-/Antwortmodell wie Web 1.0 stellt der Client (ein Browser oder Code, der auf dem lokalen Computer ausgeführt wird) eine Anfrage an den Server. Die Anfrage ist synchron, das heißt, der Client wartet auf eine Antwort vom Server. Wenn der Client wartet, werden Sie zumindest in irgendeiner Form über die Wartezeit informiert:

·Sanduhr (insbesondere unter Windows).
·Spinning Ball (normalerweise auf Mac-Maschinen).
·Die Anwendung friert grundsätzlich ein und nach einer Weile ändert sich der Cursor.

Genau aus diesem Grund fühlen sich Webanwendungen klobig oder langsam an – ein Mangel an echter Interaktivität. Wenn die Schaltfläche gedrückt wird, wird die Anwendung praktisch unbrauchbar, bis auf die gerade ausgelöste Anfrage reagiert wird. Wenn die Anfrage viel Serververarbeitung erfordert, kann die Wartezeit lang sein (zumindest in dieser Welt mit mehreren Prozessoren und DSL, in der es keine Wartezeiten gibt).

Asynchrone Anfragen warten nicht auf eine Antwort vom Server. Die Anwendung läuft nach dem Absenden der Anfrage weiter. Benutzer können weiterhin Daten in das Webformular eingeben oder sogar vom Formular weg navigieren. Es gibt keine rotierenden Kugeln oder Sanduhren und die App friert nicht merklich ein. Der Server antwortet stillschweigend auf die Anfrage und teilt dem ursprünglichen Anforderer nach Abschluss mit, dass die Aufgabe abgeschlossen ist (Sie werden sehen, wie bald). Das Ergebnis ist eine App, die sich weniger verzögert oder träge anfühlt und reaktionsschneller, interaktiver und viel schneller wirkt. Dies ist nur ein Teil von Web 2.0, aber es ist ein wichtiger Teil. Alle alten GUI-Komponenten und Webdesign-Paradigmen können das langsame, synchrone Anforderungs-/Antwortmodell nicht überwinden.

Senden von Anfragen

Nach der Konfiguration mit open() können Sie Anfragen senden. Glücklicherweise hat die Methode zum Senden von Anfragen einen passenderen Namen als open(): Sie lautet send().

send() hat nur einen Parameter, nämlich den zu sendenden Inhalt. Aber bevor Sie diese Methode in Betracht ziehen, denken Sie daran, dass Sie bereits Daten über die URL selbst gesendet haben:

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

Sie können jedoch send() verwenden, um Daten zu senden Es ist aber auch möglich, Daten über die URL selbst zu versenden. Tatsächlich ist es bei GET-Anfragen (die in etwa 80 % der typischen Ajax-Anwendungen auftreten) viel einfacher, Daten über eine URL zu senden. Wenn Sie sichere Informationen oder XML senden müssen, sollten Sie die Verwendung von send() zum Senden des Inhalts in Betracht ziehen (sichere Daten und XML-Nachrichten werden in den folgenden Artikeln dieser Reihe besprochen). Wenn Sie keine Daten über send() übergeben müssen, übergeben Sie einfach null als Parameter dieser Methode. Sie werden also feststellen, dass dies alles ist, was Sie in den Beispielen in diesem Artikel tun müssen (siehe Listing 10).

Listing 10.

Anforderungsfunktion getCustomerInfo() {

senden

var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.send(null);
}

Geben Sie die Rückrufmethode an.

Es gibt sehr wenig an dem, was wir jetzt tun, was neu, revolutionär oder asynchron ist. Es muss zugegeben werden, dass das kleine Schlüsselwort „true“ in der open()-Methode eine asynchrone Anfrage erstellt. Aber ansonsten unterscheidet sich der Code nicht von der Programmierung mit Java-Servlets und JSP, PHP oder Perl. Was ist also das größte Geheimnis von Ajax und Web 2.0? Das Geheimnis liegt in einer einfachen Eigenschaft onreadystatechange von XMLHttpRequest.

Stellen Sie sicher, dass Sie zunächst den Ablauf in diesem Code verstehen (sehen Sie sich ggf. Listing 10 an). Erstellen Sie seine Anfrage und stellen Sie dann die Anfrage. Da die Anfrage außerdem asynchron ist, wartet die JavaScript-Methode (im Beispiel getCustomerInfo()) nicht auf den Server. Der Code wird also weiterhin ausgeführt, das heißt, die Methode wird beendet und die Kontrolle wird an das Formular zurückgegeben. Der Benutzer kann weiterhin Informationen eingeben und die Anwendung wartet nicht auf den Server.

Dies wirft eine interessante Frage auf: Was passiert, nachdem der Server die Anfrage abgeschlossen hat? Die Antwort ist, dass zumindest beim aktuellen Code nichts passiert! Offensichtlich wird dies nicht funktionieren, daher benötigt der Server Anweisungen, was zu tun ist, nachdem er die über XMLHttpRequest an ihn gesendete Anfrage verarbeitet hat.

Referenzfunktionen in JavaScript:
JavaScript ist eine schwach typisierte Sprache und Sie können Variablen verwenden, um auf alles zu verweisen. Wenn Sie also eine Funktion updatePage() deklarieren, behandelt JavaScript auch den Funktionsnamen als Variable. Mit anderen Worten: Sie können die Funktion in Ihrem Code mithilfe des Variablennamens updatePage referenzieren.

Listing 11. Callback-Methodenfunktion festlegen

getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}

Es ist wichtig zu beachten, wo im Code diese Eigenschaft festgelegt ist – sie wird festgelegt, bevor send() aufgerufen wird. Diese Eigenschaft muss vor dem Senden der Anfrage festgelegt werden, damit der Server sie nach Beantwortung der abgeschlossenen Anfrage sehen kann. Jetzt müssen Sie nur noch die updatePage()-Methode schreiben, die im letzten Abschnitt dieses Artikels im Mittelpunkt steht.

Der verarbeitende Server antwortet

auf die Anfrage, der Benutzer verwendet gerne das Webformular (während der Server die Anfrage verarbeitet) und nun hat der Server die Verarbeitung der Anfrage abgeschlossen. Der Server prüft das Attribut onreadystatechange, um zu bestimmen, welche Methode aufgerufen werden soll. Ansonsten behandeln Sie Ihre Anwendung wie jede andere Anwendung, ob asynchron oder nicht. Mit anderen Worten: Sie müssen nicht unbedingt besondere Maßnahmen ergreifen, um eine Methode zu schreiben, die auf den Server antwortet. Sie müssen lediglich das Formular ändern, den Benutzer eine andere URL besuchen lassen oder alles tun, was der Antwortserver benötigt. In diesem Abschnitt konzentrieren wir uns auf Antworten auf den Server und eine typische Aktion – die sofortige Änderung eines Teils des Formulars, das der Benutzer sieht.

Rückrufe und Ajax

Jetzt haben wir gesehen, wie man dem Server mitteilt, was er tun soll, wenn es fertig ist: Setzen Sie die onreadystatechange-Eigenschaft des XMLHttpRequest-Objekts auf den Namen der auszuführenden Funktion. Auf diese Weise wird die Funktion automatisch aufgerufen, nachdem der Server die Anfrage verarbeitet hat. Sie müssen sich auch keine Gedanken über irgendwelche Parameter der Funktion machen. Wir beginnen mit einer einfachen Methode, die in Listing 12 gezeigt wird.

Listing 12. Code für die Callback-Methode

if (!request)
warning("Fehler beim Initialisieren von XMLHttpRequest!");

function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}

Funktion updatePage() {
alarm("Server ist fertig!");
}
</script>

Es werden lediglich einige einfache Warnungen ausgegeben, um Sie darüber zu informieren, wenn der Server seine Aufgabe abgeschlossen hat. Probieren Sie diesen Code auf Ihrer eigenen Webseite aus und öffnen Sie ihn in einem Browser (siehe Listing 8, wenn Sie das XHTML in diesem Beispiel sehen möchten). Geben Sie die Telefonnummer ein und verlassen Sie das Feld. Sie sehen ein Popup-Warnfenster (wie in Abbildung 3 dargestellt). Klicken Sie jedoch auf „OK“ und es wird erneut angezeigt ...

Abbildung 3. Ajax-Code für die Popup-Warnung

Je nach Browser werden möglicherweise zwei, drei oder sogar vier Warnungen angezeigt, bevor das Formular nicht mehr angezeigt wird. Was ist los? Es stellt sich heraus, dass wir den HTTP-Bereitschaftsstatus nicht berücksichtigt haben, der ein wichtiger Teil des Anfrage-/Antwortzyklus ist.

HTTP-Bereitschaftsstatus

Wie bereits erwähnt, sucht der Server nach Abschluss der Anforderung im Attribut onreadystatechange von XMLHttpRequest nach der aufzurufenden Methode. Das ist wahr, aber unvollständig. Tatsächlich wird diese Methode jedes Mal aufgerufen, wenn sich der HTTP-Bereitschaftsstatus ändert. Was bedeutet das? Zuerst müssen Sie den HTTP-Bereitschaftsstatus verstehen.

Der HTTP-Bereitschaftsstatus stellt den Status oder Zustand der Anfrage dar. Es wird verwendet, um festzustellen, ob die Anfrage gestartet wurde, eine Antwort erhalten hat oder das Anfrage-/Antwortmodell abgeschlossen wurde. Es kann auch dabei helfen, festzustellen, ob der Antworttext oder die vom Server bereitgestellten Daten sicher gelesen werden können. In Ajax-Anwendungen sind fünf Bereitschaftszustände zu beachten:

·0: Die Anforderung wurde nicht ausgegeben (bevor open() aufgerufen wird).
·1: Die Anfrage wurde eingerichtet, aber noch nicht gesendet (bevor send() aufgerufen wird).
·2: Die Anfrage wurde gesendet und wird verarbeitet (der Inhaltsheader kann normalerweise aus der Antwort entnommen werden).
·3: Die Anfrage wurde verarbeitet und einige Daten sind normalerweise in der Antwort verfügbar, aber der Server hat die Antwort noch nicht abgeschlossen.
·4: Die Antwort ist vollständig und Sie können auf die Serverantwort zugreifen und diese verwenden.

Wie bei den meisten browserübergreifenden Problemen werden diese Bereitschaftszustände nicht konsistent verwendet. Sie könnten erwarten, dass der Aufgabenbereitschaftsstatus von 0 auf 1, auf 2, auf 3 und auf 4 wechselt, aber das ist selten der Fall. Manche Browser melden nie 0 oder 1, sondern beginnen direkt mit 2, dann 3 und 4. Andere Browser melden alle Status. Andere melden mehrmals den Bereitschaftsstatus 1. Wie im vorherigen Abschnitt gesehen, ruft der Server updatePage() mehrmals auf und bei jedem Aufruf wird eine Warnmeldung angezeigt – es kann anders sein als erwartet!

Für die Ajax-Programmierung ist der einzige Zustand, der direkt behandelt werden muss, der Bereitschaftszustand 4, der angibt, dass die Serverantwort vollständig ist und die Antwortdaten sicher verwendet werden können. Auf dieser Grundlage sollte die erste Zeile in der Callback-Methode wie Listing 13 aussehen.

Listing 13. Bereitschaftsfunktion prüfen

updatePage() {
if (request. readyState == 4)
alarm("Server ist fertig!");
}

Nach der Änderung können Sie sicherstellen, dass die Verarbeitung durch den Server abgeschlossen ist. Versuchen Sie, die neue Version des Ajax-Codes auszuführen, und die Warnmeldung wird jetzt erwartungsgemäß nur einmal angezeigt.

HTTP-Statuscodes

Obwohl der Code in Listing 13 in Ordnung zu sein scheint, gibt es ein Problem: Was passiert, wenn der Server auf die Anfrage antwortet und die Verarbeitung abschließt, aber einen Fehler meldet? Beachten Sie, dass serverseitiger Code verstehen sollte, dass er von Ajax, JSP, einfachen HTML-Formularen oder anderen Codetypen aufgerufen wird, Informationen jedoch nur mit herkömmlichen webspezifischen Methoden melden kann. In der Webwelt kann HTTP-Code verschiedene Probleme bewältigen, die bei der Anfrage auftreten können.

Beispielsweise müssen Sie schon einmal auf die Situation gestoßen sein, dass Sie eine falsche URL-Anfrage eingegeben und den Fehlercode 404 erhalten haben, was bedeutet, dass die Seite nicht existiert. Dies ist nur einer von vielen Fehlercodes, die mit einer HTTP-Anfrage empfangen werden können (eine vollständige Liste der Statuscodes finden Sie unter dem Link in „Ressourcen“). 403 und 401, die darauf hinweisen, dass die Daten, auf die zugegriffen wird, geschützt oder verboten sind, sind ebenfalls üblich. In beiden Fällen werden diese Fehlercodes aus der abgeschlossenen Antwort ermittelt. Mit anderen Worten: Der Server hat die Anforderung erfüllt (d. h. der HTTP-Bereitschaftsstatus ist 4), hat aber nicht die vom Client erwarteten Daten zurückgegeben.

Daher müssen Sie neben dem Bereitschaftsstatus auch den HTTP-Status überprüfen. Der erwartete Statuscode ist 200, was bedeutet, dass alles gut gelaufen ist. Wenn der Bereitschaftsstatus 4 und der Statuscode 200 ist, können Sie die Daten des Servers verarbeiten, und die Daten sollten die angeforderten Daten sein (und keine Fehler oder andere problematische Informationen). Daher müssen wir auch eine Statusprüfung in der Callback-Methode hinzufügen, wie in Listing 14 gezeigt.

Listing 14. Überprüfen Sie die HTTP-Statuscodefunktion

updatePage() {
if (request. readyState == 4)
if (request.status == 200)
alarm("Server ist fertig!");
}

Um eine robustere Fehlerbehandlung hinzuzufügen und zu versuchen, Überkomplikationen zu vermeiden, indem Sie eine oder zwei Statuscodeprüfungen hinzufügen, werfen Sie einen Blick auf die modifizierte Version von updatePage() in Listing 15.

Listing 15. Fügen Sie eine kleine Fehlerprüffunktion

updatePage() {

hinzu

if (request. readyState == 4)
if (request.status == 200)
alarm("Server ist fertig!");
sonst wenn (request.status == 404)
alarm("Anfrage-URL existiert nicht");
anders
Alert("Fehler: Statuscode ist " + request.status);
}

Ändern Sie nun die URL in getCustomerInfo() in eine nicht vorhandene URL und sehen Sie, was passiert. Sie sollten eine Warnmeldung sehen, die besagt, dass die angeforderte URL nicht existiert – großartig! Es ist schwierig, alle Fehlerbedingungen zu bewältigen, aber diese kleine Änderung kann 80% der Probleme in einer typischen Webanwendung abdecken.

Das Lesen des Antworttextes

stellt nun sicher, dass die Anforderung (über den Ready -Status) verarbeitet wurde, der Server eine normale Antwort (über den Statuscode) gab, und schließlich können wir die vom Server zurückgegebenen Daten verarbeiten. Die zurückgegebenen Daten werden in der Responsext -Eigenschaft des XMLHTTPrequest -Objekts gespeichert.

Der Inhalt des Textes in Responsext, wie z. B. Format und Länge, ist absichtlich vage gelassen. Auf diese Weise kann der Server den Text auf alles einstellen. Beispielsweise kann ein Skript von Kommas getrennte Werte zurückgeben, ein anderes verwendet ein Rohr (das | Zeichen), um Werte zu trennen, und ein anderes gibt eine lange Textzeichenfolge zurück. Es liegt an dem Server, zu entscheiden, wohin Sie gehen sollen.

In dem in diesem Artikel verwendeten Beispiel gibt der Server die letzte Bestellung und Kundenadresse des Kunden zurück, die durch ein Rohrcharakter getrennt ist. Die Reihenfolge und die Adresse werden dann verwendet, um Elementwerte im Formular festzulegen.

Listing 16. Handling Server

-Antwortfunktion updatePage () {
if (Request.ReadyState == 4) {
if (request.status == 200) {
var response = request.responseText.split ("|");
document.getElementById ("order"). value = response [0];
document.getElementById ("Adresse"). Innerhtml =
Antwort [1] .Replace (/ n/g, "");
} anders
alert ("Status is" + request.status);
}
}

Erstigen Sie sich zuerst den Responsext und teilen Sie es mithilfe der JavaScript -Methode von JavaScript split () auf. Das resultierende Array wird als Antwort platziert. Der erste Wert im Array - der vorherigen Reihenfolge - wird mit der Antwort [0] zugegriffen und auf den Wert des Feldes mit der ID "Order" eingestellt. Die zweite Wertantwort [1], die Kundenadresse, erfordert etwas mehr Verarbeitung. Da die Zeilen in der Adresse durch normale Zeilenabschlüsse (" n" Zeichen getrennt sind, muss der Code stattdessen Zeilenabscheider im XHTML-Stil verwenden. Der Ersatzprozess ersetzt die Funktion ersetzen () und reguläre Ausdrücke. Schließlich wird der modifizierte Text als inneres HTML in der HTML -Form Div verwendet. Das Ergebnis ist, dass das Formular plötzlich mit den Kundeninformationen aktualisiert wird, wie in Abbildung 4 gezeigt.

Abbildung 4. Nackenform brechen, nachdem Sie Kundendaten erhalten haben

Bevor ich diesen Artikel beende, möchte ich ein weiteres wichtiges Attribut von XMLHTTPrequest, Responsexml, einführen. Diese Eigenschaft enthält (wie Sie vielleicht vermutet haben) die XML -Antwort, wenn der Server eine XML -Antwort verwendet. Die Verarbeitung von XML -Antworten unterscheidet sich stark von der Verarbeitung normaler Text, der Analyse, des Dokumentobjektmodells (DOM) und anderen Problemen. XML wird in einem späteren Artikel weiter abgedeckt. Da ResponsexML normalerweise zusammen mit Responsext diskutiert wird, verdient dies hier eine Erwähnung. Für viele einfache AJAX -Anwendungen wird ResponTeText ausreichen, aber Sie werden bald sehen, dass XML auch mit AJAX -Anwendungen gut behandelt werden kann.

Schlussfolgerung

Sie sind vielleicht ein wenig müde von xmlHttprequest. Sie werden dieses Objekt jedoch immer wieder auf jeder Seite und Anwendung verwenden, die Sie mit AJAX schreiben. Ehrlich gesagt gibt es für XMLHTTPrequest etwas zu sagen. In dem nächsten Artikel wird vorgestellt, wie Sie Post verwenden und Anfragen zum Einstellen von Inhaltsüberschreitungen in Anfragen und Lesen von Inhaltsheadern aus Serverantworten erhalten und verstehen, wie Sie Anforderungen und Verarbeitung von XML im Anforderungs-/Antwortmodell codieren.

Später werden wir gemeinsame AJAX -Toolboxen einführen. Diese Toolboxen verbergen tatsächlich viele der in diesem Artikel beschriebenen Details, wodurch die AJAX -Programmierung erleichtert wird. Sie fragen sich vielleicht, warum Sie die Details auf niedriger Ebene codieren müssen, wenn es so viele Toolboxen gibt. Die Antwort ist, dass es schwierig ist, Probleme in einer Anwendung zu erkennen, ohne zu wissen, was die Anwendung tut.

Ignorieren Sie also nicht die Details oder stöbern Sie einfach und wenn mit dieser praktischen und wunderschönen Toolbox etwas schief geht, müssen Sie sich nicht am Kopf kratzen oder eine E -Mail an die Unterstützung senden. Wenn Sie verstehen, wie Sie XMLHTTPrequest direkt verwenden, finden Sie es einfach, die seltsamsten Probleme zu debuggen und zu lösen. Eine Toolbox ist nur gut, wenn Sie Ihre Probleme lösen lassen.

Bitte machen Sie sich mit XMLHTTPREquest vertraut. Wenn Sie AJAX -Code haben, der die Toolbox verwendet, schreiben Sie ihn mithilfe des XMLHTTPrequest -Objekts und seiner Eigenschaften und Methoden neu. Dies ist eine gute Übung, um die Prinzipien besser zu verstehen.

Im nächsten Artikel werden dieses Objekt weiter erläutert und einige seiner interessanteren Eigenschaften (z. B. Responsexml) untersucht und die Verwendung von Postanforderungen und Senden von Daten in verschiedenen Formaten verwendet. Bitte beginnen Sie mit dem Schreiben von Code und wir werden ihn in einem Monat erneut besprechen.