AJAX

From no name for this wiki
Revision as of 09:23, 14 July 2008 by Admin (talk | contribs) (Resourcen)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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.

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