Inhalt: XMLHttpRequest-Klasse Verschiedene Wege zum dynamischen Laden von Informationen Übertragung von Text vs. XML JSON - Übertragungsmodell Peter Sobe 1 Internettechnologien 3. AJAX - Asynchronous JavaScript and XML Bislang: Webinhalte laden durch Eingabe einer URL Klicken einer Link-URL Absenden eines Formulars (GET, POST) HTTP- Protokoll Immer Aufbau einer neuen Webseite. Peter Sobe 2 Internettechnologien HTTP-Interaktionen (1) Webbrowser Webserver Gewünschte Erweiterung: Interaktives Nachladen von Webinhalten, ohne jedesmal eine neue Webseite zu laden. Beispiele: Mausklick auf Bereich → Nachladen eines Details Nachladen von Hilfe- und Erklärungstexten Formulare mit Input- Feldern, die nur in Spezialfällen erscheinen
22
Embed
3. AJAX - Asynchronous JavaScript and XMLsobe/Vorjahre/Vo_Internet_2011/3_Ajax.pdf · Nachlade-Funktion innerhalb Client-Script (Javascript), die wie der Browser selbst HTTP-Protokollaktionen
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Inhalt:
XMLHttpRequest-Klasse
Verschiedene Wege zum dynamischen Laden von Informationen
Übertragung von Text vs. XML
JSON - Übertragungsmodell
Peter Sobe 1Internettechnologien
3. AJAX -Asynchronous JavaScript and XML
Bislang:
Webinhalte laden durch
Eingabe einer URL
Klicken einer Link-URL
Absenden eines Formulars (GET, POST)
HTTP-
Protokoll
Immer Aufbau einer neuen Webseite.
Peter Sobe 2Internettechnologien
HTTP-Interaktionen (1)
Webbrowser
Webserver
Gewünschte Erweiterung:
Interaktives Nachladen von Webinhalten, ohne jedesmaleine neue Webseite zu laden.
Beispiele:
Mausklick auf Bereich → Nachladen eines Details
Nachladen von Hilfe- und Erklärungstexten
Formulare mit Input-Feldern, die nur in Spezialfällen erscheinen
Peter Sobe 3Internettechnologien
HTTP-Interaktionen (2)
Interaktives Anzeigen und dynamischer Webseitenaufbau sind bereits durch Javascript möglich.
Grenzen von Javascript (ohne die nachfolgende Erweiterung):
Zugriff auf Dateien der Client-Seite nicht möglich
Zugriff auf Dateien auf Serverseite bislang auch nicht möglich
Grenzen von PHP:
Zugriff auf Dateien und Datenanken ist immer mit dem vollständigen Laden einer PHP-Seite verbunden
Benötigt:Nachlade-Funktion innerhalb Client-Script (Javascript), die wie der Browser selbst HTTP-Protokollaktionen auslösen und Ergebnisse entgegen nehmen kann.
Neue Javascript-Klasse XMLHttpRequest
Peter Sobe 4Internettechnologien
XMLHttpRequest-Klasse
Webseite mit JavascriptBrowser XMLHttpRequest-
Objekt
ggf. mit Scripting
Web-Server
Asynchroneous Javascript and XML (AJAX)
ermöglicht Webseiten, die sich wie lokale Anwendungs-GUIs verhalten
Teilinhalte können verändert bzw. aktualisiert werden, ohne die ganze Webseite neu zu laden
Schnelleres Reagieren auf Nutzerinteraktionen, da weniger Daten übertragen werden
Übertragen von eingegebenen Nutzerdaten an den Server (ohne Neuladen der Seite, wie beim alten klassischen Formular-Submit)
Asynchrone Kommunikation mit dem Webserver, d.h. von der Oberfläche im zeitlichen Verhalten entkoppelt
Peter Sobe 5Internettechnologien
AJAX Technologie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
var msxml = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP„ ];
if (window.ActiveXObject) {
for (var i=0; i<msxml.length; i++) {
try {
ret = new ActiveXObject(msxml[i]);
break;
} catch(e) {}
}
}
//]]>
</script>
Peter Sobe 11Internettechnologien
XMLHttpRequest Instanziierung (2)
Laden einer Textdatei über XMLHttpRequest:
Funktion open(“GET“, “dateiname.txt“, …)
Entnahme des Inhalts aus Element responseText
Laden einer XML-Datei:
Funktion open(“GET”, “dateiname.xml”, …)
Entnahme der Daten aus responseXML
Traversal des DOM-Trees des XML-Objekts und Einbauen der Informationen in die Webseite (siehe seexhtml.xhtml aus Übungen)
Laden von HTML-formatierten Inhalten aus einer Datei:
Inhalte als Text anfordern, z.B. open(“GET“,“info.txt“, …)
Einfügen der formatierten Inhalte aus responseText als innerHTMLbereits existierender Elemente in der Webseite
Peter Sobe 12Internettechnologien
Wege zum dynamischen Laden (1)
Laden einer Skriptdatei über XMLHttpRequest:
Funktion open(“GET“, “dateiname.php“, …)
Bei Anforderung des Objekts kann serverseitig z.B. die Abfrage von Informationen aus einer Datenbank, oder das Lesen von Daten aus einer Datei und eine anschließende Formatierung erfolgen.
Kombination von server- und client-seitigem Scripting möglich
Peter Sobe 13Internettechnologien
Wege zum dynamischen Laden (2)
Ausgangspunkt ist das Request-Objekt req, das wie vorab beschrieben instanziiert wurde.
Es existiert eine Schnittmenge von Methoden die gleich arbeiten
req.setRequestHeader(key,value) – erlaubt das Setzen eines optionalen Request Headers
req.open(method, url, [syncFlag, username, password]) –der Request wird an die gewünschte Zieladresse (url) gestartet. Die Methode kann GET, POST, HEAD, PUT, DELETE sein. Das syncFlag gibt an, ob synchron (false) oder asynchron (true, Standardwert) gearbeitet werden soll. Eine Authentifikation mittels username, password ist bei PUT und DELETE notwendig.
Peter Sobe 14Internettechnologien
Methoden XMLHttpRequest / ActiveXObject (1)
Request-Objekt Methoden (Fortsetzung):
req.send(body|null) – erst mit send erfolgt das Absenden des Requests, danach kann unmittelbar die Antwort des Servers folgen, sofern eine asynchrone Übertragung vereinbart wurde.
Im body können Nutzerdaten an den Server übertragen werden.
req.abort() – beendet den aktuell ausgelösten Request
req.getResponseHeaders() – erzeugt eine Liste aller vorhandenen Header als key-value-Paare in einem String
req.getResponseHeader(name) – gibt den Wert des durch nameangefragten Headers zurück
Peter Sobe 15Internettechnologien
Methoden XMLHttpRequest / ActiveXObject (2)
Request-Objekt Methoden (Fortsetzung):
Ein gültiger Request muss mindestens mit den Methoden open() und send() vorbereitet werden.
Beispiel:
var req = new XMLHttpRequest;
req.open(“GET“,“beispiel.xml“);
req.send(null);
…
Bei asynchroner Übertragung wird Ergebnis von einer Funktion ausgelesen, die als req.onreadystatechange angemeldet wurde.
Siehe Eigenschaften.
Peter Sobe 16Internettechnologien
Methoden XMLHttpRequest / ActiveXObject (3)
Request-Objekt-Eigenschaften:
Auch hier gibt es eine funktional gleich gestaltete Schnittmenge
req.readyState – gibt den Status des Requests wieder:
0 – unititialized (noch kein open() ausgeführt)
1 – loading (wird gestartet, aber noch nicht abgeschickt durch send())
2 – loaded (bereit durch send() abgeschickt, aber Antwort steht noch aus)
3- interactive (die Übertragung durch den Server läuft und Teile der Antwort sind bereits in responseText bzw. responseXML verfügbar)
4 – complete (alles vollständig übertragen)
req.onreadystatechange – Platz für eine zuzuordnende Funktion, die bei jeder Änderung von req.status ausgeführt wird. Diese Funktion erlaubt, den Zeitpunkt zu finden, an dem das Ergebnis des Request vorliegt.
Peter Sobe 17Internettechnologien
Eigenschaften XMLHttpRequest / ActiveXObject (1)
Request-Objekt-Eigenschaften (Fortsetzung):
req.responseText – Inhalt des Bodys (Typ String) aus der Server-Antwort
req.responseXML – XML-Objekt aus der Server-Antwort, sofern eine XML-Datei angefordert wurde
req.status – numerischer Wert des Serverstatus am Ende der Übertragung, wenn readystate den Wert 4 enthält, z.B. 200 für erfolgreiche Übertragung, oder 400 für ‘bad request‘
req.statusText – eine Beschreibung des Status am Ende der Übertragung (readystate==4) als String
Peter Sobe 18Internettechnologien
Eigenschaften XMLHttpRequest / ActiveXObject (2)
var req.onreadystatechange = function()
{
if (req.readyState==4)
{
if (req.status==200)
{ /* Antwort weiter verarbeiten */}
else
{
alert(“Request Response Code:“+req.Status);
}
}
}
Peter Sobe 19Internettechnologien
BeispielÜberwachung eines asynchronen Requests
Laden einer Skriptdatei über XMLHttpRequest mit Übergabe von Parametern
oder Setzen eines Cache-Verfallsdatums auf ein früheres Datum:header(“Expires: Tue, 27. Jul 1997 06:00:00 GMT “);
header(“Last-Modified: “.gmdate(“D, d M Y H:i:s“).“ GMT“);
Peter Sobe 37Internettechnologien
Umschiffen von Cache-Problemen (2)
JSON - JavaScript Object Notation
Übertragung von speziell kodierten Strings anstatt XML
Strings werten als Text übertragen (z.B. req.responseText)
Für das Senden via JSON verpackt der Client die Datenstrukturen (bzw. Objekte) in diese Strings. Das geschieht mittels bereitgestellter Bibliotheksfunktionen. Bei Javascriptentstehen s.g. Literalobjekte
Client entnimmt Daten und baut Datenstrukturen (bzw. Objekte) wieder auf. Die Auswertung auf Client-Seite erfolgt mittels Bibliotheksfunktionen und erzeugt wiederum solche Literalobjekte.
Server (z.B. PHP-Skript) kann Datenstrukturen in JSON-Strings kodieren und als Ausgabe eines HTTP-Requestsbereitstellen. Dazu gibt es in PHP entsprechende Bibliotheksfunktionen.
Peter Sobe 38Internettechnologien
JSON – Übertragungsmodell (1)
Beispiel: ein AJAX-Client sendet eine Übersetzungsanfrage per GET mit dem zu übersetzenden Wort als Parameter:
Ein anderes Beispiel ist ein 2-dimensionales Array innerhalb des Clients: innere Dimension als assoziatives Array, äußere Dimension als numerisches Array.
Danach sieht der String wie folgt aus:{"items":[{"id":1,"titel":„schokolade","preis":1.05,„waehrung":"EUR"},{"id":2,"titel":„Gummibaeren","preis":1.99,"current":“CHF"},{"id":3,"titel":“Mandeltorte","preis":19.95,"current":“SKR"}]}
Dieser String könnte nun zum Server übertragen und dort gespeichert werden. Wird der String später wieder zum Client gesendet, kann er wie folgt wieder in die originale Datenstruktur gewandelt werden:
var warenkorb= JSON.parse(receivedText);
Alternativ kann man auch verwenden:
var warenkorb= eval(‘(‘+receivedText+‘)‘);
Peter Sobe 42Internettechnologien
JSON – Übertragungsmodell (5)
HTTP-Interaktion durch Klasse XMLHttpRequest im Javascript-Teil einer Webanwendung
Laden und Übertragen von Webinhalten damit losgelöst von Web-Browser Bedienung
Client Seite: Javascript
Server Seite: normaler HTTP-Server + XML Dateien + PHP oder anderer Skriptsprachen