Table Of Content5. AJAX und Websockets
Teil 1: AJAX - Asynchronous JavaScript and XML
XMLHttpRequest-Klasse
Verschiedene Wege zum dynamischen Laden von Informationen
Übertragung von Text vs. XML
JSON – Übertragungsmodell
Teil 2: Websockets
Protokoll: HTTP und Upgrade
Clientseitige Schnittstellen
Beispiel für serverseitige Programmierung
von Websockets (für PHP)
Peter Sobe Internettechnologien 1
HTTP-Interaktionen (1)
Bislang:
Gewünschte Erweiterung:
Webinhalte laden durch
Interaktives Nachladen von
Eingabe einer URL
Webinhalten, ohne jedes mal
Klicken einer Link-URL eine neue Webseite zu laden.
Absenden eines Formulars
(GET, POST)
Beispiele:
Mausklick auf Bereich →
Webbrowser
Nachladen eines Details
HTTP- Nachladen von Hilfe- und
Protokoll Erklärungstexten
Formulare mit Input-
Webserver
Feldern, die nur in
Spezialfällen erscheinen
Immer Aufbau einer neuen
Webseite.
Peter Sobe Internettechnologien 2
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 wird:
Nachlade-Funktion innerhalb Client-Script (JavaScript), die wie der
Browser selbst HTTP-Protokollaktionen auslösen und Ergebnisse
entgegen nehmen kann.
Peter Sobe Internettechnologien 3
XMLHttpRequest-Klasse
Neue JavaScript-Klasse XMLHttpRequest
Webseite mit
XMLHttpRequest-
Browser
Javascript
Objekt
Web-Server
ggf. mit
Scripting
Peter Sobe Internettechnologien 4
AJAX Technologie
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 Internettechnologien 5
XMLHttpRequest – Ein Minimalbeispiel (1)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head> <title>JavaScript und HTTP</title>
<script type="text/javascript">
//<![CDATA[
window.onload = function()
{
var req = (window.XMLHttpRequest) ? new XMLHttpRequest() :
((window.ActiveXObject) ? new
ActiveXObject("Microsoft.XMLHTTP") : false );
req.open("GET", "dyntext.txt", true);
req.onreadystatechange = function()
{ if (req.readyState==4)
{ if (req.status == 200) // Fortsetzung auf der folgenden Seite
Peter Sobe Internettechnologien 6
XMLHttpRequest – Ein Minimalbeispiel (2)
Fortsetzung:
{ var d = document.getElementById("dyntext");
d.innerHTML = req.responseText;
}
}
} Das Skript setzt voraus, dass auf dem
req.send(null); Server eine Datei “dyntext.txt“
} vorhanden ist.
Deren Inhalt wird in die Webeseite
//]]>
eingebaut.
</script>
</head>
<body>
<div id=“dyntext"></div> // hier erscheint der nachgeladene Text
</body>
</html>
Peter Sobe Internettechnologien 7
XMLHttpRequest - Klasse
Verschiedene Klassen in Browsern, je nach Plattform
(Microsoft, Gecko-Browser, u.a.)
Instanziierung der Klasse für Gecko1-basierte Browser
(Mozilla, Firefox, Thunderbird):
var req = new XMLHttpRequest();
Instanziierung der Klasse für Microsoft-basierte Browser (IE):
var req = new ActiveXObject(“Microsoft.XMLHTTP“);
Zum Teil werden ausgewählte Versionen des XMLHTTP-Objekts
benötigt:
var req = new ActiveXObject(“Msxml2.XMLHTTP.5.0“);
1 Gecko ist eine s.g. Rendering Engine, die von der Mozilla Foundation entwickelt wurde
Peter Sobe Internettechnologien 8
XMLHttpRequest - Instanziierung (1)
Benutzung des ?-Operators in Zuweisungen:
rechte Seite wenn nicht erfüllt
var abs_x = (x>0) ? x : x*(-1);
Bedingung rechte Seite wenn erfüllt
Versuch, die geeignete Klasse zu instanziieren:
var req = (window.XMLHttpRequest) ? new XMLHttpRequest() :
((window.ActiveXObject) ?
new ActiveXObject(“Microsoft.XMLHTTP“): false );
Damit „laufen“ Ajax-Webseiten sowohl in Microsoft, als auch in Gecko-
Browsern
Peter Sobe Internettechnologien 9
XMLHttpRequest - Instanziierung (1)
try-catch Kaskade zum erreichen der bestmöglichen AJAX-
Unterstützung:
<script type="text/javascript">
//<
