AJAX - The XMLHttpRequest Object

Introduction


XMLHttpRequest (XHR) is an API used by different web browsers scripting languages like JavaScript, VBScript, and JScript to send/receive and manipulate the XML data to and from a webserver with the help of HTTP. The data we get from XMLHttpRequest is often provided by the databases installed in the backend.

The XMLHttpRequest object has been available to us since 2000 but discovered entirely in 2005 when AJAX and Web 2.0 became popular.

This blog will deep dive into XMLHttpRequest Object, and we will see how to use it and where to use it.

 

XMLHttpRequest Object

 

The Ajax XMLHttpRequest object can make many things easier. 

Using this object, you can make HTTP requests and receive responses from the server without requiring the user to submit the page to the server.

Using this object, you can make a very user interactive web application.

 

Following are a sequence of step for working with XMLHttpRequest object:

 

Step-1 Create an  instance of  XMLHttpRequest.

Step-2 Create an asynchronous call to a server page, also define a callback function.

Step-3 Callback function then gets a response from the server.

Step-4 DOM manipulates received data and then adds it to the live page.

 

Example-

const xhttpInstance = new XMLHttpRequest();

xhttpInstance.onload = function() {
  // Here you can use the Data
}

xhttpInstance.open("GET", "abc.txt");
xhttpInstance.send();

Note

Access across domains is not allowed in modern browsers due to security reasons.

If you want to use the given example on your web pages, the XML files you load must be present on your server.

 

XMLHttpRequest Object Methods

 

Properties of XMLHttpRequest Object

 

The onload Property

In the XMLHttpRequest object, you can define a callback function. This function will execute when the request receives a response.

This callback function is defined in the onload property of the XHR object:

 

Example

xhttpInstance.onload = function() {
  // Here you can use the Data
}
xhttpInstance.open("GET", "abc.txt");
xhttpInstance.send();

 

A piece of code defining different properties

function loadDoc() {
  const xhttpInstance = new XMLHttpRequest();
  xhttpInstance.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
xhttpInstance.open("GET", "abc.txt");
xhttpInstance.send();
}

 

In the above-given example, we saw the use of onreadystatechange, readyState, and status property. First, we create the XHR object with the help of new in line 1, and then in line three, we are checking if the request is finished and response is ready with the help of “readyState==4,” and we are also checking if the request status is OK with the help of “status==200” in line 3. 

 

Multiple Callback Functions

When you have more than one AJAX task on a website, you can create one function for executing the XHR object and one callback function for every AJAX task.

In the given example, as you see that we are creating a loadDoc function in which we are executing the XHR object, and in the loadDoc function, we are passing “myFun1” and “myFun2” as callback functions for every AJAX task, we want to do.

 

Example

loadDoc("url-1", myFun1);

loadDoc("url-2", myFun2);

function loadDoc(url, cFun) {
  const xhttpInstance = new XMLHttpRequest();
  xhttpInstance.onload = function() {cFun(this);}
  xhttpInstance.open("GET", url);
  xhttpInstance.send();
}

function myFun1(xhttp) {
  // action goes here
}
function myFun2(xhttp) {
  // action goes here
}

 

Conclusion

The advantage of implementing the Ajax technique by using the XHR in javascript over using other javascript library functions like jQuery.ajax is that it helps in code reusability.

This also gives you the freedom to embed your script or application with other applications or platforms even if other applications do not use the particular library.

 

 

Frequently Asked Question

 

1). What is the purpose of XMLHttpRequest?

Answer- XMLHttpRequest (XHR) objects are used to interact with servers. We can get data from a URL without having to do a full page refresh.

 

2). When was XMLHttpRequest introduced?

Answer-  The XMLHttpRequest object was accessible as early as Gecko version 0.6, released on December 6, 2000.

 

3). How do I send an XHR request?

Answer- To send a request to a server, we use the XMLHttpRequest object's open() and send() methods.

 

4). What is the complete form of HTTP?  

Answer- Hypertext Transfer Protocol.

 

5). What is an HTTP status code? 

Answer- An HTTP status code is a message a website's server sends to the browser to indicate whether or not that request can be fulfilled.

 

Key Takeaways

 

So let’s brief everything that we have learned in this blog.

 

We got to know what XMLHttpRequest (XHR) and XMLHttpRequest object is.

After that, we discussed XMLHttpRequest object properties and methods and how to use them.

 

For more information about javascript, You can also expand your knowledge by referring to these articles on javascript.

Also, if you are preparing for interviews, visit this JavaScript interview question blog.

Happy Reading!

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think