Difference between revisions of "AJAX"
(→Hello World) |
(→Resourcen) |
||
(8 intermediate revisions by one other user not shown) | |||
Line 26: | Line 26: | ||
return 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 <code>blabla.innerHTML</code>. 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. === | === Einfaches AJAX Sample für Java Server Pages. === | ||
Line 112: | Line 150: | ||
response.getOutputStream().flush(); | response.getOutputStream().flush(); | ||
− | In der Regel ist Firefox flexibler, das xml | + | 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 <tt> document.getElementById('copy').innerHTML='myhtmltext';</tt> funktioniert bei HTML-Select Elementen in Internet Explorer nicht (Firefox aber schon). Dort muss man wie folgt vorgehen: | ||
+ | var myoption = new Option('id12','Meine Option'); | ||
+ | myHTMLDropDown.options[0] = myoption; | ||
+ | myHTMLDropDown.length = 1; | ||
+ | Das Objekt myHTMLDropDown ist ein HTML Select Objekt eines Webformulars. | ||
+ | |||
+ | == Resourcen == | ||
+ | * [[Javascript ]] | ||
+ | * [http://www.w3schools.com/jsref/default.asp Javascript und DOM-Object Referenz von W3Schools] | ||
+ | * [http://de.selfhtml.org/javascript/index.htm Selfhtml] |
Latest revision as of 10:23, 14 July 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:
var myoption = new Option('id12','Meine Option'); myHTMLDropDown.options[0] = myoption; myHTMLDropDown.length = 1;
Das Objekt myHTMLDropDown ist ein HTML Select Objekt eines Webformulars.