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.
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.
