Requests

XMLHttpRequest is a built-in browser object that allows to make HTTP requests in JavaScript.

It is basically used to fetch data from API’s.

There’s another, modern method fetch, that somewhat deprecates XMLHttpRequest but the focus of this post will be on XMLHttpRequest only.

Getting Started

XMLHttpRequest can be used in two modes: synchronous and asynchronous.

1. Asynchronous Method

There are 4 steps to do this:

  1. Create XMLHttpRequest:

    let xhr = new XMLHttpRequest();

    The constructor has no arguments.

  2. Initialize it:

    xhr.open(method, URL, [async, user, password]);

    This method specifies the main parameters of the request:

    • method: HTTP-method. Usually "GET" or "POST".
    • URL: The URL to request, a string, can be URL object.
    • async: If explicitly set to false, then the request is synchronous.
    • user, password: login and password for basic HTTP auth (if required).

    Please note that open call, contrary to its name, does not open the connection. It only configures the request, but the network activity only starts with the call of send.

  3. Send it out.

    xhr.send([body]);

    This method opens up the connection and sends the request to server. The optional body parameter contains the request body.

    Some request methods like GET do not have a body. And some of them like POST use body to send the data to the server.

  4. Listen to xhr events for response.

These three events are the most widely used:

  • load: When the request is complete and the response is fully downloaded.
  • error: When the request couldn’t be made successfully, For example, network down or invalid URL.
  • progress: Triggers periodically while the response is being downloaded, reports how much has been downloaded.
xhr.onload = function () {
alert(`Progress: ${xhr.status} ${xhr.response}`);
};
xhr.onerror = function () {
alert(`Network Error Occured`);
};
xhr.onprogress = function (event) {
// Triggers periodically
// event.loaded - how many bytes downloaded
// event.lengthComputable = true if the server sent Content-Length header
// event.total - total number of bytes (if lengthComputable)
alert(`Received ${event.loaded} of ${event.total}`);
};

Once the server has successfully responded, we can receive the result in the following xhr properties:

status

HTTP status code (a number): 200, 404, 403 and so on, can be 0 in case of a non-HTTP failure.

statusText

HTTP status message (a string): usually OK for 200, Not Found for 404, Forbidden for 403 and so on.

response (old scripts may use responseText)

The server response body.

We can also specify a timeout using the corresponding property:

xhr.timeout = 10000; // Timeout in ms, 10 seconds

If the request does not succeed within the given time, it gets canceled and timeout event triggers.

2. Synchronous Method

If in the .open method the third parameter async is set to false, the request is made synchronously.

It might look good, but synchronous calls are used rarely, because they block in-page JavaScript till the loading is complete. In some browsers it becomes impossible to scroll. If a synchronous call takes too much time, the browser may suggest to close the “hanging” webpage.

Response Type

xhr.responseType property can be used to set the response format:

  • "" (default): get as string,
  • "text": get as string,
  • "arraybuffer": get as ArrayBuffer
  • "blob": get as Blob,
  • "document": get as XML document (can use XPath and other XML methods) or HTML document (based on the MIME type of the received data),
  • "json": get as JSON (parsed automatically).
Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn JavaScript on Codecademy

Edit this page on GitHub

Contributors