In this article , we will see What XMLHttpRequest is ? How to make an asynchronous request and get response ? and How to change the content of web page without reloading it ?

What XMLHttpRequest is ?

If you are a web developer then you must have heared this word XMLHttpRequest many times . Let me explain you a bit about this .

  • XMLHttpRequest is a javascript object which is used to transfer data from client to server without refreshing the whole page .
  • By using XHR (XMLHttpRequest) we can fetch data from API .
  • The Like button in facebook , instagram or any other social media uses XHR to save the data without reloading the page.

Making an request to API using XMLHttpRequest

The steps for making an request to API’s using javascript XMLHttpRequest are as follows :

1. Make an object of request

var xhr = new XMLHttpRequest();
xhr.open("GET","https://jsonplaceholder.typicode.com/posts",true);

In the above block of code we have initialized a variable xhr with the instance of XMLHttpRequest object . Then we have used the open() method to specify the the type of request and url of request .

Parameter structure of open() method :

  • Type : First parameter accepts the type of request to be made .
  • url : Second parameter accepts the url on which request has to be made.
  • Third parameter is optional , it accepts boolean values (true/false) . If true is passed then it means the request will made in asynchronous mode .

2. Listening to events

Now after object creation , we need to listen for the event onReadyStateChange . This is an arrow function which is used to track status of request like whether it is made successfully or failed due to some reason .

xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        console.log(xhr.responseText);
                    } else {
                        console.log("request failed");
                    }
                }
            };

In the above block of code we are checking for readyState to be 4 ( means response is recieved ) and status of response to be 200 (means request made successfully ) .

Values of xhr.readyState can also be :

  • 0 : means request not initialized
  • 1 : Connection established
  • 2 : request send
  • 3 : processing request
  • 4 : response recieved

And values of xhr.status can also be 200 (OK) , 403 (forbidden) , 404 ( path not found) etc . Now after this it’s time to send the request

3. Sending the request

To send the request we use send() method .

xhr.send();

Now put it all together we get

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        console.log(xhr.responseText);
                    } else {
                        console.log(null);
                    }
                 }
              };
xhr.open("GET","https://jsonplaceholder.typicode.com/posts",true);
xhr.send();

After you paste the above code in console of your browser and hit Enter , you will see a response in JSON format , in this way you can update your document data also with the help of document.innerHTML API .

This is all about making an asynchronous GET request using javascript XMLHttpRequest method .

You can follow me on Linkedin : Anand Raj

Next Article : Make your own voice assistant using javascript text to speech

Thank you for reading