Difference between revisions of "AJAX"
(→onreadystatechange Eventhandler) |
|||
Line 41: | Line 41: | ||
=== onreadystatechange Eventhandler === | === onreadystatechange Eventhandler === | ||
− | Wichtiges Pattern von AJAX ist <code>blabla.innerHTML</code>. Der onreadystate changed | + | Wichtiges Pattern von AJAX ist <code>blabla.innerHTML</code>. Der onreadystate changed Eventhandler kann wie folgt gestaltet werden: |
function stateChanged() | function stateChanged() |
Revision as of 19:39, 10 May 2008
AJAX (Asynchronous JavaScript and XML)
Contents
Hello World
Erstellen des XMLHttpRequest Objekts
Folgende Funktion erstellt das XMLHttpRequest Ojekt:
function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }
Request absetzen mit XMLHttpRequest
Der Request kann wie folgt wie folgt ausgelöst werden:
xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url='sampleurl.aspx?id=blabla' xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null);
onreadystatechange Eventhandler
Wichtiges Pattern von AJAX ist blabla.innerHTML
. Der onreadystate changed Eventhandler kann wie folgt gestaltet werden:
function stateChanged() { // only if req shows "complete" if (req.readyState == 4) { // only if "OK" if (req.status == 200) { response = req.responseXML.documentElement; resptext = response.getElementsByTagName('responsetext')[0].firstChild.data; rowindex = response.getElementsByTagName('row')[0].firstChild.data; rowindex = rowindex - 1; var tbl = document.getElementById('tblSample'); tbl.rows[rowindex].cells[1].innerHTML = resptext; } else { alert("There was a problem retrieving the XML data:\n" + req.statusText); } } }
Wichtig ist der MIME_TYPE auf dem Server. Ihn immer auf text/xml setzen. Die Codierung ist auch wichtig (UNICODE), sonst funktionierts mit IE in der Regel nicht.
Einfaches AJAX Sample für Java Server Pages.
Parsen eines Response XML Dokuments
Ein Request liefert ein XML Dokument. Dieses wird dann in der statechanged
Methode geparst und in einen HTML Table
transformiert.
txt="<table>"; x=xmlhttp.responseXML.documentElement.getElementsByTagName("book"); for (i=0;i<x.length;i++) { txt=txt + "<tr>"; xx=x[i].getElementsByTagName("title"); { try { txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; } catch (er) { txt=txt + "<td> </td>"; } } xx=x[i].getElementsByTagName("author"); { try { txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; } catch (er) { txt=txt + "<td> </td>"; } } txt=txt + "</tr>"; } txt=txt + "</table>"; document.getElementById('copy').innerHTML=txt;
Node Value holen
Aus dem XML Snippet <compname>CocaCola</compname>
den Node-Value (CocaCola) auslesen.
var xmlDoc=xmlHttp.responseXML.documentElement; document.getElementById("companyname").innerHTML = xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;
XML auf dem Server erzeugen (MIME)
Damit Firefox das XML Parsen kann, muss der Contenttype gesetzt werden. Mit Java sieht es wie folgt aus:
response.setContentType("text/xml");
Dann erst kann die Funktion xmlhttp.responseXML.documentElement aufgerufen werden. Reicht Text, dann muss der MIME Type nicht gesetzt werden: xmlhttp.responseText. Anbei der Aufbau eines XML mit DOM (Java):
//XML Dokument erstellen DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); DocumentBuilder builder = factory.newDocumentBuilder(); Document document = builder.newDocument(); Element root = document.createElement("queryresult"); document.appendChild(root); Text textNode = document.createTextNode(buffer.toString()); root.appendChild(textNode);
Mit dieser Funktion kann der DOM in den Outputstream des Response gerendert werden:
private void printDoc(Document doc, OutputStream os) { try { DOMSource domSource = new DOMSource(doc); StreamResult result = new StreamResult(os); TransformerFactory tf = TransformerFactory.newInstance(); Transformer transformer = tf.newTransformer(); transformer.transform(domSource, result); } catch (TransformerException ex) { ex.printStackTrace(); throw new OASISRuntimeException(ex); } }
Hier das Rendern in einem Servlet:
response.setContentType(PresentationLayerConstants.MIMETYPE_XML); this.printDoc(document,response.getOutputStream()); response.getOutputStream().flush();
In der Regel ist Firefox flexibler, das xml Property des XMLHttpRequest zu erstellen. IE ist pingelig.
Hinzufügen von Options in einem HTML Select
Das document.getElementById('copy').innerHTML='myhtmltext'; funktioniert bei HTML-Select Elementen in Internet Explorer nicht (Firefox aber schon). Dort muss man wie folgt vorgehen:
Option myoption = new Option('id12','Meine Option'); myHTMLDropDown.options[0] = myoption; myHTMLDropDown.length = 1;
Das Objekt myHTMLDropDown ist ein HTML Select Objekt eines Webformulars.