XML DOM | XMLHttpRequest Object

Hello folks! welcome back to a new section of our tutorial on XML DOM. In this tutorial guide, we will be discussing about the XML DOM XMLHttpRequest Object.

The XMLHttpRequest object establishes a medium between a web page's client-side and server-side that can be used by many scripting languages like VBScript, JScript, JavaScript and other browsers to transfer and manipulate the XML data.

With the XML DOM XMLHttpRequest object, it is possible to update part of a web page without reloading the whole page, request and receive the data from a server after the page has been loaded and send the data to the server.

READ: XML DOM | Attribute Object

Syntax

The following below is the syntax to use the XML DOM XMLHttpRequest Object -

xmlhttp = new XMLHttpRequest();

To handle all browsers, including Internet Explorer 5 and Internet Explorer 6, check if the browser supports the XMLHttpRequest Object as shown below -

if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
   xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

XML DOM XMLHttpRequest Object Attributes

Following table below lists the attributes of the XML DOM XMLHttpRequest Object -

S.No.	Attribute & Description
1	onreadystatechange It is an event based property which is set on at every state change.
2	readyState This describes the present state of the XMLHttpRequest object. There are five possible states of the readyState property − readyState = 0 − means request is yet to initialize. readyState = 1 − request is set. readyState = 2 − request is sent. readyState = 3 − request is processing. readyState = 4 − request is completed.
3	responseText This property is used when the response from the server is a text file.
4	responseXML This property is used when the response from the server is an XML file.
5	status Gives the status of the Http request object as a number. For example, "404" or "200".
6	statusText Gives the status of the Http request object as a string. For example, "Not Found" or "OK".

READ: XML DOM | CDATASection Object

XML DOM XMLHttpRequest Object Methods

The following table below lists the methods of the XML DOM XMLHttpRequest Object -

S.No.	Method & Description
1	abort() Terminates the current request made.
2	getAllResponseHeaders() Returns all the response headers as a string, or null if no response has been received.
3	getResponseHeader() Returns the string containing the text of the specified header, or null if either the response has not yet been received or the header doesn't exist in the response.
4	open(method,url,async,uname,pswd) It is used in conjugation with the Send method to send the request to the server. The open method specifies the following parameters − method − specifies the type of request i.e. Get or Post. url − it is the location of the file. async − indicates how the request should be handled. It is boolean value. where, 'true' means the request is processed asynchronously without waiting for a Http response. 'false' means the request is processed synchronously after receiving the Http response. uname − is the username. pswd − is the password.
5	send(string) It is used to send the request working in conjugation with the Open method.
6	setRequestHeader() Header contains the label/value pair to which the request is sent.

Example

Following are the node.xml contents -

<?xml version = "1.0" encoding = "UTF-8" standalone = "no" ?>
<Company>
   <Employee category = "Technical" id = "firstelement">
      <FirstName>Kennedy</FirstName>
      <LastName>Nkpara</LastName>
      <ContactNo>1234567890</ContactNo>
      <Email>[email protected]</Email>
   </Employee>
   
   <Employee category = "Non-Technical">
      <FirstName>Stephanie</FirstName>
      <LastName>Francis</LastName>
      <ContactNo>1234667898</ContactNo>
      <Email>[email protected]</Email>
   </Employee>
   
   <Employee category = "Management">
      <FirstName>Justice</FirstName>
      <LastName>Douglas</LastName>
      <ContactNo>1234562350</ContactNo>
      <Email>[email protected]</Email>
   </Employee>
</Company>

Retrieving specific information of a resource file

Following example below illustrates how to retrieve a specific information of a resource file using the getResponseHeader() method and the readState property -

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv = "content-type" content = "text/html; charset = iso-8859-2" />
         <script>
            function loadXMLDoc() {
               var xmlHttp = null;
               if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
                  xmlHttp = new XMLHttpRequest();
               }
               else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
               }

               return xmlHttp;
            }

            function makerequest(serverPage, myDiv) {
               var request =  loadXMLDoc();
               request.open("GET", serverPage);
               request.send(null);

               request.onreadystatechange = function() {
                  if (request.readyState == 4) {
                     document.getElementById(myDiv).innerHTML = request.getResponseHeader("Content-length");
                  }
               }
            }
      </script>
   </head>
   <body>
      <button type = "button" onclick="makerequest('/dom/node.xml', 'ID')">Click me to get the specific ResponseHeader</button>
      <div id = "ID">Specific header information is returned.</div>
   </body>
</html>

Output

Save this file as elementattribute_removeattributens.html on the server's path (this file and the node.xml should be on the same path in your server). This is going to give us the following output below -

Before removing the attributeNS: en
After removing the attributeNS: null

READ: XML DOM | Entity Object

Retrieving header information of a resource file

The following example below demonstrates how to retrieve the header information of a resource file using getAllResponseHeader() method and the readyState property -

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
      <script>
         function loadXMLDoc() {
            var xmlHttp = null;

            if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
               xmlHttp = new XMLHttpRequest();
            } else if(window.ActiveXObject) //  for Internet Explorer 5 or 6 {
               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            return xmlHttp;
         }

         function makerequest(serverPage, myDiv) {
            var request =  loadXMLDoc();
            request.open("GET", serverPage);
            request.send(null);
            request.onreadystatechange = function() {
               if (request.readyState == 4) {
                  document.getElementById(myDiv).innerHTML = request.getAllResponseHeaders();
               }
            }
         }
      </script>
   </head>
   <body>
      <button type = "button" onclick = "makerequest('/dom/node.xml', 'ID')">
         Click me to load the AllResponseHeaders</button>
      <div id = "ID"></div>
   </body>
</html>

Output

Save this file as http_allheader.html on the server's path (this file and node.xml should be on the same path in your server). This is going to give us the following output below -

Date: Tue, 31 Aug 2021 07:48:07 GMT Server: Apache Last-Modified: 
      Tue, 03 Aug 2021 06:35:30 GMT Etag: "464bf9-2af-50223713b8a60" Accept-Ranges: bytes Vary: Accept-Encoding,User-Agent 
      Content-Encoding: gzip Content-Length: 256 Content-Type: text/xml 

READ: XML DOM | Notation Object

Alright guys! This is where we are going to be rounding up for this tutorial post. In our next tutorial, we will be studying about the XML DOM DOMException Object.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.