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.

image from book
Figure 6.7: Downloading text with the AjaxRequest Ajax framework



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

Similar book on Amazon
HTML, XHTML, and CSS Bible
HTML, XHTML, and CSS Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
PHP and MySQL Web Development (4th Edition)
PHP and MySQL Web Development (4th Edition)

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net