KAILASH'S BLOGS: Javascript XMLHttpRequest

Introduction

The XMLHttpRequest Ajax XMLHttpRequest)object is used to exchange data between a browser and a Web server asynchronously. Here this blog provides a code example of how to create XMLHttpRequest object in javascript(javascript XHR) to read XML nodes.

Getting Started

XMLHttpRequest (XHR) is an API in the form of an object whose methods transfer data between a web browser and a web server. The object is provided by the browser's JavaScript environment. Particularly, the retrieval of data from XHR for the purpose of continually modifying a loaded web page is the underlying concept of Ajax design.

Despite the name, XHR can be used with protocols other than HTTP and data can be in the form of not only XML but also JSON, HTML, or plain text.

Creating the XMLHttpRequest Object

The following code snippet shows how to create the object of XMLHttpRequest.

 var browserObject = new XMLHttpRequest();

The above code will work in thein IE7, Chrome, Safari, Firefox, and Opera. If the web browser is IE5 or IE6, then the following code snippet shows how to create the object.

 var browserObject = new ActiveXObject("Microsoft.XMLHTTP");

The object varies from browser to browser that is why the browser-detecting script should be used before creating an instance of the XMLHttpRequest object.

 if(window.XMLHttpRequest){ // For IE7,Chrome, Mozilla, Safari, ...  
           var browserObject = new XMLHttpRequest();  
           }  
           else if(window.ActiveXObject){ // For Internet Explorer  
           var browserObject = new ActiveXObject("Microsoft.XMLHTTP");  
           }

JavaScript XMLHttpRequest Example

The XMLHttpRequest object can be used either synchronously or asynchronously for sending data. There are only a few differences between asynchronous and synchronous requests object.

The following code snippet shows how to use the XMLHttpRequest object for sending data synchronously.

 var xmlRequest=new XMLHttpRequest();//xhr request javascript(  
 //xmlhttprequest open method(xhr open)  
 xmlRequest.open('POST', "Pathof xml file", false); //xmlhttprequest post  
 xmlRequest.send(null);//xmlhttprequest send  
 var objXML=xmlHttp.responseXML//xmlhttprequest responsexml

Synchronous XMLHttpRequest on the main thread

In the preceding code snippet, an object is created using the new operator of JavaScript. Then the open method is invoked by using the request method.

The following code snippet shows how the request is made asynchronously.

 var xmlRequest=new XMLHttpRequest();//js xmlhttprequest Object  
 //xmlhttprequest open method(xhr open)  
 xmlRequest.open('GET', "Pathof xml file", true); //xmlhttprequest get  
 xmlRequest.send(null);//xmlhttprequest send  
 function asyncHandler(){  
      if(xmlRequest.readyState==4)  
      {  
           var objXML=xmlHttp.responseXML//xmlhttprequest responsexml  
      }  
 }

Javascript XMLHttpRequest async

In the preceding code snippet, we have defined the XMLHttpRequest object that sends the request asynchronously as the boolean value is set to true.

Reading File Asynchronously using the XMLHttpRequest

The following code reads an XML file and displays the elements on the web page.

 <!DOCTYPE HTML>  
 <HEAD>  
      <TITLE>JavaScript Read Excel File</TITLE>  
      <SCRIPT language="Javascript">  
      function getObject(strURL) {  
           var browserObject;  
           if(window.XMLHttpRequest){ // For IE7,Chrome, Mozilla, Safari, ...  
           var browserObject = new XMLHttpRequest();  
           }  
           else if(window.ActiveXObject){ // For Internet Explorer  
           var browserObject = new ActiveXObject("Microsoft.XMLHTTP");  
           }  
           return browserObject;  
      }  
      function ReadFile()   
      {  
           var request= getObject();  
           request.open("Get","D:\note.xml",true);  
           request.onreadystatechange=function()  
           {  
           alert(request.readyState);  
                if(request.readyState==4)  
                {  
                     document.getElementById('img1').src="";  
                     document.getElementById('img1').alt="The response has been received......";  
                     alert(request.status);  
                     if(request.status==200)  
                     {  
                          var xmlnodes=request.responseXML.getElementByTagName("name");  
                          for(i=0;i<xmlnodes.length;i++)  
                          {  
                               document.getElementById('message').innerHTML+='<b>'+xmlnodes[i].firstchild.nodeValue+'</b><br/>';  
                          }  
                     }  
                     else{  
                          alert("Request failed");  
                     }  
                }  
                else{  
                     document.getElementById('img1').src="progressbar.gif";  
                     alert(request.readyState);  
                }  
           }  
           request.send(null);  
      }  
 </SCRIPT>  
 </HEAD>  
 <BODY>  
      <H1> JavaScript Read Excel File </H1>  
      <label for="myfile">Select a file:</label>  
      <input type="file" id="myfile" name="myfile"><br>  
      <INPUT type="button" value="Read" onClick="ReadFile()" name="showadd"> <BR/>  
      <img id="img1" alt="click me"></img>  
      </p>  
      <div id="message"></div>  
 </BODY>  
 </HTML>

Thanks

Javascript XMLHttpRequest