Using XMLHttpRequest Class Properties

The XMLHttpRequest object contains several class properties that you’ll need to know about to handle the HTTP response from the web server.

The XMLHttpRequest Class Properties

After you use the send() method to send a connection request to a web server, the HTTP connection process works through five connection states, as tracked by the readyState property:

• State 0: The connection has not been initialized.
• State 1: The connection to the server has been established.
• State 2: The server received the HTTP request message.
• State 3: The server is processing the HTTP request.
• State 4: The server sent the response.

As the HTTP connection works through these five connection states, the value contained in the readyState property changes. This causes the function you define in the onreadystatechange property to trigger for each state change. When the readyState property contains a value of 4, the final result from the request is available for processing.

When the readyState property value is 4, you know the communication is complete, but you don’t know how it turned out. To determine that, you check the HTTP response returned by the web server using the status property. If the status property contains the 200 numeric HTTP result code, that indicates the connection was successful, and any data returned by the web server is available in the responseText and responseXML properties. If the status property contains some other HTTP result code (such as 403 or 404), that indicates there was an error communicating with the web server.

Because these values are standard, it has become somewhat common practice to start out the onreadystatechange callback function code checking for them:

con.onreadystatechange = function() {
    if (this.readyState == 4  && this.status == 200) {
        var result = this.responseText;
    }
};

The function only retrieves the data when the connection is complete and has returned valid data. This method of defining the callback function inline is referred to as creating an anonymous callback function, because you don’t define a name for the function. It only exists inside the onreadystatechange property, so you can’t reference it anywhere else in your JavaScript code.

Although using an anonymous function is a popular way of defining the callback function, you can define the function as a standard named JavaScript function and then reference that function name in the onreadystatechange property.