Ajax
Der überzeugendste Grund für die Verwendung eines JavaScript-Frameworks besteht darin, Ajax-Anfragen browserübergreifend zu standardisieren. Eine Ajax-Anfrage ist eine asynchrone HTTP-Anfrage, die eine Anfrage an ein serverseitiges Skript sendet und dann ein Antwortergebnis erhält, beispielsweise Daten im XML-, JSON-, HTML- oder Nur-Text-Format. Die meisten JavaScript-Frameworks verfügen über eine Art Ajax-Anfrageobjekt, das eine Reihe von Optionen als Parameter akzeptiert. Zu diesen Optionen gehören Rückruffunktionen, die aufgerufen werden, wenn eine Antwort vom Webserver empfangen wird, und zwar für ExtJS, MooTools und Prototype, die wie folgt aussehen:
Listing 11: Ajax-Anfrage in einer ExtJS-Bibliothek
Ext.Ajax.request({
URL: 'server_script.php',
Parameter: {
Name1: 'Wert1',
Name2: 'Wert2'
},
Methode: 'POST',
Erfolg: Funktion(Transport) {
alarm(transport.responseText);
}
});
ExtJS akzeptiert einen Parameter, einschließlich Feldern wie URL, Parameter, Methode und Erfolgsverarbeitungsfunktion. Das URL-Feld enthält die Adresse des serverseitigen Skripts, das von Ajax-Anfragen aufgerufen wird. Params selbst ist ein Objekt, das aus Schlüssel/Wert-Paaren besteht, die dann an den Server übergeben werden. Das Methodenfeld hat zwei optionale Werte: GET oder POST, und der Standardwert ist die Post-Methode. Das letzte Feld ist „Erfolg“, das aufgerufen wird, nachdem der Server eine erfolgreiche Antwort erhalten hat. In diesem Beispiel wird davon ausgegangen, dass der Server Klartext zurückgibt und dieser Text dem Benutzer über die Methode „alert()“ angezeigt wird.
Lassen Sie uns als Nächstes die Ajax-Anfragen in MooTools weiter untersuchen.
Listing 12: Ajax-Anfrage in MooTools
neue Anfrage({
URL: 'server-script.php',
Daten: {
Name1: 'Wert1',
Name2: 'Wert2'
},
Methode: 'post',
onComplete: Funktion(Antwort) {
Warnung(Antwort);
}
}).schicken();
Wie Sie sehen, ist MooTools ExtJS sehr ähnlich. Sie werden feststellen, dass Variablen über das Datenfeld übergeben werden und Methodenfelder in Kleinbuchstaben geschrieben werden müssen. Darüber hinaus verwendet MooTools im Gegensatz zur Success-Handler-Funktion die onComplete-Funktion. Schließlich sendet MooTools im Gegensatz zu ExtJS die Anfrage tatsächlich mithilfe der Funktion „Request send()“.
Schauen wir uns abschließend die offensichtlichen Unterschiede zwischen Prototype an.
Listing 13: Ajax-Anfrage im Prototyp
new Ajax.Request('server-script.php', {
Parameter: {
Name1: 'Wert1',
Name2: 'Wert2'
},
Methode: 'post',
onSuccess: function(transport) {
alarm(transport.responseText);
}
});
Prototype funktioniert auf die gleiche Weise, allerdings mit kleinen Syntaxunterschieden. Zunächst einmal akzeptiert das Prototyp-Request-Objekt zwei Parameter, die an den Konstruktor übergeben werden. Der erste Parameter ist die URL, an die die Anfrage gesendet werden soll, wie Sie in den beiden vorherigen Beispielen gesehen haben, und der zweite Parameter ist ein Objekt, das die Optionen für jede Ajax-Anfrage enthält. Natürlich wird die URL als separater Parameter übergeben und steht nicht in der Optionsliste. Darüber hinaus ist zu beachten, dass im Gegensatz zu MooTools der Konstruktor des Prototype-Objekts die Anfrage implizit sendet, sodass keine Methode aufgerufen werden muss, um die HTTP-Anfrage auszulösen.
Die meisten JavaScript-Frameworks unterstützen Ajax über das hinaus, was ich hier erwähnt habe. Zu den bemerkenswerten Verbesserungen gehört die automatische Aktualisierung von Elementen beim Empfang einer Antwort, ohne dass spezielle onSuccess-Funktionen erforderlich sind. Einige Bibliotheken verfügen über eine vorgefertigte Funktion zur automatischen Vervollständigung, wie Sie bei der Google-Suchmaschine sehen, die Ihnen während der Eingabe einige Vorschläge für Suchanfragen liefert.
In den folgenden Kapiteln erfahren Sie mehr über die Verbesserungen der Benutzererfahrung (UE), die JavaScript-Frameworks für Webentwickler mit sich bringen.
Nachdruckadresse: http://www.denisdeng.com/?p=729
Ursprüngliche Adresse: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html