AJAX Kommunikation ohne Fassaden Pattern
25. März 2009 Roland
- Programmierung
- Variablenzuweisungen und Berechnungen
- Alter berechnen nur mit JavaScript
- Alter berechnen mit und ohne Javascript
- Code Optimierung
- Client Server Applikationsarchitektur
- Eigenschaften eines Webbrowsers
- Stylesheets
- Interaktive Webclients
- Mit HTML, oder SVG, interaktive Ein- Ausgaben erstellen
- Mit JavaScript aus einem Dokument Daten lesen
- Der Webserver
- Webserver-seitige Programmierung
- Datenbankanbindung
- Architekturprinzip Separation of Concerns
- Beschreibung von Anwendungsfällen
- Mit JavaScript einen wiederkehrenden Event erzeugen
- Kommunikationswege bei Einsatz von Java auf dem Webclient
- Einbinden der JavaScript Timer Klasse in eine Webseite
- AJAX Kommunikation ohne Fassaden Pattern
- JavaScript Klassen mit Object-Literal Syntax erstellen
- Knackpunkte bei der Klasse AsyncCommunication
- Speicherverbrauch in AJAX Applikationen
- Auch bei JavaScript immer die Variablen sauber deklarieren
- Eventhandler im JavaScript mit dem HTML Dokument verknüpfen
- Objekte in JavaScript mit JSON deklarieren
Du möchtest mit JavaScript eine asynchrone Kommunikation mit dem Webserver durchführen. Das möchtest du tun um zum Beispiel die aktuellen Fußballergebnisse, ohne einen Reload Button drücken zu müssen, immer wieder darzustellen. Oder du möchtest einen Chat programmieren und da wäre es doch auch vernünftig, wenn dich dass System immer wieder informieren würde wenn dein Chatpartner etwas von sich gegeben hat.
Um mit dem Server kommunizieren (oder auf gut Schwäbisch schwätze) zu können, müssen wir uns ein XMLHttpRequest Objekt für Firefox, Safari usw. erzeugen und für IEs brauchen wir ein ActiveXObject. Weiterhin müssen wir eine Callback Funktion an dieses XMLHttpRequest oder ActiveXObject anbinden um die Rückmeldung des Servers verarbeiten zu können.
Ein möglicher Code könnte ungefähr so aussehen:
-
// mit dem Webserver verwaltet wird.
-
var serverRequest;
-
// Diese Konstante gibt an, dass die Kommunikation mit
-
// dem Webserver erfolgreich beendet wurde.
-
var READY_STATE_COMPLETE=4;
-
-
/**
-
* Initialisiert das serverRequest Objekt um überhaupt
-
* mit dem Server reden zu können.
-
* Ich habe diese Art im Buch Ajax in Action gefunden.
-
* Mir selbst gefällt diese Initialisierung mehr als die sonst
-
* übliche try-catch Vorgehensweise wie beispielsweise unter
-
* <a href="http://www.admin-wissen.de/eigene-tutorials/webentwicklung/ajax-tutorial/einfuehrung-in-ajax/">Einführung in Ajax</a> beschrieben.
-
*/
-
function initXMLHTTPRequest(){
-
var request = null;
-
if(window.XMLHttpRequest){
-
request = new XMLHttpRequest();
-
}else if (window.AcitiveXObject()){
-
request=new ActiveXObject("Microsoft.XMLHTTP");
-
}
-
return request;
-
}
-
-
/**
-
* Hiermit senden wir unseren Request vom Client an den Server.
-
*/
-
function sendRequest(url, params){
-
serverRequest=initXMLHTTPRequest();
-
if(serverRequest){
-
// Wir müssen angeben welche Funktion mit den Daten
-
// des Webservers umgehen soll.
-
serverRequest.onreadystatechange=processAnswer;
-
serverRequest.open("GET", url, true);
-
serverRequest.setRequestHandler("Content-Type", "application/x-www-form-urlencoded");
-
serverRequest.send(params);
-
}
-
}
-
-
/**
-
* Hier kommt endlich unsere Funktion mit der wir
-
* die Antwort des Servers verarbeiten.
-
*/
-
function processAnswer(){
-
var ready = serverRequest;
-
if(ready==READY_STATE_COMPLETE){
-
// Unser super Fußball oder Chat Code….
-
)
-
}
Diesen Code müssten wir immer in unsere Funktionen in so ähnlicher Weise reinfummeln. Wir hätten außerdem noch mit der globalen Variable diverse Schwierigkeiten. Stell dir vor du möchtest über die Fußballergebnisse auf der gleichen Seite chatten. Dann weist du unter Umständen nicht mehr, welche Antwort vom Server nun zum Fußball oder zum Chat gehört.
Facade Pattern hierfür verwenden
Wenn wir unseren Code nochmal anschauen, wäre eine Kapselung der ganzen Kommunikation gar nicht so schlecht.
Wir könnten den ganzen Kommunikations- und Webserver Rückmeldungskram in ein dafür vorgesehenes Objekt verbuddeln.
Diesem Objekt geben wir im Konstruktor mit, welche Callback Funktion wir aufrufen wollen und welche URL verwendet werden soll.
Wir kapseln also die ganze Komplexität des Serveraufrufs und können dieses Objekt immer wieder verwenden ohne die Details des Serveraufrufs zu kennen.
Wie wir diese Klasse aufbauen erkläre ich in einem nächsten Artikel.
Der Beitrag wurde
am Mittwoch, den 25. März 2009 um 16:38 Uhr veröffentlicht
und wurde unter Design Pattern, Programmieren abgelegt.
Kurzlink: http://www.baldenhofer.eu/blog/?p=655
Dir gefiel der Artikel? Dann abonniere doch den RSS Feed
Du kannst die Kommentare zu diesem Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.
[...] schrieb AJAX Kommunikation ohne Fassaden Pattern Guggat emol Blog bei ObjekteNebenläufigkeiten beim Lesen von Newseinträgen Guggat emol Blog bei [...]