JavaScript Remote Scripting: Reading Data From the Server - Checking asynchronous http requests: taking a look at the "statusChecker()" function
(Page 3 of 5 )
One of the best things that AJAX offers is the ease in controlling the status of a specific request through the "onreadystatechange" event handler, which, when used in conjunction with the "readyState" and "status" object properties, allows you to track easily the progress of a request.
Based on this functionality, it's possible to define a function that checks for the progress of an active petition, in order to move program control to specific functions, once the request has been completed.
That's where the "statusChecker()" function comes in. Since the script's logic is built around this function, after the request is successfully performed and file contents have been read, it will invoke a couple of additional functions that will be reviewed briefly. Now, let's take a look at the "statusChecker()" function, which is listed below:
function stateChecker(){
// if request is completed
if(xmlobj.readyState==4){
// if status == 200 display text file
if(xmlobj.status==200){
// create data container
createDataContainer();
// display data into data container
data=xmlobj.responseText.split('|');
displayData();
}
else{
alert('Failed to get response :'+ xmlobj.statusText);
}
}
}
As you can see, the function above checks to see whether the request has been successfully completed, by verifying the values of "readyState" and "status" properties. After checking for a successful request, the function calls in turn to "createDataContainer()" and "displayData()" functions, which, as you'll see in a moment, create a simple <div> containing element and implement the news rotator, based on the contents read from the data file.
Of course, you'll be wondering how the contents are processed to be displayed in sequence. Notice the following line:
data=xmlobj.responseText.split('|');
In my first attempt to display file contents, I create a data file where headlines are separated from each other by a pipeline character (|). Given that, the above line stores each headline as a separated array element, by splitting the value of the "responseText" property.
Considering the file format expected by the script, a sample news file would look like this:
headline 1|headline 2|headline 3|...headline N
It's worthy noting that a news file might be easily defined as an XML file rather than troubling it with pipeline delimiters. Don't worry about this for the moment; remember that I'm providing this example as an introductory process to using more robust data containers, including XML files and database tables.
At this point, the script is able to request a given data file, and then process the data back in the client. Thus, the next thing to be done is to define the remaining functions for building a <div> container and displaying the headline rotator.
Next: Displaying file contents: defining the "createDataContainer()" and "displayData()" functions >>
More JavaScript Articles
More By Alejandro Gervasio
