The Ready State

After the XHR object has been created and the request has been made, we need a way to know when the response has been received. This is where the onreadystatechange event handler is used. The onreadystatechange event handler fires when the state of the request object changes and allows us to set a callback method to be triggered. After this callback method is triggered, it is up to us to handle the response. The custom callback method named onResponse, shown in Listing 2.1, will be covered in Chapter 3, where we will cover all aspects of an Ajax response.

Listing 2.1. Sending a Request

function sendRequest(url) {     request.onreadystatechange = onResponse;"GET", url, true);     request.send(null); }

Listing 2.2 is a custom method named checkReadyState that checks the ready state of the XHR object and handles each state in a separate branch based on the number that the current state equals. This custom method will be called from the onResponse method to determine the ready state of the XHR before it handles parsing the response object.

Listing 2.2. Determining the readyState Value

 function checkReadyState(obj, id) {     switch(obj.readyState)     {         case 0:             document.getElementById(id).innerHTML = "Sending Request...";             break;         case 1:             document.getElementById(id).innerHTML = "Loading Response...";             break;         case 2:             document.getElementById(id).innerHTML = "Response Loaded...";             break;         case 3:             document.getElementById(id).innerHTML = "Response Ready...";             break;         case 4:             document.getElementById(id).innerHTML = "";             return (obj.status == 200);             break;         default:             document.getElementById(id).innerHTML = "An unexpected error has             occurred.";     }}

Notice that there are two parameters in this method. The first parameter; named obj, is the XHR object that made the request and is now being used to check the readyState status of the response from the server. The different numbers that are returned in relation to the readyState are listed in Table 2.3 with a definition for each.

Table 2.3. A List of the readyState Values, with Translations and Definitions for Each

readyState Values





The object is not initialized with data.



The object is loading its data.



The object has finished loading its data.



The user can interact with the object even though it is not fully loaded.



The object is completely initialized.

The second parameter, named id, is the ID of an HTML element that can be located in the client-side XHTML. This ID is located by using JavaScript's document.getElementById method to find the specified element by id in the current page using the DOM. After this element is located, the innerHTML property for the element is set to a custom message that we choose to display in relation to each ready state. This is an excellent way to provide feedback to the user regarding the status of a request. As you can see from Listing 2.2, we are adding a text message that essentially represents a loading message that is specific to each state of the request to present a frame of reference to the user. After the readyState reaches a value of 4, this means that it has completed loading. When it has completed loading, the checkReadyState method returns whether the status of the response is equal to 200. An HTTP status of 200 means that the request has succeeded and that it is ready to be handled. This is one of many HTTP status codes that can be received and should be properly handled by the Ajax engine. The next section covers more status codes and supplies examples of typical uses for both HTTP status codes and headers.

Ajax for Web Application Developers
Ajax for Web Application Developers
ISBN: 0672329123
EAN: 2147483647
Year: 2007
Pages: 129
Authors: Kris Hadlock

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: