17.05.11 Thomas Perschke

Web-Programmierung- AJAX -

Wirtschaftsinformatik

Inhalt

Ajax– Was ist Ajax?– XMLHttpRequest-Objekt– Beispiel Adressinformation– JSON– Frameworks– Vor- und Nachteile

Was ist Ajax?

Ajax: Asynchrones Javascript und XML

– Standardbasierte Präsentation, die HTML und CSS nutzt– DOM (Document Object Model)– Javascript als Bindeglied– Asynchrone Datenabfrage (durch Nutzung von

XMLHttpRequest bzw. ActiveXObject)

Ajax als Sammlung von Technologien? Ajax als Architektur?

Redraw aber keine Refresh

Bisher:– Für jedes Ereignis in der Web-Applikation wird eine eigene Seite

entworfen. Formular Antwort-Seite– Jedes Ereignis oder jede Aktion führt zu einem HTTP-Request mit

anschließender HTTP-Response, welche eine komplette Seite an den Browser liefert

– Die Seite wird für den Benutzer gerendert

Mit Ajax:– Nutzer ruft per URL die Seite auf– Server liefert die HTML-Seite zurück, der Browser stellt sie dar– Eine Aktion des Nutzers löst im Hintergrund eine asynchrone Anfrage

an eine weitere URL aus, ohne die bereits existierende Seite zu beeinflussen

– Browser gibt die Daten (Antwort) an eine Call-Back-Funktion in der vorhandenen Seite, die den DOM-Baum entsprechend aktualisiert

– Ziel: desktopähnliche Anwendungen ohne Browser-Plugin

Asynchrone Datenabfrage: XMLHttpRequest-Objekt

Der Objekttyp XMLHttpRequest stellt clientseitigen Skripten eine Schnittstelle zur Erzeugung von HTTP-Transaktionen zur Verfügung und verwaltet die zugehörigen Zustandsinformationen. Sowohl der initiale Request für eine Transaktion wird über ein XMLHttpRequest-Objekte erzeugt als auch die zugehörige Antwort eingelesen und zur weiteren Verarbeitung bereitgestellt. Insofern bildet XMLHttpRequest den Kern nahezu jeder AJAX-Anwendung.

Asynchrone Datenabfrage: XMLHttpRequest-Objekt

Das XMLHttpRequest-Objekt zur Kommunikation ist der Kern jeder Ajax-Anwendung. Auf dieses Kommunikationsobjekt greift man bei jeder Ajax-Applikation mit JavaScript zu, wenn man Daten asynchron (oder synchron) nachfordern will. Der grundsätzliche Aufbau einer Ajax-Applikation ist dabei immer ähnlich. In einer Webseite ruft man bei einem Ereignis über einen JavaScript-EventHandler eine JavaScript-Funktion auf, die die Datenanforderung regelt. Das Anzeigen der nachgeforderten Daten in der Webseite ist dann reines DHTML und erfolgt meist mit einem Zugriff auf einen Bereich der Webseite mittels zugeordneter ID oder Namen.

Wichtige Methoden und Attribute

open(method, url, isAsynch) Öffnet eine Verbindung zur angegebenen URL unter Nutzung der angegebenen Methode, entweder synchron oder asynchron

send(content) Sendet den angegebenen Inhalt über die offene Verbindung. Bei Versenden mit der Methode „GET“ sollte der Parameter „content“ auf den Wert null gesetzt werden.

responseText Beinhaltet die Antwort der serverseitigen Anwendung als Zeichenkette

readyState Liefert den aktuellen Status als ganze Zahl:0: Objekt noch nicht initialisiert1: Objekt initialisiert, Request nicht abgesetzt2: Request abgesetzt3: Teile der Antwort verfügbar4: Request komplett abgearbeitet

onreadystatechange Ermöglicht die Angabe einer Funktion, die immer dann aufgerufen wird, wenn sich der Wert von readyState ändert

Zeitlicher Ablauf (synchron)

Synchrone Datenabfrage: Bedienung eines XMLHttpRequest-Objektes

Um diesen Mechanismus verwenden zu können, muss zuerst in einem clientseitigen Skript ein Objekt vom Typ XMLHttpRequest erzeugt werden

In diesem Beispiel wird ein neues XMLHttpRequest -Objekt angelegt und mit einem GET-Request für die Ressource http://www.w3.org/ initialisiert. Das dritte Argument der Funktion open gibt an, dass dieser Request synchron verarbeitet werden soll: Wenn der Request mit dem folgenden Aufruf der Funktion send gesendet wird, wird die Ausführung des Skripts solange blockiert, bis die Antwort des Servers vollständig empfangen wurde. Das Ergebnis dieser Operation kann ebenfalls über das XMLHttpRequest -Objekt ermittelt werden. Zur Verarbeitung der Antwort wird hier die fiktive Funktion handleResponse mit dem Statuscode der empfangenen HTTP-Antwortnachricht und dem Inhalt dieser Antwort als Zeichenkette aufgerufen.

var req = new XMLHttpRequest();req.open('GET', 'http://www.w3.org/', false);req.send(null);handleResponse(req.status, req.responseText);

Aufgabe A1: Text in Großbuchstaben (AJAX)

Erstellen Sie in einer HTML-Seite eine Überschrift erster Ordnung mit dem Text „Hallo Welt“. Platzieren Sie ein einzeiliges Texteinfgabefeld darunter. Nach Verlassen des Feldes (onBlur) soll der Text der Überschrift durch den im Textfeld eingegebenen Text ersetzt und das Textfeld geleert werden. Der Text wird dabei von einer PHP-Seite in Großbuchstaben gewandelt (strtoupper). Die Seite ist unter http://nbsrw.dyndns ip.com/dhvs/strtoupper.php erreichbar und erwartet einen ‑URL-codierten Parameter namens „str“ mit dem in Großbuchstaben zu wandenden Text.

Testen Sie ihre Anwendung auch mit der serverseitigen Seite http://nbsrw.dyndns ip.com/dhvs/strtoupper‑ 2.php.

Zeitlicher Ablauf (asynchron)

Asynchrone Datenabfrage: Bedienung eines XMLHttpRequest-Objektes

Um das blockierende Warten des Browsers auf die Antwort zu vermeiden, muss zum einen das dritte Argument des Aufrufs von open in den Wert true geändert werden. Das Skript läuft dann nach dem Absenden des Requests einfach weiter. Nun darf die Abfrage des Antwort-Status aber nicht mehr unmittelbar danach erfolgen, da dies aufgrund der Laufzeiten der Transaktion so gut wie nie zum Erfolg führen wird. Statt dessen muss eine Callback-Funktion vorgesehen werden, die immer dann aufgerufen wird, wenn sich der Bearbeitungszustand der Transaktion ändert. XMLHttpRequest-Objekte verfügen dafür über eine Eigenschaft onreadystatechange, die mit einem Funktionsobjekt belegt werden kann. Die angegebene Funktion handleStateChange wird fortan für jede Statusänderung des XMLHttpRequest -Objekts req aufgerufen.

var req = new XMLHttpRequest();req.open('GET', 'http://www.w3.org/', true);req.onreadystatechange = handleStateChange; req.send(null);

Asynchrone Datenabfrage: Zustände eines Requests

Mögliche Werte für XMLHttpRequest.READYSTATE

Wert Bezeichnung Bedeutung

0 UNINITIALIZED Das Objekt wurde noch nicht initialisiert, d. h., es erfolgte noch kein Aufruf der Funktion open.

1 LOADING Das Request-Objekt wurde initialisiert, aber der Request noch nicht abgesetzt (mittels send).

2 LOADED Der Request wurde mittels der Funktion send abgesetzt.

3 INTERACTIVE Teile der Antwort sind bereits verfügbar. Über das Feld responseText kann auf die empfangenen Daten zugegriffen werden.

4 COMPLETED Die Bearbeitung des Requests ist beendet.

Beispiel: Adressinformationen

Eine kleine Web-Anwendung zeigt die ID, den Namen und den Wohnort einer Person an. Nach Eingabe einer gültigen ID sollen die Werte für Name und Ort automatisch von einem Server ermittelt und in die entsprechenden Felder eingetragen werden.

Beispiel: Adressinformation (PHP)

Auf dem Server steht ein PHP-Skript zur Verfügung, welches anhand einer ID die entsprechenden Daten liefert. Der Aufbau der Daten ist dabei wie folgt: „Max Mustermann;Berlin“

<?php if($_GET["id"] == 1){ echo "Max Mustermann;Berlin"; } else if($_GET["id"] == 2){ echo "Peter Pan;München"; } else if($_GET["id"] == 3){ echo "Boris Becker;Leimen"; } else { echo "Max Merkel;Bonn"; } ?> http://nbsrw.dyndns-ip.com/dhvs/adressinfo.php?id=1

Beispiel: Adressinformation

<html> <head> <title></title> </head> <body>

ID: <br><input type="text" name="id"> <br>Name: <br><div id="name">&nbsp;</div> <br>Ort: <br><div id="ort">&nbsp;</div>

</body> </html>

Beispiel: Adressinformation

Das Ereignis des Verlassen des Feldes „ID“ wird mit einem JavaScript-EventHandler abgefangen und eine JavaScript-Funktion aufgerufen.

<html> <head> <title></title> <script type="text/javascript"> function datenHolen(){ } </script> </head> <body>

ID: <br><input type="text" name="id" onBlur="datenHolen()"> <br>Name: [...]

Beispiel: Adressinformation

In der Funktion „datenHolen“ sollen nun die Daten zur eingegebenen ID über einen asynchronen Aufruf vom Server angefordert werden.

1. Bestimmen der Eingabevar id = document.getElementsByName("id")[0].value;

2. Erzeugen eines XMLHttpRequest-Objektesxhr = new XMLHttpRequest();

3. Bekanntmachung der Callback-Funktionxhr.onreadystatechange=setzeDaten;

4. Senden der Anfrage an den Serverxhr.open("GET", "adressinfo.php?id=" + id, true);xhr.send(null);

Beispiel: Adressinformation

Funktion „datenHolen“

<script type="text/javascript"> var xhr;

function datenHolen(){ var id = document.getElementsByName("id")[0].value; xhr = new XMLHttpRequest(); xhr.onreadystatechange=setzeDaten; xhr.open("GET", "adressinfo.php?id=" + id, true); xhr.send(null); }</script>

Beispiel: Adressinformation

Die Callback-Funktion „setzeDaten“ wird nun über jede Änderung des Requests informiert. Sobald der Request abgeschlossen wurde, werden die Antwortdaten ausgelesen und in die HTML-Felder transferiert.

1. Request-Status überprüfenif(xhr.readyState == 4){...}

2. Antwortdaten ermitteln (z.B. „Max Mustermann;Berlin“ für id=1)daten = xhr.responseText.split(";");

1. Ziel-HTML-Element ermitteln und Daten setzendocument.getElementById("name").firstChild.data = daten[0];

JavaScript-Objekt vom Typ String[]

Die split-Funktion erzeugt aus einer Zeichenkette ein Array.

Beispiel: Adressinformation

Funktion „setzeDaten“

function setzeDaten(){

if(xhr.readyState == 4){

daten = xhr.responseText.split(";");

document.getElementById("name").firstChild.data = daten[0]; document.getElementById("ort").firstChild.data = daten[1];

}

}Max

MustermannBerlin

0 1

"Max Mustermann; Berlin"

split(";") daten

Aufgabe A2: Text in Großbuchstaben (AJAX)

Modifizieren Sie die Aufgabe A1 so, dass die Anfrage nun asynchron erfolgt. Ergänzen Sie die Antwortseite um einen Statusbereich, der den aktuellen Status der Anfrage anzeigt.