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.
Syntax
xmlhttp = new XMLHttpRequest();
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
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 −
|
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". |
XML DOM XMLHttpRequest Object Methods
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 −
|
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
<?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>kennedynkpara@xyz.com</Email> </Employee> <Employee category = "Non-Technical"> <FirstName>Stephanie</FirstName> <LastName>Francis</LastName> <ContactNo>1234667898</ContactNo> <Email>stephaniefrancis@xyz.com</Email> </Employee> <Employee category = "Management"> <FirstName>Justice</FirstName> <LastName>Douglas</LastName> <ContactNo>1234562350</ContactNo> <Email>justicedouglas@xyz.com</Email> </Employee> </Company>
Retrieving specific information of a resource file
<!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
Before removing the attributeNS: en After removing the attributeNS: null
Retrieving header information of a resource file
<!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
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
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.