Ajax besteht aus HTML, JavaScript™-Technologie, DHTML und DOM und ist eine hervorragende Möglichkeit, umständliche Webschnittstellen in interaktive Ajax-Anwendungen umzuwandeln. Dieser von einem Ajax-Experten verfasste Artikel zeigt, wie diese Technologien zusammenarbeiten – von einem allgemeinen Überblick bis zu einer detaillierten Diskussion –, um eine effiziente Webentwicklung Wirklichkeit werden zu lassen. Er entmystifiziert auch die Kernkonzepte von Ajax, einschließlich des XMLHttpRequest-Objekts.
Wenn Sie vor fünf Jahren XML nicht kannten, waren Sie ein hässliches Entlein, das niemand ernst nahm. Vor achtzehn Monaten rückte Ruby in den Mittelpunkt der Aufmerksamkeit, und Programmierer, die Ruby nicht kannten, konnten nur auf der Bank sitzen. Wenn Sie heute mit den neuesten Technologietrends Schritt halten möchten, ist Ajax Ihr Ziel.
Aber Ajax ist mehr als nur eine Modeerscheinung, es ist eine leistungsstarke Möglichkeit, Websites zu erstellen, die nicht so schwierig ist wie das Erlernen einer ganz neuen Sprache.
Aber bevor wir uns mit den Details befassen, was Ajax ist, nehmen wir uns ein paar Minuten Zeit, um zu verstehen, was Ajax macht. Derzeit gibt es beim Schreiben von Anwendungen zwei grundlegende Optionen:
· Desktop-Anwendungen · Web-Anwendungen
Die beiden sind ähnlich, Desktop-Anwendungen werden normalerweise auf einer CD geliefert (manchmal können sie von einer Website heruntergeladen werden) und sind vollständig auf Ihrem Computer installiert. Desktop-Anwendungen nutzen möglicherweise das Internet, um Updates herunterzuladen, der Code, der diese Anwendungen ausführt, befindet sich jedoch auf dem Desktop-Computer. Webanwendungen werden irgendwo auf einem Webserver ausgeführt. Es überrascht nicht, dass der Zugriff auf solche Anwendungen über einen Webbrowser erfolgt.
Wichtiger als der Ort, an dem der Code zum Ausführen dieser Anwendungen platziert wird, ist jedoch die Art und Weise, wie die Anwendungen funktionieren und mit ihnen interagieren. Desktop-Anwendungen sind im Allgemeinen schnell (laufen direkt auf Ihrem Computer, ohne auf eine Internetverbindung warten zu müssen), verfügen über eine schöne Benutzeroberfläche (normalerweise abhängig vom Betriebssystem) und sind bemerkenswert dynamisch. Sie können klicken, auswählen, tippen, Menüs und Untermenüs öffnen, navigieren und im Grunde nie warten.
Der neueste Trend sind hingegen Webanwendungen, die Dienste bereitstellen, die auf dem Desktop nicht möglich sind (z. B. Amazon.com und eBay). Mit der Leistungsfähigkeit des Webs geht jedoch die Notwendigkeit einher, zu warten, auf die Antwort des Servers, auf die Aktualisierung des Bildschirms, auf die Rückkehr der Anfrage und auf die Generierung einer neuen Seite.
Offensichtlich ist dies eine zu starke Vereinfachung, aber das Grundkonzept ist folgendes. Wie Sie vielleicht schon vermutet haben, versucht Ajax, die Funktionalität und Interaktivität von Desktop-Anwendungen mit den sich ständig weiterentwickelnden Webanwendungen zu verbinden. Sie können dynamische Benutzeroberflächen und schöne Steuerelemente verwenden, wie sie in Desktopanwendungen zu finden sind, jedoch in einer Webanwendung.
Worauf warten Sie noch? Werfen wir einen Blick darauf, wie Ajax unhandliche Webschnittstellen in reaktionsfähige Ajax-Anwendungen verwandeln kann.
Alte Technologie, neue Tricks
Wenn es um Ajax geht, handelt es sich tatsächlich um eine Vielzahl von Technologien, und der flexible Einsatz erfordert ein tiefes Verständnis dieser verschiedenen Technologien (in den ersten Artikeln dieser Reihe wird jede dieser Technologien separat besprochen). Die gute Nachricht ist, dass Sie mit den meisten dieser Technologien wahrscheinlich bereits sehr vertraut sind, und noch besser ist, dass sie leicht zu erlernen sind und nicht so schwierig wie eine vollständige Programmiersprache wie Java oder Ruby.
Im Folgenden sind die grundlegenden Technologien aufgeführt, die in Ajax-Anwendungen verwendet werden:
·HTML wird verwendet, um Webformulare zu erstellen und die Felder zu bestimmen, die von anderen Teilen der Anwendung verwendet werden.
· JavaScript-Code ist der Kerncode, der Ajax-Anwendungen ausführt und zur Verbesserung der Kommunikation mit Serveranwendungen beiträgt.
·DHTML oder Dynamic HTML zur dynamischen Aktualisierung von Formularen. Wir verwenden Divs, Spans und andere dynamische HTML-Elemente, um HTML auszuzeichnen.
·Das Document Object Model DOM wird verwendet, um (über JavaScript-Code) die Struktur von HTML und (in einigen Fällen) das vom Server zurückgegebene XML zu verarbeiten.
Definition von Ajax
Ajax ist übrigens die Abkürzung für Asynchronous JavaScript und XML (und DHTML usw.). Dieser Satz wurde von Jesse James Garrett von Adaptive Path geprägt (siehe Ressourcen) und ist, wie Jesse erklärt, kein Akronym.
Lassen Sie uns die Verantwortlichkeiten dieser Technologien weiter analysieren. Ich werde diese Technologien in zukünftigen Artikeln ausführlich besprechen, aber machen Sie sich zunächst nur mit den Komponenten und Technologien vertraut. Je vertrauter Sie mit diesen Codes sind, desto einfacher wird es, von einem verstreuten Verständnis dieser Technologien zu einem echten Verständnis dieser Technologien überzugehen (was auch wirklich die Tür zur Entwicklung von Webanwendungen öffnet).
XMLHttpRequest-Objekt
Das einzige Objekt, das Sie verstehen sollten, ist möglicherweise auch das unbekannteste für Sie: XMLHttpRequest. Dies ist ein JavaScript-Objekt und seine Erstellung ist einfach, wie in Listing 1 gezeigt.
Listing 1. Erstellen eines neuen XMLHttpRequest-Objekts
<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>
Wir werden dieses Objekt im nächsten Artikel weiter besprechen, wissen aber vorerst, dass es sich um das Objekt handelt, das die gesamte Serverkommunikation abwickelt. Bevor Sie weiterlesen, denken Sie darüber nach: Die JavaScript-Technologie kommuniziert über das XMLHttpRequest-Objekt mit dem Server. Dies ist kein gewöhnlicher Anwendungsablauf, und hier liegt die Stärke von Ajax.
In einer typischen Webanwendung füllt der Benutzer die Formularfelder aus und klickt auf die Schaltfläche „Senden“. Das gesamte Formular wird dann an den Server gesendet, der es an ein Skript weiterleitet, das das Formular verarbeitet (normalerweise PHP oder Java, möglicherweise ein CGI-Prozess oder etwas Ähnliches), und dann eine brandneue Seite zurücksendet, wenn das Skript fertig ist. Bei der Seite kann es sich um eine HTML-Seite mit einem neuen Formular handeln, das bereits mit einigen Daten gefüllt ist, es könnte sich um eine Bestätigungsseite handeln oder es könnte sich um eine Seite handeln, auf der einige Optionen basierend auf den im ursprünglichen Formular eingegebenen Daten ausgewählt wurden. Natürlich muss der Benutzer warten, während das Skript oder Programm auf dem Server das neue Formular verarbeitet und zurückgibt. Der Bildschirm wird leer und wartet, bis Daten vom Server zurückgegeben werden, bevor er neu gezeichnet wird. Aus diesem Grund ist die Interaktivität schlecht, der Benutzer erhält kein unmittelbares Feedback, sodass es sich anders anfühlt als eine Desktop-Anwendung.
Ajax platziert grundsätzlich JavaScript-Technologie und das XMLHttpRequest-Objekt zwischen dem Webformular und dem Server. Wenn der Benutzer das Formular ausfüllt, werden die Daten an einen JavaScript-Code gesendet und nicht direkt an den Server. Stattdessen erfasst der JavaScript-Code die Formulardaten und sendet eine Anfrage an den Server. Gleichzeitig flackert, verschwindet oder verzögert sich das Formular auf dem Bildschirm des Benutzers nicht. Mit anderen Worten: Der JavaScript-Code sendet die Anfrage hinter den Kulissen, ohne dass der Benutzer überhaupt weiß, dass die Anfrage gestellt wird. Noch besser ist, dass die Anfrage asynchron gesendet wird, was bedeutet, dass der JavaScript-Code (und der Benutzer) nicht auf eine Antwort vom Server warten müssen. So kann der Benutzer weiterhin Daten eingeben, scrollen und die Anwendung nutzen.
Der Server gibt die Daten dann an den JavaScript-Code zurück (immer noch im Webformular), der entscheidet, was mit den Daten geschehen soll. Formulardaten werden schnell aktualisiert, sodass der Eindruck entsteht, dass der Antrag sofort abgeschlossen ist, ohne dass das Formular gesendet oder aktualisiert werden muss und der Benutzer keine neuen Daten erhält. Der JavaScript-Code kann sogar eine Berechnung der empfangenen Daten durchführen und eine weitere Anfrage senden, alles ohne Benutzereingriff! Das ist die Stärke von XMLHttpRequest. Es kann bei Bedarf selbstständig mit dem Server interagieren, und der Benutzer weiß möglicherweise sogar überhaupt nicht, was sich hinter den Kulissen abspielt. Das Ergebnis ist ein dynamisches, reaktionsschnelles und hochgradig interaktives Erlebnis, das einer Desktop-Anwendung ähnelt, jedoch mit der ganzen Leistungsfähigkeit des Internets dahinter steckt.
NachdemSie etwas JavaScript hinzugefügt haben
, um das Handle von XMLHttpRequest zu erhalten, ist der andere JavaScript-Code sehr einfach. Tatsächlich werden wir JavaScript-Code verwenden, um sehr grundlegende Aufgaben zu erfüllen:
· Formulardaten abrufen: JavaScript-Code kann problemlos Daten aus einem HTML-Formular extrahieren und an den Server senden.
·Daten im Formular ändern: Das Aktualisieren des Formulars ist ebenfalls einfach, vom Festlegen von Feldwerten bis zum schnellen Ersetzen von Bildern.
·HTML und XML analysieren: Verwenden Sie JavaScript-Code, um das DOM zu manipulieren (siehe nächster Abschnitt) und die Struktur der vom HTML-Formularserver zurückgegebenen XML-Daten zu verarbeiten.
Für die ersten beiden Punkte müssen Sie mit der Methode getElementById() bestens vertraut sein, wie in Listing 2 gezeigt.
Listing 2. Feldwerte mit JavaScript-Code erfassen und festlegen
// Den Wert des Felds „phone“ abrufen und in eine Variable namens phone einfügen
var phone = document.getElementById("phone").value;
// Legen Sie mithilfe eines Arrays namens „Response“ einige Werte in einem Formular fest
document.getElementById("order").value = Response[0];
document.getElementById("address").value = Response[1];
Hier gibt es nichts Besonderes zu beachten, es ist großartig! Sie sollten sich darüber im Klaren sein, dass es hier nichts besonders Kompliziertes gibt. Sobald Sie XMLHttpRequest beherrschen, besteht der Rest Ihrer Ajax-Anwendung aus einfachem JavaScript-Code, wie in Listing 2 gezeigt, gemischt mit einer kleinen Menge HTML. Gleichzeitig müssen wir auch ein wenig DOM verwenden, also werfen wir einen Blick darauf.
Ende mit DOM
Schließlich gibt es noch DOM, das Document Object Model. Für manche Leser mag das DOM ein wenig einschüchternd sein. HTML-Designer verwenden es selten, und selbst JavaScript-Programmierer verwenden es selten, es sei denn, sie möchten eine High-End-Programmieraufgabe erledigen. Komplexe Java- und C/C++-Programme nutzen das DOM intensiv, weshalb das DOM möglicherweise als schwer zu erlernen gilt.
Glücklicherweise ist die Arbeit mit dem DOM in der JavaScript-Technologie einfach und sehr intuitiv. Herkömmlicherweise sollten Sie wahrscheinlich erklären, wie das DOM verwendet wird, oder zumindest einen Beispielcode angeben, aber dies könnte Sie auch in die Irre führen. Selbst wenn Sie das DOM ignorieren, können Sie sich immer noch mit Ajax befassen, und das ist der Ansatz, den ich verfolgen werde. Wir werden uns in einem zukünftigen Artikel noch einmal mit dem DOM befassen, aber für den Moment genügt es zu wissen, dass Sie es möglicherweise benötigen. Wir werden tiefer in das DOM eintauchen, wenn wir XML zwischen JavaScript-Code und dem Server übergeben und HTML-Formulare ändern müssen. Sie können einige interessante Arbeiten auch ohne ausführen, also legen Sie das DOM vorerst beiseite.
Erhalten des Request-Objekts
Schauen wir uns mit den oben genannten Grundkenntnissen einige konkrete Beispiele an. XMLHttpRequest ist das Herzstück von Ajax-Anwendungen und dürfte vielen Lesern unbekannt sein, also fangen wir dort an. Wie Sie Listing 1 entnehmen können, ist das Erstellen und Verwenden dieses Objekts sehr einfach, nicht wahr? Warten.
Erinnern Sie sich an die fiesen Browserkriege von vor ein paar Jahren? Nichts liefert in verschiedenen Browsern die gleichen Ergebnisse. Ob Sie es glauben oder nicht, diese Kriege dauern immer noch an, wenn auch in kleinerem Maßstab. Aber seltsamerweise wurde XMLHttpRequest zu einem der Opfer dieses Krieges. Daher ist zum Abrufen des XMLHttpRequest-Objekts möglicherweise ein anderer Ansatz erforderlich. Ich erkläre es weiter unten im Detail.
Verwendung des Microsoft-Browsers
Der Microsoft-Browser Internet Explorer verwendet einen MSXML-Parser zur Verarbeitung von XML (weitere Informationen zu MSXML finden Sie unter „Ressourcen“). Wenn Sie also eine Ajax-Anwendung schreiben, die mit Internet Explorer interagiert, müssen Sie Objekte auf besondere Weise erstellen.
Aber so einfach ist es nicht. Abhängig von der im Internet Explorer installierten Version der JavaScript-Technologie gibt es tatsächlich zwei verschiedene Versionen von MSXML, sodass Sie für jeden Fall separaten Code schreiben müssen. Siehe Listing 3, das Code enthält, der eine XMLHttpRequest in einem Microsoft-Browser erstellt.
Listing 3. XMLHttpRequest-Objekt im Microsoft-Browser erstellen
var xmlHttp = false;
versuchen {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} fangen (e) {
versuchen {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} fangen (e2) {
xmlHttp = false;
}
}
Möglicherweise verstehen Sie den Code noch nicht vollständig, aber das ist in Ordnung. Am Ende dieser Artikelserie werden Sie ein tieferes Verständnis der JavaScript-Programmierung, Fehlerbehandlung, bedingten Kompilierung und mehr haben. Denken Sie jetzt einfach an die beiden Codezeilen:
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
und
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");.
Diese beiden Codezeilen versuchen grundsätzlich, ein Objekt mit einer Version von MSXML zu erstellen. Wenn dies fehlschlägt, erstellen Sie das Objekt mit einer anderen Version. Nicht schlecht, oder? Wenn beides nicht gelingt, wird die xmlHttp-Variable auf „false“ gesetzt, um Ihrem Code mitzuteilen, dass ein Problem vorliegt. Wenn dies auftritt, kann es daran liegen, dass ein Nicht-Microsoft-Browser installiert ist, der anderen Code erfordert.
Umgang mit Mozilla- und Nicht-Microsoft-Browsern
Wenn Sie einen anderen Browser als Internet Explorer wählen oder Code für einen Nicht-Microsoft-Browser schreiben, müssen Sie anderen Code verwenden. Es handelt sich eigentlich um eine einfache Codezeile, die in Listing 1 gezeigt wird:
var xmlHttp = new XMLHttpRequest object;.
Diese viel einfachere Codezeile erstellt ein XMLHttpRequest-Objekt in Mozilla, Firefox, Safari, Opera und grundsätzlich in jedem Nicht-Microsoft-Browser, der Ajax in irgendeiner Form und Art unterstützt.
Der Schlüsselzur Kombination
liegt in der Unterstützung aller Browser. Wer möchte eine Anwendung schreiben, die nur mit Internet Explorer oder Nicht-Microsoft-Browsern funktioniert? Oder noch schlimmer: Eine Bewerbung zweimal schreiben? Natürlich nicht! Daher muss der Code sowohl Internet Explorer als auch Nicht-Microsoft-Browser unterstützen. Listing 4 zeigt einen solchen Code.
Listing 4. Erstellen eines XMLHttpRequest-Objekts auf eine Weise, die mehrere Browser unterstützt
/* Erstellen Sie ein neues XMLHttpRequest-Objekt, um mit dem Webserver zu kommunizieren */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
versuchen {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} fangen (e) {
versuchen {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} fangen (e2) {
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefiniert') {
xmlHttp = new XMLHttpRequest();
}
Ignorieren Sie vorerst die auskommentierten seltsamen Symbole wie @cc_on, bei denen es sich um spezielle JavaScript-Compilerbefehle handelt, die im nächsten Artikel zu XMLHttpRequest ausführlich besprochen werden. Der Kern dieses Codes ist in drei Schritte unterteilt:
1. Erstellen Sie eine Variable xmlHttp, um auf das zu erstellende XMLHttpRequest-Objekt zu verweisen.
2. Versuchen Sie, das Objekt im Microsoft-Browser zu erstellen:
1) Versuchen Sie, es mit dem Objekt Msxml2.XMLHTTP zu erstellen.
2) Wenn dies fehlschlägt, versuchen Sie es erneut mit dem Microsoft.XMLHTTP-Objekt.
2. Wenn xmlHttp immer noch nicht erstellt wurde, erstellen Sie das Objekt auf eine nicht von Microsoft stammende Weise.
Schließlich sollte xmlHttp auf ein gültiges XMLHttpRequest-Objekt verweisen, unabhängig davon, welcher Browser ausgeführt wird.
Ein kleiner Hinweis zur Sicherheit.
Wie wäre es mit der Sicherheit? Mit Browsern können Benutzer jetzt ihre Sicherheitsstufe erhöhen, die JavaScript-Technologie deaktivieren und alle Optionen im Browser deaktivieren. In diesem Fall funktioniert der Code sowieso nicht. An diesem Punkt ist es notwendig, das Problem angemessen zu lösen, was einen separaten Artikel für später erfordert (diese Serie ist lang genug, oder? Keine Sorge, es kann sein, dass Sie sie erhalten, bevor Sie mit dem Lesen fertig sind). Schreiben wir nun einen robusten, aber nicht perfekten Code, der sich gut für die Beherrschung von Ajax eignet. Wir werden dies später noch ausführlicher besprechen.
Anfrage/Antwort in der Ajax-Welt
Nachdem wir Ajax eingeführt haben, verfügen wir über ein grundlegendes Verständnis des XMLHttpRequest-Objekts und seiner Erstellung. Wenn Sie sorgfältig gelesen haben, wissen Sie wahrscheinlich bereits, dass es sich um die JavaScript-Technologie handelt, die Webanwendungen auf dem Server verwaltet, und nicht um HTML-Formulare, die direkt an diese Anwendung gesendet werden.
Was fehlt? Genaue Verwendung von XMLHttpRequest. Da dieser Code so wichtig ist, dass jede von Ihnen geschriebene Ajax-Anwendung ihn in irgendeiner Form verwendet, schauen wir uns zunächst an, wie das grundlegende Anforderungs-/Antwortmodell von Ajax aussieht.
Die Anfrage stellen
Da Sie nun über ein brandneues XMLHttpRequest-Objekt verfügen, lassen wir es ein wenig arbeiten. Zunächst benötigen Sie eine JavaScript-Methode, die die Webseite aufrufen kann (z. B. wenn der Benutzer Text eingibt oder ein Element aus einem Menü auswählt). Als nächstes folgt der Prozess, der grundsätzlich in allen Ajax-Anwendungen gleich ist:
1. Beziehen Sie die erforderlichen Daten aus dem Webformular.
2. Erstellen Sie die zu verbindende URL.
3. Öffnen Sie eine Verbindung zum Server.
4. Legen Sie die Funktion fest, die nach Abschluss vom Server ausgeführt werden soll.
5. Senden Sie eine Anfrage.
Die Beispiel-Ajax-Methoden in Listing 5 sind in dieser Reihenfolge organisiert:
Listing 5. Eine Ajax-Anfrage stellen
Funktion callServer() {
// Holen Sie sich die Stadt und das Bundesland aus dem Webformular
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Nur weitermachen, wenn für beide Felder Werte vorhanden sind
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// Erstellen Sie die URL, zu der eine Verbindung hergestellt werden soll
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
// Eine Verbindung zum Server öffnen
xmlHttp.open("GET", url, true);
// Richten Sie eine Funktion ein, die der Server ausführen soll, wenn sie fertig ist
xmlHttp.onreadystatechange = updatePage;
// Anfrage senden
xmlHttp.send(null);
}
Die Bedeutung der meisten Codes ist sehr klar. Der Code am Anfang verwendet einfachen JavaScript-Code, um die Werte mehrerer Formularfelder abzurufen. Anschließend legen Sie ein PHP-Skript als Ziel des Links fest. Beachten Sie die Art und Weise, wie die Skript-URL angegeben wird. Die Stadt und das Bundesland (aus dem Formular) werden mithilfe einfacher GET-Parameter an die URL angehängt.
Dann wird eine Verbindung geöffnet, und Sie sehen zum ersten Mal, dass XMLHttpRequest verwendet wird. Die Verbindungsmethode (GET) und die URL, zu der eine Verbindung hergestellt werden soll, werden angegeben. Wenn der letzte Parameter auf „true“ gesetzt ist, fordert er eine asynchrone Verbindung an (dies ist der Ursprung von Ajax). Wenn false verwendet wird, wartet der Code nach der Anfrage auf eine Antwort vom Server. Wenn es auf „true“ gesetzt ist, können Benutzer das Formular weiterhin verwenden (und sogar andere JavaScript-Methoden aufrufen), während der Server Anfragen im Hintergrund verarbeitet.
Das onreadystatechange-Attribut von xmlHttp (denken Sie daran, dass es sich hierbei um eine XMLHttpRequest-Objektinstanz handelt) teilt dem Server mit, was er tun soll, nachdem die Ausführung abgeschlossen ist (was fünf Minuten oder fünf Stunden dauern kann). Da der Code nicht auf den Server wartet, muss er dem Server mitteilen, was zu tun ist, damit Sie antworten können. Wenn in diesem Beispiel der Server die Verarbeitung der Anfrage abgeschlossen hat, wird eine spezielle Methode namens updatePage() ausgelöst.
Abschließend wird send() mit dem Wert null aufgerufen. Da die an den Server zu sendenden Daten (Stadt und Bundesland) der Anfrage-URL hinzugefügt wurden, müssen in der Anfrage keine Daten gesendet werden. Auf diese Weise wird die Anfrage gestellt und der Server arbeitet entsprechend Ihrer Anfrage.
Wenn Sie nichts Neues finden, sollten Sie zu schätzen wissen, wie einfach und unkompliziert das ist! Abgesehen von der asynchronen Natur von Ajax ist das alles ziemlich einfach. Seien Sie dankbar, dass Sie sich mit Ajax auf das Schreiben schöner Anwendungen und Schnittstellen konzentrieren können, anstatt sich um komplexen HTTP-Anfrage-/Antwortcode zu kümmern.
Der Code in Listing 5 veranschaulicht die Benutzerfreundlichkeit von Ajax. Bei den Daten handelt es sich um einfachen Text, der als Teil der Anforderungs-URL verwendet werden kann. Senden Sie Anfragen mit GET statt mit dem komplexeren POST. Es gibt kein XML und keine Inhaltsheader, die hinzugefügt werden müssen, und keine Daten, die im Anforderungstext gesendet werden müssen. Mit anderen Worten: Dies ist eine Ajax-Utopie.
Keine Sorge, die Dinge werden im Laufe dieser Artikelserie noch komplizierter. Sie erfahren, wie Sie eine POST-Anfrage senden, wie Sie die Anforderungsheader und den Inhaltstyp festlegen, wie Sie XML in der Nachricht codieren, wie Sie die Sicherheit der Anforderung erhöhen und vieles mehr, was Sie tun können! Machen Sie sich über diese Schwierigkeiten vorerst keine Sorgen, beherrschen Sie einfach die grundlegenden Dinge, und schon bald werden wir einen vollständigen Satz Ajax-Toolbibliotheken erstellen.
Umgang mit der Antwort
Jetzt kommt die Antwort des Servers. Nur zwei Dinge, die Sie vorerst wissen sollten:
· Tun Sie nichts, bis der Wert der Eigenschaft xmlHttp.readyState gleich 4 ist.
·Der Server füllt die Eigenschaft xmlHttp.responseText mit der Antwort.
Der erste davon, der Bereitschaftszustand, wird im nächsten Artikel ausführlich besprochen, und Sie werden mehr über die Phasen einer HTTP-Anfrage erfahren, als Sie wahrscheinlich gedacht haben. Im Moment reicht es aus, nach einem bestimmten Wert (4) zu suchen (weitere Werte werden im nächsten Artikel behandelt). Zweiter Punkt: Verwenden Sie die Eigenschaft xmlHttp.responseText, um die Antwort des Servers abzurufen. Das ist sehr einfach. Die Beispielmethode in Listing 6 kann vom Server basierend auf den in Listing 5 gesendeten Daten aufgerufen werden.
Listing 6. Verarbeitung der Serverantwortfunktion
updatePage() {
if (xmlHttp.readyState == 4) {
var Antwort = xmlHttp.responseText;
document.getElementById("zipCode").value = Antwort;
}
}
Die Codes sind auch weder schwierig noch komplex. Es wartet auf den Serveraufruf und legt, wenn es bereit ist, den Wert eines anderen Formularfelds mithilfe des vom Server zurückgegebenen Werts fest (hier die Postleitzahl der vom Benutzer eingegebenen Stadt und des Bundesstaats). So erscheint plötzlich das Feld zipCode mit der Postleitzahl, ohne dass der Benutzer irgendwelche Tasten drückt! Dies ist, was ich zuvor als Desktop-Anwendung erwähnt habe. Schnelle Reaktion, dynamisches Gefühl usw., alles dank eines kleinen Stücks Ajax-Code.
Aufmerksamen Lesern fällt möglicherweise auf, dass es sich bei zipCode um ein gewöhnliches Textfeld handelt. Sobald der Server die ZIP-Kodierung zurückgibt, legt die Methode updatePage() den Wert dieses Felds mit der ZIP-Kodierung für Stadt/Bundesland fest, die der Benutzer überschreiben kann. Dies geschieht aus zwei Gründen: um das Beispiel einfach zu halten und um zu veranschaulichen, dass Sie manchmal möchten, dass der Benutzer die vom Server zurückgegebenen Daten ändern kann. Beachten Sie diese beiden Dinge, sie sind wichtig für ein gutes Design der Benutzeroberfläche.
Was gibt es sonst noch,
um eine Verbindung zu einem Webformular herzustellen
?Da ist eigentlich nicht mehr viel übrig. Eine JavaScript-Methode erfasst die Informationen, die der Benutzer in das Formular eingibt, und sendet sie an den Server, und die andere JavaScript-Methode lauscht und verarbeitet die Antwort und legt den Wert des Felds fest, wenn die Antwort zurückkommt. All dies hängt tatsächlich vom Aufruf der ersten JavaScript-Methode ab, die den gesamten Prozess in Gang setzt. Die naheliegendste Lösung besteht darin, dem HTML-Formular eine Schaltfläche hinzuzufügen, aber das ist 2001, finden Sie nicht? Lassen Sie uns JavaScript-Technologie wie Listing 7 verwenden.
Listing 7. Starten eines Ajax-Prozesses
<form>
<p>Stadt: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>Bundesstaat: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>Postleitzahl: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>
Wenn sich das wie ein ziemlich gewöhnlicher Code anfühlt, dann haben Sie Recht, das ist er auch! Wenn der Benutzer einen neuen Wert in das Stadt- oder Bundeslandfeld eingibt, wird die callServer()-Methode ausgelöst und Ajax beginnt mit der Ausführung. Verstehst du ein bisschen, was los ist? Nun, das ist es!
Fazit
Jetzt sind Sie wahrscheinlich bereit, mit dem Schreiben Ihrer ersten Ajax-Anwendung zu beginnen, und möchten zumindest die Artikel in den Ressourcen sorgfältig lesen, oder? Sie können jedoch mit einer grundlegenden Vorstellung davon beginnen, wie diese Anwendungen funktionieren, und einem grundlegenden Verständnis des XMLHttpRequest-Objekts. Im nächsten Teil beherrschen Sie dieses Objekt und lernen, wie Sie mit der Kommunikation zwischen JavaScript und dem Server umgehen, wie Sie HTML-Formulare verwenden und wie Sie ein DOM-Handle erhalten.
Nehmen Sie sich nun einen Moment Zeit und überlegen Sie, wie leistungsfähig Ajax-Anwendungen sein können. Stellen Sie sich ein Webformular vor, das sofort reagiert, wenn Sie auf eine Schaltfläche klicken, ein Feld eingeben, eine Option aus einem Kombinationsfeld auswählen oder die Maus über den Bildschirm ziehen. Denken Sie darüber nach, was asynchron eigentlich bedeutet. Denken Sie darüber nach, dass JavaScript-Code ausgeführt wird und nicht darauf wartet, dass der Server auf seine Anfrage antwortet. Auf welche Probleme werden Sie stoßen? Was für ein Feld wird eingegeben? Wie sollten wir angesichts dieses neuen Ansatzes das Design des Formulars beim Programmieren ändern?
Wenn Sie sich ein wenig Zeit mit diesen Themen nehmen, werden Sie mehr erreichen, als nur Code in eine Anwendung auszuschneiden/einzufügen, die Sie überhaupt nicht verstehen. Im nächsten Teil werden wir diese Konzepte in die Praxis umsetzen und den Code detailliert beschreiben, der erforderlich ist, damit die Anwendung auf diese Weise funktioniert. Genießen Sie also erst einmal die Möglichkeiten, die Ajax zu bieten hat.