An Intro to AJAX and the XMLHttpRequest Object
Tags: beginners, javascript, wecoded, codenewbie
Published: 2019-12-01 01:16:01

**Asynchronous JavaScript & XML (AJAX) is the foundation of every modern web application.** There are a handful of methods to make AJAX calls in JavaScript, but in this post, I'm going to cover using the XMLHttpRequest object.

####Asynchronous programming

Asynchronous programming refers to a technique of writing code that allows multiple tasks to be performed at once without interrupting code execution. This is highly important to JavaScript development because **JS is a single-threaded language**, which means it's interpreted line by line, top to bottom.

JavaScript does have some built-in tools to help us write asynchronous code. (`setTimeout` and `setInterval`, for example, when executed, pass functions off to the browser to be called at a later time.) Writing our JavaScript with AJAX in mind helps us expand on these tools so we don't have to wait for one line of code to finish before the code continues to execute.

With AJAX, we can build Single Page Applications (SPA) that render dynamically with user input. Personally, I can’t remember the last time I used a webpage that required full reloading of the page any time I wanted to interact with it. Asynchronous programming allows us to interact more fluidly with our digital environment.

####It's all about the client and the server

When we talk about AJAX and asynchronous code, we’re usually referring specifically to **client-server communication**. AJAX helps us write code that allows our app to communicate with a server without interrupting the user’s interaction with our client side, and then potentially update our client interface with any data changes that the server sends back in its response.

###The basics of AJAX and XHR

So, how does this happen? Enter the **`XMLHttpRequest`** object.

The XHR object is an object found on modern browsers that has a bunch of really useful properties that allow us to interact with server asynchronously.

We can use this XHR object and its methods to, among other things: (1) send requests from our client to the server, (2) check the state of a request, (3) receive a response from the server, and potentially (4) execute some action, depending on the success or failure of a server response.

![](https://i.imgur.com/Aj2ITXw.png)<figcaption>the XMLHttpRequest object in the browser console</figcaption>

From the image above, you can see it’s got all these neat properties, including some it inherits from its `_proto_`. 

The ones we're going to focus on first are `.open()` and `.send()` (which live on the _proto_). When making an AJAX request with an XHR the fundamental steps are to (1) instantiate the XHR object, (2) open the request, and (3) send the request.

![](https://i.imgur.com/Bye5sVX.png)<figcaption>implementing an AJAX API call with an XMLHttpRequest object</figcaption>

Let's dissect this. On line 2, we instantiate the object (pseudoclassically!) with the **new** keyword. On line 3, we call `.open()`. Our first parameter there indicates the `method` (i.e. GET or POST). The second, `url`, is where we're sending our request. The third parameter is a boolean which tells our code whether or not to run this asynchronously, so we've set ours to `true`.

Then we use `.send()` to send off the request!

Line 5 is where the magic happens. `.onload()` is one of a couple methods on the XHR object that help us implement the asynchronous nature of our call. We can optionally pass in two callback functions, one of which will run in case of response success, the other in case of failure.

In this case, we're only running the success callback if our `status` code comes back between 200 and 300, which means the request was successful.

![](https://i.imgur.com/oduOy77.png)<figcaption>calling the AJAX call we created above</figcaption>

And then we can just call our AJAX function like we do in the image above, passing in the method, the url, and whatever callbacks we want.

Hopefully this post took some of the mystery out of AJAX and the XMLHttpRequest object. AJAX queries are vital to modern programming and important to learn how to implement. The XHR object is just one of several ways to make an AJAX call to a server.