Using the AjaxGear Framework


AjaxGear is an easy-to-use, powerful framework that includes support for Ajax auto-complete, a form validator, a progress bar control, and more.

On the Web 

You can get AjaGear for free at www.ajaxgear.com.

Here’s an example showing how AjaxGear works. Say you want to download the contents of AjaxGear.txt:

 This text was downloaded with AjaxGear.

You might start, as with the previous examples, by connecting a button to a JavaScript function, this time named useAjaxGear. You can display the downloaded text in a <div> element like this:

 <form>   <input type = "button" value = "Display the text"     onclick = "useAjaxGear()"> </form> <div >   <p>The fetched data will go here.</p> </div> 

AjaxGear comes with a number of JavaScript libraries specialized by function. The one to use in this example is AjaxGear.Core.js. Include it in this example, testAjaxGear.html, like this:

 <head>   <title>Testing the AjaxGear framework</title>   <script language="JavaScript"     src="/books/1/252/1/html/2/AjaxGear.Core.js"></script>       .       .       .

The button is connected to a function named useAjaxGear, which is started by creating a new Ajax object using the AjaxGear Ajax function:

 <head>   <title>Testing the AjaxGear framework</title>   <script language="JavaScript"     src="/books/1/252/1/html/2/AjaxGear.Core.js"></script>   <script language = "javascript">     var ajax;     function useAjaxGear()     {       ajax = new AjaxGear.Ajax();       .       .       .     }   </script> </head>

Next, you can configure the ajax object. Following are the available members you can work with:

  • getIsAsynchronous: Indicates whether or not the call is asynchronous. The default value is true.

  • getMethod: Contains the HTTP method used.

  • getRequestData: Contains the data sent to the server.

  • getResponseText: Contains the text data read from the server.

  • getResponseXml: Contains the xml data read from the server.

  • onRequestComplete: Calls an assigned function when the download is complete.

  • setIsAsynchronous: Sets whether or not the call is asynchronous.

  • setMethod: Sets the HTTP method to be used for request. AjaxGear supports both GET and POST methods.

  • setPagePath: Sets the URL you want to access.

  • setRequestData: Sets the data that will be passed to the server. Use this property also for query strings when you use the GET method.

  • startRequest: Starts the asynchronous communication with the server.

To set the HTTP method to use to connect to the server, use the setMethod method:

 <head>   <title>Testing the AjaxGear framework</title>   <script language="JavaScript"     src="/books/1/252/1/html/2/AjaxGear.Core.js"></script>   <script language = "javascript">     var ajax;     function useAjaxGear()     {       ajax = new AjaxGear.Ajax();       ajax.setMethod("GET");       .       .       .     }   </script> </head>

Use the setPagePath method to set the URL to access ajaxGear.txt:

 <head>    .    .    .   <script language = "javascript">     var ajax;     function useAjaxGear()     {       ajax = new AjaxGear.Ajax();       ajax.setMethod("GET");       ajax.setPagePath("ajaxGear.txt");       .       .       .     }   </script> </head> 

And you can connect a callback function to the ajax object with the onRequestComplete property. This example simply uses a callback function named callback:

 <head>    .    .    .   <script language = "javascript">     var ajax;     function useAjaxGear()     {       ajax = new AjaxGear.Ajax();       ajax.setMethod("GET");       ajax.setPagePath("ajaxGear.txt");      ajax.onRequestComplete = callback;       .       .       .     }   </script> </head>

Finally, start the Ajax download with the startRequest method:

 <head>    .    .    .   <script language = "javascript">     var ajax;     function useAjaxGear()     {       ajax = new AjaxGear.Ajax();       ajax.setMethod("GET");       ajax.setPagePath("ajaxGear.txt");       ajax.onRequestComplete = callback;       ajax.startRequest();     }   </script> </head>

How do you handle the data when it’s been downloaded? The ajax object supports a method, getResponseText, that lets you access the responseText property. Here’s how you can display that downloaded text in the Web page:

 <head>   <title>Testing the AjaxGear framework</title>   <script language="JavaScript"     src="/books/1/252/1/html/2/AjaxGear.Core.js"></script>   <script language = "javascript">     var ajax;     function useAjaxGear()     {       ajax = new AjaxGear.Ajax();       ajax.setMethod("GET");       ajax.setPagePath("ajaxGear.txt");       ajax.onRequestComplete = callback;       ajax.startRequest();     }     function callback()     {       document.getElementById("targetDiv").innerHTML         = ajax.getResponseText();     }   </script> </head>

That’s all you need. You can see this page, testAjaxGear.html, at work in Figure 6.6.

image from book
Figure 6.6: Downloading text with the AjaxGear Ajax framework

Another JavaScript-based framework is the AjaxRequest framework, and it’s got a very handy feature for Ajax developers.



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