Using the XMLHttpRequest object

Functions

Objects

Array Properties and Methods

DOM

Built-in Objects

Using Events in JavaScript

Handling Input and Output

Ajax and JSON

The XMLHttpRequest object provides a way for web browsers to request data from a URL without having to refresh the page.

The XMLHttpRequest object was created and implemented first by Microsoft in its Internet Explorer browser and has since become a web standard that has been adopted by every modern web browser. You can use the methods and properties of the XMLHttpRequest object to retrieve data from a remote server or your local server. Despite its name, the XMLHttpRequest object can get other types of data besides XML, and it can even use different protocols to get the data besides HTTP. Listing 16-1 shows how you can use XMLHttpRequest to load all the countries data from a url into the current HTML document.

Listing 16-1: Using XMLHttpRequest to Load External Data

<html>
  <head>
    <title>Loading External Data</title>
    <script>
      window.addEventListener('load',init);
      function init(e){
        document.getElementById('myButton').addEventListener('click',urlLoader);
      }
      function reqListener () {
        document.getElementById('content').innerHTML = this.responseText;
      }
      function urlLoader(){
        var oReq = new XMLHttpRequest();
        oReq.onload = reqListener;
        oReq.open("get", "https://restcountries.com/v2/all", true);
        oReq.send();
      }
    </script>
  </head>
  <body>
    <form id="myForm">
      <button id="myButton" type="button">Click to Load</button>
    </form>
    <div id="content"></div>
  </body>
</html>

The first line of code inside the function creates the new XMLHttpRequest object and gives it the name of oReq:

var oReq = new XMLHttpRequest();

The methods and properties of the XMLHttpRequest object are accessible through the oReq object.

This second line assigns a function, reqListener, to the onload event of the oReq object. The purpose of this is to cause the reqListener function to be called when oReq loads a document:

oReq.onload = reqListener;

The third line uses the open method to create a request:

oReq.open("get", "https://restcountries.com/v2/all", true);

In this case, the function uses the HTTP GET method to load the data from the url. The third parameter is the async argument. It specifies whether the request should be asynchronous. If it’s set to false, the send method won’t return until the request is complete. If it’s set to true, notifications about the completion of the request will be provided through event listeners. Because the event listener is set to listen for the load event, an asynchronous request is what’s desired. It’s unlikely that you’ll run into a situation where you’ll want to set the async argument to false. In fact, some browsers have begun to just ignore this argument if it’s set to false and to treat it as if it’s true either way because of the bad effect on the user experience that synchronous requests have. The last line in the urlLoader function actually sends the requests that you created with the open method:

oReq.send();

The open method will get the latest version of the requested url. So-called live-data applications often use loops to repeatedly request updated data from a server using AJAX.