Daten als XML empfangen Ajax und Server-Programme bieten ein DOM-Document-Objekt, das bereits fertig ist.

Größe: px

Ab Seite anzeigen:

Download "Daten als XML empfangen Ajax und Server-Programme bieten ein DOM-Document-Objekt, das bereits fertig ist."

Petra Winkler
vor 8 Jahren
Abrufe

1 #4 Daten als XML empfangen HACK #4 Hack Daten als XML empfangen Ajax und Server-Programme bieten ein DOM-Document-Objekt, das bereits fertig ist. #4 Viele Techniken tauschen momentan Daten im XML-Format (Extensible Markup Language) aus, vor allem, weil es sich bei XML um ein standardisiertes und erweiterbares Format handelt, das in der Software-Welt umfassend unterstützt wird. Unterschiedliche Gruppen können daher existierende, bekannte Techniken einsetzen, um XML zu generieren, zu senden und zu empfangen, ohne dass die Software-Werkzeuge der einzelnen Austauschpartner aneinander angepasst werden müssen. Ein Beispiel ist ein GPS-Gerät (Global Positioning System), das die Daten, die es etwa über eine Wanderung oder eine Radtour aufgezeichnet hat, mit einer Web-Anwendung zum Verarbeiten von Standorten austauschen kann. Sie stecken einfach das USB-Kabel des GPS-Geräts an die USB-Schnittstelle Ihres Computers, starten die Software, die die Daten des Geräts in das Web schickt, und das war s. Beim Datenformat handelt es sich normalerweise um eine XML-Sprache, die bereits für GPS-Software definiert wurde. Die Web- Anwendung und das GPS-Gerät»sprechen die gleiche Sprache«. Dieses Buch soll jetzt keine ausführliche Einführung in XML bieten, außerdem haben Sie solche Textdateien sicherlich schon in der einen oder anderen Form gesehen. XML wird als»meta«sprache verwendet, die bestimmte Arten von Informationen beschreibt und kategorisiert. XML-Daten beginnen mit einer optionalen XML-Deklaration (z.b. <?xml version="1.0" encoding="utf- 8"?>), gefolgt von einem Wurzelelement und keinem oder mehreren Kindelementen. Ein Beispiel: <?xml version="1.0" encoding="utf-8"?> <gps> <gpsmaker>garmin</gpsmaker> <gpsdevice> Forerunner 301 </gpsdevice> </gps> Hier ist gps das Wurzelelement, und gpsmaker sowie gpsdevice sind Kindelemente. Ajax und das Request-Objekt können Daten als XML empfangen. Das ist ziemlich nützlich, wenn Antworten von Web-Services verarbeitet werden sollen, die XML benutzen. Sobald die HTTP-Anforderung abgeschlossen ist, besitzt das Request-Objekt eine Eigenschaft namens responsexml. Dieses 18 Kapitel 1: Ajax-Grundlagen

Software-Welt umfassend unterstützt wird.

2 Daten als XML empfangen #4 Objekt ist ein DOM-Document-Objekt, das Ihre Ajax-Anwendung benutzen kann. Hier ein Beispiel: function handleresponse( ){ if(request.readystate == 4){ if(request.status == 200){ var doc = request.responsexml;... Im vorherigen Code-Beispiel ist die Variable doc ein DOM-Document-Objekt, das eine ähnliche API zur Anzeigeseite eines Browsers anbietet. Dieser Hack empfängt XML von einem Server und initiiert dann ein bisschen DOM-Programmierung mit dem Document-Objekt, um einige Informationen aus dem XML zu holen. Falls Sie einfach nur den reinen XML-Text sehen wollen, benutzen Sie stattdessen die Eigenschaft request. responsetext. Die HTML-Datei für diesen Hack entspricht im Prinzip derjenigen, die in»daten mit dem Request-Objekt per POST an den Server schicken«[hack #2] verwendet wird, allerdings wurde am Ende ein div-element hinzugefügt, wo der Code Informationen über das zurückgegebene XML anzeigt. Hier ist der Code für die HTML-Seite: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <script type="text/javascript" src="js/hack3.js"></script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>empfangen der XML-Antwort</title> </head> <body> <h3>einige Fakten über sich...</h3> <form action="javascript:void%200" onsubmit="senddata( );return false"> <p>vorname: <input type="text" name="firstname" size="20"> </p> <p>nachname: <input type="text" name="lastname" size="20"> </p> <p>geschlecht: <input type="text" name="gender" size="2"> </p> <p>herkunftsland: <input type="text" name="country" size="20"> </p> <p><button type="submit">daten senden</button></p> <div id="docdisplay"></div> </form> </body> </html> Abbildung 1-3 zeigt, wie die Seite aussieht, bevor der Benutzer Informationen eingibt. Hack #4: Daten als XML empfangen 19

Dieser Hack empfängt XML von einem Server und initiiert dann ein bisschen DOM-Programmierung mit dem Document-Objekt, um einige Informationen aus dem XML zu holen.

3 #4 Daten als XML empfangen Abbildung 1-3: Alles eingerichtet, um XML zu empfangen Der JavaScript-Code in der Datei hack3.js sendet seine Daten mit POST an eine Server-Anwendung, die eine Antwort im XML-Format zurückschickt. Um der Kürze willen wurde der Schritt zur Feldvalidierung [Hack #22] übersprungen, allerdings sollten Web-Anwendungen, die Formulare verwenden, diese Aufgabe immer implementieren. Ebenso wie die anderen Beispiele in diesem Kapitel liefert das Server-Programm die Parameternamen und -werte wieder zurück an den Client, etwa in <params><firstname>bruce</firstname></params>.»daten mit dem Request- Objekt per POST an den Server schicken«[hack #2] zeigt einen Teil des Codes für die Server-Komponente, die den Rückgabewert zusammensetzt. Diese Technik dient unserem Zweck, indem sie ein einfaches Beispiel für die Programmierung von XML in einer Ajax-Anwendung zeigt: var request; var querystring; //nimmt die mit POST versendeten Daten auf function senddata( ){ setquerystring( ); var url=" httprequest("post",url,true); //Event-Handler für XMLHttpRequest function handleresponse( ){ if(request.readystate == 4){ if(request.status == 200){ var doc = request.responsexml; var info = getdocinfo(doc); stylizediv(info,document.getelementbyid(""docdisplay"")); else { 20 Kapitel 1: Ajax-Grundlagen

Um der Kürze willen wurde der Schritt zur Feldvalidierung [Hack #22] übersprungen, allerdings sollten Web-Anwendungen, die Formulare verwenden, diese Aufgabe immer implementieren.

4 Daten als XML empfangen #4 alert(""es ist ein Problem bei der Kommunikation zwischen dem ""+ ""XMLHttpRequest-Objekt und dem Server-Programm aufgetreten.""); //Ende des äußeren if /* Initialisieren eines Request-Objekts, das bereits konstruiert wurde */ function initreq(reqtype,url,bool){ /* Festlegen einer Funktion, die die HTTP-Antwort verarbeitet */ request.onreadystatechange=handleresponse; request.open(reqtype,url,bool); request.setrequestheader(""content-type"", ""application/x-www-form-urlencoded; charset=utf-8""); /* Funktioniert nur in Mozilla-basierten Browsern */ //request.overridemimetype(""text/xml""); request.send(querystring); /* Wrapper-Funktion zum Konstruieren eines Request-Objekts. Parameter: reqtype: Der HTTP-Anforderungstyp, wie etwa GET oder POST. url: Die URL des Server-Programms. asynch: Ob die Anforderung asynchron gesendet werden soll oder nicht. */ function httprequest(reqtype,url,asynch){ //Weggelassen...Siehe Hack #1 function setquerystring( ){ querystring=""; var frm = document.forms[0]; var numberelements = frm.elements.length; for(var i = 0; i < numberelements; i++) { if(i < numberelements-1) { querystring += frm.elements[i].name+"="+ encodeuricomponent(frm.elements[i].value)+"&"; else { querystring += frm.elements[i].name+"="+ encodeuricomponent(frm.elements[i].value); /* Dynamisches Angeben des Inhalts des div-elements. Wir können dieser Funktion Stilinformationen hinzufügen, falls wir die div-funktion aufpeppen wollen */ function stylizediv(bdytxt,div){ //DIV-Inhalt zurücksetzen div.innerhtml=""; div.style.backgroundcolor="yellow"; div.innerhtml=bdytxt; Hack #4: Daten als XML empfangen 21

*/ request.onreadystatechange=handleresponse; request.open(reqtype,url,bool); request.

5 #4 Daten als XML empfangen /* Beziehen von Informationen mithilfe eines XML-Dokument über ein DOM- Document-Objekts */ function getdocinfo(doc){ var root = doc.documentelement; var info = "<h3>name des Wurzelelements des Dokuments: <h3 />"+ root. nodename; var nds; if(root.haschildnodes( )) { nds=root.childnodes; info+= "<h4>namen/werte der Kindknoten des Wurzelknotens:<h4/>"; for (var i = 0; i < nds.length; i++){ info+= nds[i].nodename; if(nds[i].haschildnodes( )){ info+= " : \"+nds[i].firstchild.nodevalue+"\"<br />"; else { info+= " : Leer<br />"; return info; Mozilla Firefox kann die Funktion request.override MimeType( ) verwenden, um zu erzwingen, dass ein Antwortstrom als ein bestimmter MIME-Typ interpretiert wird, wie in request. overridemimetype("text/xml"). Das Request-Objekt des Internet Explorers besitzt diese Funktion nicht. Auch in Safari 1.3 funktioniert dieser Funktionsaufruf nicht. Nachdem der Code seine Daten mit POST verschickt und eine Antwort erhalten hat, ruft er eine Methode namens getdocinfo( ) auf, die einen string erzeugt, der einige Informationen über das XML-Dokument und seine Kindoder Subelemente anzeigt: var doc = request.responsexml; var info = getdocinfo(doc); Die Funktion getdocinfo( ) erhält einen Verweis auf das XML-Wurzelelement (var root = doc.documentelement;); sie erzeugt dann einen string, der den Namen des Wurzelelements und Informationen über alle Kindknoten oder -elemente anzeigt, wie etwa den Namen und den Wert des Kindknotens. Der Code übergibt diese Informationen dann an die Methode stylizediv( ). Die Methode stylizediv( ) benutzt das div-element am Ende der HTML- Seite, um die gesammelten Informationen dynamisch anzuzeigen: function stylizediv(bdytxt,div){ //div-inhalt zurücksetzen div.innerhtml=""; 22 Kapitel 1: Ajax-Grundlagen

$childnodes; info+= "<h4>namen/werte der Kindknoten des Wurzelknotens:<h4/>"; for (var i = 0; i < nds.length; i++){ info+= nds[i].nodename; if(nds[i].haschildnodes( )){ info+= " : \"+nds[i].firstchild.$

6 Daten als XML empfangen #4 div.style.backgroundcolor="yellow"; div.innerhtml=bdytxt; Abbildung 1-4 zeigt, wie die Webseite aussieht, nachdem die Anwendung die XML-Antwort empfangen hat. Abbildung 1-4: Schwelgen in XML-Rückgabewerten Die Textknoten, die die Anwendung zeigt, sind die Newline- Zeichen im zurückgelieferten XML. Die DOM-Kern-API, die von der JavaScript-Implementierung des Browsers angeboten wird, stattet Entwickler mit einem leistungsstarken Werkzeug zum Programmieren komplexer XML-Rückgabewerte aus. Hack #4: Daten als XML empfangen 23

Abbildung 1-4: Schwelgen in XML-Rückgabewerten Die Textknoten, die die Anwendung zeigt, sind die Newline- Zeichen im zurückgelieferten XML.

Ähnliche Dokumente

HTML5. Wie funktioniert HTML5? Tags: Attribute:

HTML5. Wie funktioniert HTML5? Tags: Attribute: HTML5 HTML bedeutet Hypertext Markup Language und liegt aktuell in der fünften Fassung, also HTML5 vor. HTML5 ist eine Auszeichnungssprache mit der Webseiten geschrieben werden. In HTML5 wird festgelegt,