Handling the Server Response in AJAX

By: Ram Baskar

Remember that when you send the request, you provide the name of a JavaScript function that is designed to handle the response. eg:

http_request.onreadystatechange = nameOfTheFunction;

Let's see what this function should do. First, the function needs to check for the state of the request. If the state has the value of 4, that means that the full server response is received and it's OK for you to continue processing it.

if (http_request.readyState == 4) {
    // everything is good, the response is received
} else {
    // still not ready
}

The full list of the readyState values is as follows:

0 (uninitialized)
1 (loading)
2 (loaded)
3 (interactive)
4 (complete)

The next thing to check is the status code of the HTTP server response. For our purposes we are only interested in 200 OK response.

if (http_request.status == 200) {
    // perfect!
} else {
    // there was a problem with the request,
    // for example the response may be a 404 (Not Found)
    // or 500 (Internal Server Error) response codes
}

Now after you've checked the state of the request and the HTTP status code of the response, it's up to you to do whatever you want with the data the server has sent to you. You have two options to access that data:

http_request.responseText â€“ will return the server response as a string of text
http_request.responseXML â€“ will return the response as an XMLDocument object you can traverse using the JavaScript DOM functions