Skip to main content

The XMLHttpRequest Object (XHR)

  • It was introduced by Microsoft in Internet Explorer 5 as an ActiveX object and later adopted by other browsers.
  • XHR allows asynchronous communication with a server, enabling web applications to retrieve data dynamically and update parts of a webpage without reloading the entire page.
  • XHR has a callback-based programming model where you define event handlers for different stages of the request (e.g., onload, onerror, onreadystatechange).

let xhr = new XMLHttpRequest();

  • Before data can be received onreadystatechange and status are checked

open()

  • initialize a new request or re-initializes one that has been opened some time before
  • configure the request type

The open() method allows you to prepare a request to be sent to the server. It takes three arguments: the request method (for example, "get" or "post"), the URL to open, and a Boolean value (true if the request is to be asynchronous and false if the request is to be synchronous). So, to use the "get" method to open a PHP script named get_info.php as an asynchronous request, you could use the following code:

let xhr = new XMLHttpRequest();
xhr.open("get","get_info.php", true);

send() - readyState -

  • standard validation including email, URLs, tel, and dates
  • JS form validation

For an asynchronous request, you will want to be able to determine when the data you are trying to retrieve is available for use. This is done using the readystatechange event. This event is fired whenever an update occurs to the readyState property of your XHR object. The readyState property can have the following values:

0 – Uninitialized. The open() method has not been called.

1 – Open. The open() method has been called.

2 – Sent. The send() method has been called.

3 – Receiving. Data has been received, but is still not complete.

4 – Complete. All of the data has been received and can be used.

function getData() {
return new Promise(function(resolve, reject){
    let xmlhttp = new XMLHttpRequest();
    let file = "json.txt";
    xmlhttp.onreadystatechange = function() {
       if(this.readyState == 4 && this.status == 200) {
             resolve(displayData(JSON.parse(this.responseText)));
        }
      else{
            reject(new Error("Unable to read file"));
     }
    xmlhttp.open("GET", file, false);
    xmlhttp.send(null);
};

XHR Request​

XmlHttpRequest

var result = null;
var xhr = new XmlHttpRequest();
xhr.onreadystatechange = function () {
      //check if completed
      if(xhr.readyState == 4 && xhr.status == 200) {
            result = xhr.resultText;
      }
}
xhr.open("GET", "url");
xhr.send();

The request​

  • tells the server what kind of request is being sent (GET, POST, etc.) and what resource it's looking for;

The header​

  • which sends the server additional information (such as which client is making the request)

The body​

  • which can be empty (as in a GET request) or contain data (if you're POSTing or PUTing information, that information is contained here).
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.codecademy.com/", false);
xhr.send();

console.log(xhr.status);
console.log(xhr.statusText);