AJAX

AJAX (Asynchronous JavaScript and XML)

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;
}

Einfaches AJAX Sample für Java Server Pages.

• index.jsp
• response.jsp
• AJAXWebApp.war

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 for den XMLHttpRequest zu erstellen. IE ist pingelig.