AJAX HTTP Statuses

After understanding readyState and the event onreadystatechange it's now time to bundle up these concepts with the idea of states of a request and see how are all the three used together to process AJAX responses.

In this chapter we will see what are HTTP statuses for AJAX requests, how they indicate what happened with the request at the server end, and finally how to utilise them in JavaScript to understand all this.

Suppose you enter the URL of a webpage in your browser that doesn't exist at all in this entire galaxy - you will get a 404 Not Found page (more than often customised by the website). In simple words, you will encounter an error which in this case is caused due to a non-existent file's request. The server receives the request, searches for the file and when doesn't find one, returns a Not Found message.

This was just a simple instance of what possibly can happen at the server once a request is sent to it. Much more can happen, and in fact does happen, ocassionally at the server that also leads to errors.

For example the server script can take too long to process, or contain syntactical errors, or even deny access to a particular user and so on and so forth. The complete list of all the possible outcomes is so exhaustive and detailed that you'll need to put in a lot of time to understand each one in detail.

The most common and the usually desirable outcome is that of success. Everything can work perfectly on the backend as well, and in this case we get a 200 OK message. As we'll see soon, when developing an AJAX application we have to check for this message particularly to ensure that our request succeeded.

In short, for each request we make, for a given file, we get a response status, or simply status, along with the actual response.

The status can help us deduce whether our request succeeded, failed, or redirected and so on. If it wasn't for a status, browsers couldn't understand the condition of a response and then react on it. There would've been no way to figure out what happened with a request at the server end.

Examining the format of the status string, it can be seen that it is made up of two things - a number and a text value.

The number is known as the status code of the request and is a three-digit number, with the first digit indicating the classification of the status. For example, all numbers that begin with a 3, like 301, 302 etc. deal with redirection.

The text value is known as the status message or status text. It gives a short, meaningful explanation of the status code, for example Not Found for the code 404.

As a quick example illustrating both these terms, if a requested page doesn't exist, we get the status string 404 Not Found, where 404 is the status code and Not Found is the status text. Similarly for 200 OK, 200 is the code and OK is the status text. Simple?

Browsers all over the globe use these HTTP statuses to interact with servers and understand what happened internally within them once they received the request. They are programmed to deal with errors i.e for each status returned, they have a set of actions, set up to be taken for ultimately informing the user of the result of the fetch.

AJAX requests operate the same way in that they also receive a status string once complete. Remember, AJAX is just another way of sending requests from a browser; the request itself is the same HTTP request sent normally by browsers. Don't think that AJAX is some new format of sending requests!

However unlike normal requests intiated by the browser, the ones for AJAX aren't directly dealt by the browser once received. Instead this work has to be done by the developer himself. He has to manually write all the code to retrieve the status of the response and perform actions accordingly.

This is where the strength and weakness of AJAX meets. The strength comes from the fact that we have full control over dealing with the response, whereas the weakness comes from the same origin i.e now we have to do everything ourself! A compromise for asynchronous capability.

But how can we determine the status of a request using JavaScript? Let's discuss it.

Once the response to a dispatched request is received, its status code goes into the status property while the status text goes into the statusText property of the XMLHttpRequest() object (created earlier for the request itself).

As with the norm, status is of type "number" and statusText is of type "string".

Now before we show up a demonstrating code snippet for both these properties, it's worth testing your understanding of the previous concept on states of a request as linked with statuses.

xhr.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
      // proceed further
   }
}

Let's start by considering a simple example illustrating the working of statuses.

Following we've set up a code to log messages to the console each time the request's state changes, starting from state 2. Each message contains the state of the request along with its status.

var xhr = new XMLHttpRequest();
xhr.open("GET", "ajax.txt", true);

xhr.onreadystatechange = function() {
   console.log("readyState:", this.readyState, " status:", this.status);
}

xhr.send();

Noticing the console logs above, we see that the status of the request becomes 200 at readyState 2, and not at 4. Why is this? Well it's pure logical reasoning.

Talking about the next two logs - they are simply just changes of readyState, that's it - the status remains the same.

Moving on, we already know the fact from the previous chapter that a request completes at state 4, where the actual content is ready to be processed and that this involves a check in the script for readyState == 4.

In addition to this, now we also know that before proceeding further we need to layout a check for status == 200 as well, to confirm a successful fetch. Proceeding without either of these checks is meaningless in an AJAX application, as it can be that the content isn't received or is simply an error response.

Summing it up, following is the complete code to fetch the file ajax.txt and log its content once both the aforementioned conditions are met:

var xhr = new XMLHttpRequest();
xhr.open("GET", "ajax.txt", true);

xhr.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
      // request completed and a successful response
      console.log(this.responseTxt);
   }
}

xhr.send();

Notice the fact here that we've used the && (and) operator to check for both cases in one single expression. Nonetheless you can even write this as two nested if statements - one to check for readyState and the other for status.

xhr.onreadystatechange = function() {
   if (this.readyState == 4) {
      // request completed
      if (this.status == 200) {
         // response successful
         console.log(this.responseTxt);
      }
   }
}

This can particularly be useful when our AJAX application wants to perform certain actions if the status isn't 200. Consider the task below for an example.

xhr.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
      // process the response
   }
   else {
      console.error("status:", this.status, this.statusText);
   }
}

xhr.onreadystatechange = function() {
   if (this.readyState == 4) {
      if (this.status == 200) {
         // process the response
      }
      else {
         console.error("status:", this.status, this.statusText);
      }
   }
}

Summarising it all, knowing the right way to process an AJAX request is of utmost importance for web developers. They should be able to make a clear distinction between the terms state and status of a request and what purpose each of them serves.

A vivid understanding of such small concepts is essential for them to know, otherwise they'll just be AJAX users, not developers.