Home arrow AJAX & Prototype arrow Page 2 - Ajax Features Needed to Build Active Client Pages

More About the XMLHttpRequest Object - AJAX

This is the second part of my four-part series, Active Client Pages – Ajax Approach. In this part of the series, we continue our discussion of the Ajax features we will need to use with ACP, and then we look at the principles of the Ajax approach.

TABLE OF CONTENTS:
  1. Ajax Features Needed to Build Active Client Pages
  2. More About the XMLHttpRequest Object
  3. The responseText Property
  4. Principles of the Ajax Approach
By: Chrysanthus Forcha
Rating: starstarstarstarstar / 4
October 14, 2008

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Before sending data to the server, we have to explain four important properties of the XMLHttpRequest object.

The onreadystatechange Property

After a request to the server, we need a function that can receive the data that is returned by the server. The onreadystatechange property stores the function that will process the response from a server. The following code defines an empty function and sets the onreadystatechange property at the same time:


xmlHttp.onreadystatechange=function()

{

//This function processes the response from the server

}


The readyState Property

The readyState property holds the status of the server's response. Each time the readyState changes, the onreadystatechange function will be executed.

Here are the possible values for the readyState property:

 State

 Description

 0

The request is not initialized.

 1

The request has been set up.

 2

The request has been sent up. 

 3

The request is in process.

 4

The request is complete.

The status Property

This property returns the status code of the request (integer), for example, 404 for a failed request, 200 for a successful one, etc. When running your Ajax script online to test for a fully complete and successful Ajax request, look for a readyState value of 4 plus a status code of 200.

We are going to add two if-statements to the onreadystatechange function to test whether our response is complete (this means that we can get our data) or if an error occurred:


xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

if(xmlHttp.status==200)

{

// Receive the data from the server and do whatever.

}

else

alert(There is a problem with the data at the server);

}

}


In this way you check whether the response is complete. The response may be complete, but there is an error. So inside the block, you check whether the request was successful. If it was not, you give a generalized error message concerning the page as I have given.

Unfortunately, “xmlHttp.status” may not work with your browser. If that is the case, you will not use this if-else condition. You will still need to receive the data here. The problem now is, how do you detect if an error has occurred?

Luckily the XMLHttpRequest has an abort() method and the DOM has a timer function. After sending the request, you can set the timer function that will abort the request if the readyState property does not indicate 4, after some expected time. For simplicity I will assume that the readyState property will indicate 4 within a reasonable amount of time and I will not address the error and timing issue anymore in this series.



 
 
>>> More AJAX & Prototype Articles          >>> More By Chrysanthus Forcha
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: