Now that the magical XHR has been instantiated, it can then query a server resource and expect a response from server. Before we get to see how to query the server, let’s define how to handle the response from server.

In the process of making a request to the server, XHR goes through five (5) states. The current state of XHR is represented by readyState property of XHR.

onreadystatechange event fires everytime readyState changes. The function that handles the server response is known as ready state handler. Below is a very simple function which served as ready state handler.

xhr.onreadystatechange = function () {
    if (xhr.readyState < 4)                         // while waiting response from server
        document.getElementById('div1').innerHTML = "Loading...";
    else if (xhr.readyState === 4) {                // 4 = Response from server has been completely loaded.
        if (xhr.status == 200 && xhr.status < 300)  // http status between 200 to 299 are all successful
            document.getElementById('div1').innerHTML = xhr.responseText;
    }
}

While browser client awaits the response from server (xhr.readyState < 4), we fill div1 with "Loading..." so user will be patiently wait for the result.

When server reponse has been complete/done (xhr.readyState === 4). It then check if the HTTP status is between 200 to 299 (if (xhr.status == 200 && xhr.status < 300)), if yes, it means the requested has been successful. To learn more about status code, please check Status Code definition

In short, it simply means once the server response is completed and HTTP status is success, the function fills the content from the sever to element div1.

The meaning of various readyState as follows:-

value readyState Description
0 UNSENT After you have created the XMLHttpRequest object, but before you have called the open() method.
1 OPENED After the open method has been invoked successfully, the readyState property of the XMLHttpRequest object should be assigned a value of 1.
2 HEADERS_RECEIVED After the send method has been invoked and the HTTP response headers have been received, the readyState property of the XMLHttpRequest object should be assigned a value of 2.
3 LOADING Once the HTTP response content begins to load, the readyState property of the XMLHttpRequest object should be assigned a value of 3.
4 DONE Once the HTTP response content has finished loading, the readyState property of the XMLHttpRequest object should be assigned a value of 4.

There is only one event handler by XHR object.

Event Handler Descriptions
onreadystatechange An event handler for an event that fires at every state change of XHR.

Here are some important properties of XHR.

Properties Descriptions
readyState Return the current state of XHR object. Possible values are 0,1,2,3,4
responseText Response of the server in plain text.
responseXML The response to the request as a DOM Document object, the response can be parsed as XML or HTML. The responseXML attribute has XML in its name for historical reasons. It also returns HTML resources as documents.
status The status of the response to the request. i.e. 200 = OK and 404 = Page not Found. If you are interested to find out what the rest of status value means, please see Status Code Definitions by W3C.
statusText The response string returned by the HTTP server. for example "200 OK".