Javascript AJAX - XML DOM HTTP Request

.Net AJAX extension is a easy and good tool, however there are two projects I have worked on cannot use .Net AJAX to accomplish the job (well, one was done before the AJAX 1.0 extension released). First project was in old fashion ASP. The second one is in .NET 2.0, but it has the application hold on an intra network machine, which for security reason has no internet access. However it requires a call to a web services on the client side.

Therefore javascript AJAX comes in by using XML DOM HTTP Request technique. Note that for javascript wa of AJAX, same as .NET AJAX 1.0, cannot call cross domain web services easily (.Net AJAX extension cannot call it at all without writing a proxies!). In Internet explorer, adding the external web service to the trusted site list will allow cross domain access.

Step 1: define XMLHTTP object variable

var xmlHttp;

Step 2: Create your action - in this example I will retrieve a list of book titles from the BibleWebservice provided by http://www.webservicex.net/.

function Button1_onclick() { //Create SOAP Envelope var xmlObj = new ActiveXObject("Msxml2.DOMDocument") ; var sXml = "<?xml version=\"1.0\" ?>" ; sXml += "<soap:Envelope " sXml += "xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"" ; sXml += "xmlns:xsd=\http://www.w3.org/2001/XMLSchema/" ; sXml += "xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">" ; sXml += "<soap:Body>" ; sXml += "<GetBookTitles xmlns=\"http://www.webserviceX.NET/\">"; sXml += "</GetBookTitles></soap:Body></soap:Envelope>" ; xmlObj.loadXML(sXml) ; xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Add Post, SOAP Action and Content-Type to the request header xmlHttp.Open ("Post", "http://www.webservicex.net/BibleWebservice.asmx", false) ; xmlHttp.setRequestHeader("SOAPAction", "http://www.webserviceX.NET/GetBookTitles") ; xmlHttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8" ) ; // When response received call OnRetrieveComplete method xmlHttp.onreadystatechange = OnRetrieveComplete; // Send request xmlHttp.Send(xmlObj.xml) ; }

Step 3: Create response handler

function OnRetrieveComplete(){ // readystate4 = Completed if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ // Get response and perform your action var xmlResponse = xmlHttp.responseXML; var bookXML = xmlResponse.selectSingleNode("soap:Envelope/soap:Body/ GetBookTitlesResponse/GetBookTitlesResult").text; var bookXMLObj = new ActiveXObject("Msxml2.DOMDocument") ; bookXMLObj.loadXML(bookXML); var bookNodes = bookXMLObj.selectNodes("NewDataSet/Table"); for (i=0; i<bookNodes.length; i++) { ... do whatever you want } } }