HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [278]
function getAJAX(){
request = new XMLHttpRequest();
request.open(“GET”, “beast.txt”);
request.onreadystatechange = checkData;
request.send(null);
} // end function
The code in this function is pretty straightforward:
1. Create the request object.
The request object is created exactly as it was in the first example in the section “Creating an XMLHttpRequest object,” earlier in this chapter.
2. Call request’s open() method to open a connection.
Note that this time I left the synchronous parameter out, which creates the (default) asynchronous connection.
3. Assign an event handler to catch responses.
You can use event handlers much like the ones in the DOM. In this particular case, I’m telling the request object to call a function called checkData whenever the state of the request changes.
You can’t easily send a parameter to a function when you call it using this particular mechanism. That’s why I made request a global variable.
4. Send the request.
As before, the send() method begins the process. Because this is now an asynchronous connection, the rest of the page continues to process. As soon as the request’s state changes (hopefully because a successful transfer has occurred), the checkData function is activated.
Ready, set, ready state!
The readyState property of the request object indicates the ready state of the request. It has five possible values:
0 = Uninitialized: The request object has been created, but the open() method hasn’t been called on.
1 = Loading: The request object has been created, the open() method has been called, but the send() method hasn’t been called.
2 = Loaded: The request object has been created, the open() method has been called, the send() method has been called, but the response isn’t yet available from the server.
3 = Interactive: The request object has been created, the open() method has been called, the send() method has been called, the response has started trickling back from the server, but not everything has been received yet.
4 = Completed: The request object has been created, the open() method has been called, the send() method has been called, the response has been fully received, and the request object is finished with all its request/response tasks.
Each time the readyState property of the request changes, the function you map to readyStateChanged is called. In a typical AJAX program, this happens four times per transaction. There’s no point in reading the data until the transaction is completed, which will happen when readyState is equal to 4.
Reading the response
Of course, you now need a function to handle the response when it comes back from the server. This works by checking the ready state of the response. Any HTTP request has a ready state, which is a simple integer value that describes what state the request is currently in. You find many ready states, but the only one you’re concerned with is 4, meaning that the request is finished and ready to process.
The basic strategy for checking a response is to check the ready state in the aptly named request.readyState property. If the ready state is 4, check the status code to ensure that no error exists. If the ready state is 4 and the status is 200, you’re in business, so you can process the form. Here’s the code:
function checkData(){
if (request.readyState == 4) {
// if state is finished
if (request.status == 200) {
// and if attempt was successful
alert(request.responseText);
} // end if
} // end if
} // end checkData
Once again, you can do anything you want with the text you receive. I’m just printing it, but the data can be incorporated into the page or processed in any way you want.
Chapter 2: Improving JavaScript and AJAX with jQuery
In This Chapter
Downloading and including the jQuery library
Making an AJAX request with jQuery
Using component selectors
Adding events to components
Creating a simple content management system with jQuery
JavaScript has amazing capabilities. It’s useful