3. AJAX - Asynchronous JavaScript and XML HTTP

Transcription

3. AJAX Asynchronous JavaScript and XML
Inhalt:
 XMLHttpRequest-Klasse
 Verschiedene Wege zum dynamischen Laden von
Informationen
 Übertragung von Text vs. XML
 JSON - Übertragungsmodell
Peter Sobe
Internettechnologien
1
HTTP-Interaktionen (1)
Bislang:
Webinhalte laden durch
 Eingabe einer URL
 Klicken einer Link-URL
 Absenden eines Formulars
(GET, POST)
Webbrowser
HTTPProtokoll
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 InputFeldern, die nur in
Spezialfällen erscheinen
Immer Aufbau einer neuen
Webseite.
Peter Sobe
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:
Nachlade-Funktion innerhalb Client-Script (Javascript), die wie der
Browser selbst HTTP-Protokollaktionen auslösen und Ergebnisse
entgegen nehmen kann.
Peter Sobe
3
XMLHttpRequest-Klasse
Neue Javascript-Klasse XMLHttpRequest
Browser
Webseite mit
Javascript
XMLHttpRequestObjekt
Web-Server
ggf. mit
Scripting
Peter Sobe
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
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
6
XMLHttpRequest – Ein Minimalbeispiel (2)
Fortsetzung:
{ var d = document.getElementById("dyntext");
d.innerHTML = req.responseText;
}
}
}
req.send(null);
Das Skript setzt voraus, dass auf dem
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
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
8
XMLHttpRequest Instanzzierung (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 GeckoBrowsern
Peter Sobe
9
XMLHttpRequest Instanziierung (1)
try-catch Kaskade zum erreichen der bestmöglichen AJAXUnterstützung:
//<![CDATA[
if (window.ActiveXObject) {
try {
req = new ActiveXObject(“Msxml2.XMLHTTP.5.0“);
} catch (e) {
try {
} catch (e) {
try {
} catch (e) {
try {
req = new ActiveXObject(“Microsoft.XMLHTTP“);
} catch (e) { req = false; }
}}}
}…
Peter Sobe
10
XMLHttpRequest Instanziierung (2)
try-catch Kaskade über Array:
//<![CDATA[
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
11
Wege zum dynamischen Laden (1)
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 innerHTML
bereits existierender Elemente in der Webseite
Peter Sobe
12
Wege zum dynamischen Laden (2)
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
13
Methoden XMLHttpRequest / ActiveXObject (1)
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
14
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 name
angefragten Headers zurück
Peter Sobe
15
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
16
Eigenschaften XMLHttpRequest / ActiveXObject (1)
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
17
Eigenschaften XMLHttpRequest / ActiveXObject (2)
Request-Objekt-Eigenschaften (Fortsetzung):
 req.responseText – Inhalt des Bodys (Typ String) aus der ServerAntwort
 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
18
Beispiel
Überwachung eines asynchronen Requests
var req.onreadystatechange = function()
{
if (req.readyState==4)
{
if (req.status==200)
{ /* Antwort weiter verarbeiten */}
else
{
alert(“Request Response Code:“+req.Status);
}
}
}
Peter Sobe
19
Beispiel für einen GET-Request
Laden einer Skriptdatei über XMLHttpRequest mit Übergabe von
Parametern
Funktion
open(“GET“, “dateiname.php?param1=wert1&param2=wert2“, …)
Parameterauswertung im PHP-Skript:
Ein GET-Request
sendet die
übergebenen Daten
mit der URL mit.
…
<?php
if (isset($_GET[“param1“]))
// weitere Verwendung von $_GET[“param1“], z.B. als DB Abfrage
$sql = “SELECT name FROM tabelle WHERE wohnort=\“ “.
$_GET[“param1“].“\“ “;
$ergebnis = mysql_query($sql, $dbverbindung);
…
echo “$zeile[i]“;
?>
Peter Sobe
20
Beispiel für einen POST-Request
Methodenaufrufe zur Zusammenstellung des Requests
req.open(“POST“, “dateiname.php?“, …);
req.setRequestHeader(“Content-Type“,
“applicatio/x-www-form-urlencoded“);
req.send(“x=1&y=3&z=5“);
Parameterauswertung im PHP-Skript:
Ein POST-Request
…
sendet die
<?php
übergebenen Daten
$x=0; $y=0; $z=1;
mit dem Body-Block.
if (isset($_POST[“x“]) $x=$_POST[“x“];
if (isset($_POST[“y“]) $y=$_POST[“y“];
if (isset($_POST[“z“]) $z=$_POST[“z“];
$erg=($x + $y) * $z ;
echo “ ($x + $y) * $z ergibt $erg \n“;
…
Peter Sobe
21
AJAX Beispiel (1)
Ein AJAX-“Taschen“-Rechner
…
<head> <title>JavaScript und HTTP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src=“ajaxrechner.js" type="text/javascript"></script>
</head>
<body>
<form>
<input type="text" name="a" />
<select name="o">
<option value="p">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
Beispiel aus: J. Gamperl: AJAX- Web2.0 in der Praxis, Galileo Press, 2006
Peter Sobe
22
AJAX Beispiel (2)
Ein AJAX-“Taschen“-Rechner (Fortsetzung)
…
<input type="text" name="b" />
<input type="button" value=" = "
onclick=" ajaxRechner(this.form)" />
<input type="text" name="ergebnis" />
</form>
</body>
</html>
Javascript (in eigenständiger Datei “ajaxrechner.js“) …
Peter Sobe
23
AJAX Beispiel (2)
var ajaxRechner = function(f)
{ var query = "a="+escape(f.a.value)+"&"+ "b="+escape(f.b.value)+"&"+
"o="+escape(f.o.options[f.o.selectedIndex].value);
var xmlhttp = new ajaxRequest(
"rechner.php",
function()
{ var r = xmlhttp.req;
if (r.readyState==4)
{ f.ergebnis.value = (r.status == 200)
? r.responseText : "ERROR";
}
},
"POST", query,
["Content-Type","application/x-www-form-urlencoded"]
);
xmlhttp.doRequest();
}
Peter Sobe
24
AJAX Beispiel (3)
Klasse ajaxRequest:
ajaxRequest = function(u,f,m,b,h,s)
{
this.url
= u;
this.wState = f || function() { };
this.method = m || "GET";
this.body = b || null;
this.headers = h || false;
this.sync = s || true;
this.abortReq = false;
this.req = (window.XMLHttpRequest) ? new XMLHttpRequest() :
((window.ActiveXObject) ?
new ActiveXObject("Microsoft.XMLHTTP") : false );
…
Peter Sobe
25
AJAX Beispiel (4)
Klasse ajaxRequest (Fortsetzung)
this.doRequest = function()
{ this.req.open(this.method,this.url,this.sync);
if (this.headers)
{
for (var i=0; i<this.headers.length; i+=2)
{ this.req.setRequestHeader(this.headers[i],this.headers[i+1]);
}
}
this.req.onreadystatechange = this.wState;
(!this.abortReq) ? this.req.send(this.body) : this.req.abort();
}
}
Peter Sobe
26
AJAX Beispiel (5)
Rechner.php:
<?php
if ( $_POST["a"]!="" && $_POST["b"]!="" )
{ $a = $_POST["a"];
$b = $_POST["b"];
switch ($_POST["o"])
{ case "p": print $a+$b; break;
case "-": print $a-$b; break;
case "*": print $a*$b; break;
case "/": print $a/$b; break;
}
}
else print "FALSCHER INPUT";
?>
Peter Sobe
27
Wiederholung: Asynchrone Natur von XMLHttpRequest
Zeit
Web-Client
result = req.responseText;
req.open(“POST“,“ziel.php“);
req.send(“name=Meier&kontonr=“4711815“);
Ajax-Engine
HTTP-ProtokollNachrichten
Web-Server
Peter Sobe
28
Wiederholung: Zustände von XMLHttpRequest
0
unitialized
req.open(“POST“,“ziel.php“);
1
loading
Client-Script:
Zusammenstellen
des Requests
req.send(“name=Meier&kontonr=“4711815“);
2
loaded
Client-Script:
ggf. Abbrechen, optional kann eine
Fortschrittsanzeige durch
zeitgesteuerte Funktionen erfolgen
Server-Antwort begonnen
3
interactive
Server-Antwort beendet
Client-Script:
Verarbeiten der
Antwort, bzw. Fehlerbehandlung
Peter Sobe
4
complete
29
Übertragung von Text vs. XML
Bisher zwei Möglichkeiten zur Datenübertragung mit dem
XMLHttpRequest
Anfordern von Daten und Rückgabe
 als responseText
 als reponseXML
Übertragen von Daten
 als url-encoded Text mit einen GET-Request
 als url-encoded String (Text) im send-body (POST Request)
 als XML-Datenstruktur im send-Body (POST Request)
Peter Sobe
30
Eingabeparameter als XML
Übertragen der XML-Datenstruktur im send-Body (POST Request)
var req = XMLHttpRequest;
req.open(“POST“,“beispiel.php“);
req.setRequestHeader(“Content-Type“,“text/xml“);
req.onreadystatechange = function() { … }
var namestr = encodeURI(namefeld.value); // angenommene
var alterstr = encodeURI(alterfeld.value); // Formular Text-Inputs
var xmlbody = “<search>“;
xmlbody += “<name>“+namstr+“</name>“;
xmlbody += “<alter>“+alterstr+“</alter>“;
xmlbody += “</search>“;
req.send(“<?xml version=‘1.0‘ encoding=‘UTF-8‘?>“+xmlbody);
Peter Sobe
31
Rückgabe als XML
Anlegen einer Variablen zur Aufnahme des XML-Objekts
var xmlobj = req.responseXML;
Danach Auslesen der Elemente aus dem XML-Dokument. Das
konkrete Vorgehen ist stark abhängig von der XML-Struktur.
Ein einfaches Beispiel:
var element = xmlobj.getElementsByTagName(‘abflug‘).item(0);
var value = element.firstChild.data;
Korrespondiert z.B. mit der <flugplan ort=“FRA“>
empfangenen Struktur:
<abflug>Moscow</abflug>
<abflug>Paris</abflug>
<ankunft>Stockholm</ankunft>
</flugplan>
Peter Sobe
32
XML auf Server-Seite (1)
Möglichkeit 1: Manuelles Zusammenstellen des XML-Strings mit echo
und printf Anweisungen.
<?
$stationsmeldung = array(“ort“=>“Stavanger“, “windr“=>“Sued“,
“windst“=>“4“, “wetterer“=>“Regenschauer“,
“temp“=>“9“, “druck“=>“1009“ );
…
echo “<stationsmeldung> \n“;
while($wert=each($stationsmeldung))
{ echo “<“.$wert[“key“].“>“;
echo $wert[“value“];
echo “</“.$wert[“key“].“>“;
}
echo “</stationsmeldung> \n“;
?>
Peter Sobe
33
Möglichkeit 2: Benutzen von Bibliotheksklassen,z.B. DOM-XML
Methoden sind nach dem Vorbild der DOM-Funktionen von Javascript
gestaltet
<?
$stationsmeldung = array(“ort“=>“Stavanger“, “windr“=>“Sued“,
“windst“=>“4“, “wetterer“=>“Regenschauer“,
“temp“=>“9“, “druck“=>“1009“ );
…
$dom = domxml_new_doc(‘1.0‘, ‘utf-8‘);
// Root Knoten erstellen
$root = $dom->create_element('stationsmeldung');
$dom->append_child($root);
…
Peter Sobe
34
Möglichkeit 2 (Fortsetzung) : Bibliotheksklassen DOM-XML
…
while($wert=each($stationsmeldung))
{
$tag_node = $dom->create_element($wert[“key“]);
$root->append_child($tag_node);
$tag_node->append_child( $dom->create_text_node($wert[“value“]));
}
// Ausgabe
echo $dom->saveXML();
?>
Neben DOM-XML gibt es: DOM, libxml, SimpleXML und vermutlich noch
weitere PHP Bibliotheken
Peter Sobe
35
Umschiffen von Cache-Problemen (1)
Daten, die mehrmals per AJAX-Request angefordert werden,
haben oft die gleiche URL und unterliegen damit Caching.
 Cache des Browsers
 Cache in Proxy-Servern
Es wird veralteter Inhalt zurückgegeben, wenn die Daten
serverseitig aktualisiert werden.
Gegenmittel auf Client-Seite:
Setzen zusätzlicher Request-Header:
req.setRequestHeader(“Pragma“,“no-cache“);
req.setRequestHeader(“Cache-Control“,“must-revalidate“);
oder Anhängen zusätzlicher Dummy-Parameter:
var zusatz = new Date().getTime();
req.open(“GET“,“beispiel.php“+zusatz);
Peter Sobe
36
Umschiffen von Cache-Problemen (2)
Gegenmittel auf Server-Seite:
Setzen zusätzlicher Response-Header:
<?php
header(“Pragma“,“no-cache“);
header(“Cache-Control: no-store, no-cache, must-revalidate“);
header(“Cache-Control: post-check=0, pre-check=0, false“);
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
37
JSON – Übertragungsmodell (1)
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 Javascript
entstehen 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 JSONStrings kodieren und als Ausgabe eines HTTP-Requests
bereitstellen. Dazu gibt es in PHP entsprechende
Bibliotheksfunktionen.
Peter Sobe
38
Beispiel: ein AJAX-Client sendet eine Übersetzungsanfrage per GET
mit dem zu übersetzenden Wort als Parameter:
Client / Javascript:
$word = “funicular“
req.open(“GET“,“server.php?translate=“+$word,true);
req.send();
Server / PHP:
<?php
require_once(“json.php“);
$word = $_GET[‘translate‘];
// some magic translation algorithm
$german = “seilbahn“; $spanish=“el funicular“; $french=“funiculaire“;
$result = array (“g“=>$german, “s“=>$spanish, “f“=>$french);
$json = new Services_JSON();
echo $json->encode($result);
?>
Peter Sobe
39
Beispiel (Fortsetzung)
Client / Javascript:
in der onreadystatechange-Funktion
if (req.readystate==4)
{ if (req.status==200)
{ var translation = eval ( ‘(‘+req.responseText+‘)‘ );
d_german.innerHTML= translation.g;
d_french.innerHTML= translation.f;
d_spanish.innerHTML= translation.s;
}
else {
d_german.innerHTML= “Translation Error“;
d_french.innerHTML= “Translation Error“;
d_spanish.innerHTML= “Translation Error“;
}
}
Peter Sobe
40
Übertragungsformat des Beispiels:
{“g“: “seilbahn“,“s“:“el funicular“,“f“:“funiculaire“}
Im Beispiel wurde ein assoziatives Array kodiert.
Ein anderes Beispiel ist ein 2-dimensionales Array innerhalb des Clients:
innere Dimension als assoziatives Array, äußere Dimension als
numerisches Array.
var warenkorb = {
“items“: [ {id:1, titel:“Schokolade“, preis:“1.05“waehrung:“EUR“ },
{id:2, titel:“Gummibaeren“, preis:“1.99“, waehrung:“CHF“},
{id:3, titel:“Mandeltorte “, preis:“29.95“, waehrung:“SKR“ } ]
};
…
JSON.stringify(warenkorb);
Peter Sobe
41
…
var json_string = JSON.stringify(warenkorb);
Danach sieht der String wie folgt aus:
{"items":[{"id":1,"titel":„schokolade","preis":1.05,„waehrung":"EUR"},{"id":2,"tit
el":„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
42
AJAX - Zusammenfassung
 HTTP-Interaktion durch Klasse XMLHttpRequest im JavascriptTeil einer Webanwendung
 Laden und Übertragen von Webinhalten damit losgelöst von WebBrowser Bedienung
 Client Seite: Javascript
 Server Seite: normaler HTTP-Server + XML Dateien + PHP oder
anderer Skriptsprachen
Peter Sobe
43

3. AJAX - Asynchronous JavaScript and XML HTTP

Transcription

Similar documents

3 Datenbankzugriff in Java

Naples News Naples News August/September August/September

Lösungen der Aufgaben zur Klausurvorbereitung

Serie Real Basic (Folge 1) - Monkeybread Software Blog

msvcrt.dll error message

BIOENERGETISCHE ANALYSE