Using the AjaxRequest Framework
A handy feature Ajax applications could use is some way of handling timeouts, which is when the server doesn’t answer a request. This feature is built into the AjaxRequest framework.
| On the Web | Download the AjaxRequest framework from www.ajaxtoolbox.com. |
Here’s how it works. For example, say you want to download the following text, from the file, AjaxRequest.txt:
This text was downloaded with AjaxRequest.
You can start as you did in the previous examples, with a button, this time connected to a JavaScript function named useAjaxRequest and a <div> element:
<form> <input type = "button" value = "Display the text" onclick = "useAjaxRequest()"> </form> <div > <p>The fetched data will go here.</p> </div>
The JavaScript library here is AjaxRequest.js, and you can include that in a Web page, testAjaxRequest.html:
<head> <title>Testing the AjaxRequest framework</title> <script src = "AjaxRequest.js"></script> . . .
You can use the AjaxRequest library without creating any object; just call the AjaxRequest.get method. The button is tied to a function named useAjaxRequest, and you can call AjaxRequest.get in that function:
<head> . . . <script language = "javascript"> function useAjaxRequest() { AjaxRequest.get( { . . . } ); } </script> </head> The AjaxRequest.get method uses named parameters, just as the uniAjax request method did. Start by setting the URL to access like this:
<head> . . . <script language = "javascript"> function useAjaxRequest() { AjaxRequest.get( { 'url':'AjaxRequest.txt', . . . } ); } </script> </head> You can also connect a callback function with the onSuccess named parameter:
<head> . . . <script language = "javascript"> function useAjaxRequest() { AjaxRequest.get( { 'url':'AjaxRequest.txt', 'onSuccess': callback, . . . } ); } </script> </head> You can also set a timeout using AjaxRequest. For example, to set the timeout to 1000 milliseconds (that is, one second), you can use this code:
<head> . . . <script language = "javascript"> function useAjaxRequest() { AjaxRequest.get( { 'url':'AjaxRequest.txt', 'onSuccess': callback, 'timeout':1000, . . . } ); } </script> </head> How does AjaxRequest handle timeouts? You can connect a function to the onTimeout named parameter. Here’s an example connecting an anonymous inner function to that parameter, which displays an alert box:
<head> . . . <script language = "javascript"> function useAjaxRequest() { AjaxRequest.get( { 'url':'AjaxRequest.txt', 'onSuccess': callback, 'timeout':1000, 'onTimeout':function(){alert('Sorry, it timed out.');} } ); } function callback(XMLHttpRequestObject) { document.getElementById("targetDiv").innerHTML = XMLHttpRequestObject.responseText; } </script> </head> Next comes the callback function, which is passed to the XMLHttpRequest object when the data you’ve requested is downloaded. Because this is a real XMLHttpRequest object, you can simply use its responseText property to recover the downloaded text:
<head> . . . <script language = "javascript"> function useAjaxRequest() { AjaxRequest.get( { 'url':'AjaxRequest.txt', 'onSuccess': callback, 'timeout':1000, 'onTimeout':function(){alert('Sorry, it timed out.');} } ); } function callback(XMLHttpRequestObject) { document.getElementById("targetDiv").innerHTML = XMLHttpRequestObject.responseText; } </script> </head> This example is ready to go. You can see this page, testAjaxRequest.html, at work in Figure 6.7.
Figure 6.7: Downloading text with the AjaxRequest Ajax framework
