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

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.

• 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 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.

Resourcen

• Javascript
• Javascript und DOM-Object Referenz von W3Schools
• Selfhtml