Skip to content

XMLHttpRequest (XHR)

New Course Coming Soon:

Get Really Good at Git

The introduction of XMLHttpRequest (XHR) in browsers in the mid 2000's was a huge win for the Web Platform. Let's see how it works.


The introduction of XMLHttpRequest (XHR) in browsers in the mid 2000’s was a huge win for the Web Platform. Let’s see how it works.

Things that now look normal, back in the day, looked like they were coming from the future. I’m talking about GMail or Google Maps, for example, which were all based in great part on XHR.

XHR was invented at Microsoft in the nineties, and became a de-facto standard as all browsers implemented it in the 2002-2006 period. The W3C standardized XMLHttpRequest in 2006.

As it sometimes can happen in the Web Platform, initially there were a few inconsistencies that made working with XHR quite different cross-browser.

Libraries like jQuery got a boost of popularity by providing an easy to use abstraction for developers, and this in turn helped spread the usage of this technology.

An example XHR request

The following code creates an XMLHttpRequest (XHR) request object, and attaches a callback function that responds on the onreadystatechange event.

The xhr connection is set up to perform a GET request to, and it’s started with the send() method:

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    xhr.status === 200 ? console.log(xhr.responseText) : console.error('error')
}'GET', '')

Additional open() parameters

In the example above we just passed the method and the URL to the request.

We can also specify the other HTTP methods - (get, post, head, put, delete, options).

Other parameters let you specify a flag to make the request synchronous if set to false, and a set of credentials for HTTP authentication:

open(method, url, asynchronous, username, password)


The onreadystatechange is called multiple times during an XHR request. We explicitly ignore all the states other than readyState === 4, which means that the request is done.

The states are

Aborting an XHR request

An XHR request can be aborted by calling the abort() method on the xhr object.

Comparison with jQuery

With jQuery these lines can be translated to:

$.get('', (data) => {
}).fail((err) => {

Comparison with Fetch

With the Fetch API this is the equivalent code:

  .then((data) => {
  .catch((err) => {

Cross Domain Requests

Note that an XMLHttpRequest connection is subject to specific limits that are enforced for security reasons.

One of the most obvious is the enforcement of the same origin policy.

You cannot access resources on another server, unless the server explicitly supports this using CORS (Cross Origin Resource Sharing).

Uploading files using XHR

Check out my tutorial on how to upload files using XHR.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!
→ Read my DOM Tutorial on The Valley of Code
→ Read my Browser Events Tutorial on The Valley of Code
→ Read my Browser APIs Tutorials on The Valley of Code

Here is how can I help you: