How to make an Ajax request with Javascript

AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers.

It can send and receive information in various formats, including JSON, XML, HTML, and text files.AJAX’s most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.

Source: Mozilla Developer Network Docs

Below we will send a simple request to a testing platform: https://resttesttest.com/ and in the Demo area on the right we can see it in action.

 

The HTML

 <!-- A div to display the response in later on, just to see it -->     
    <pre><div id="response"></div></pre>

<!-- Display an item from the response object -->
    <div id="ip"></div>

The Javascript

<script type="text/javascript">   
     
      //Set a variable to use for the ajax request
         var xhr = new XMLHttpRequest();

         //This will get called after the server has processed the request         
         xhr.onreadystatechange = function() {

            //Check if the request is done (4)
           //Check if the status is 200 which means a successful request
            if (this.readyState == 4 && this.status == 200) {

                //We are just storing the returned text into a variable.
                var response = this.responseText;

                //We select an element on the page and display the response.
                document.getElementById("response").innerHTML = response;

                //You could receive the response as json and access individual items
                var json = JSON.parse(response);

                document.getElementById("ip").innerHTML = "IP: " + json.origin;
            }
        };

        //We open the request type (GET) and the second part is the url to send to
        xhr.open("GET", "https://httpbin.org/get");
        xhr.send();     

</script>   
       

Demo

 
 
 

Comments

I like reading quotes and i have read so many quotes before. This quote is about life and top essay writer service also has very collection of life quotes for the readers. This is also one of the most coolest quotes and i like this quote very much.

 

 

Add new comment

The content of this field is kept private and will not be shown publicly.
Target Image