|
AJAX is a nifty way to communicate with the web server without the user having to load an entire page. AJAX uses Javascript and XML to make a request to the server behind the scenes. Once the request is processed and the response is sent back to the user, Javascript is used to update the page if necessary.
While you can use core Javascript functionality to make AJAX calls, MooTools provides a few classes to make things easier.
XHR
Class: XHR
Basic XMLHttpRequest Wrapper.
Arguments:
options - an object with options names as keys. See options below.
Options:
method - 'post' or 'get' - the protocol for the request; optional, defaults to 'post'.
async - boolean: asynchronous option; true uses asynchronous requests. Defaults to true.
encoding - the encoding, defaults to utf-8.
autoCancel - cancels the already running request if another one is sent. defaults to false.
headers - accepts an object, that will be set to request headers.
Events:
onRequest - function to execute when the XHR request is fired.
onSuccess - function to execute when the XHR request completes.
onStateChange - function to execute when the state of the XMLHttpRequest changes.
onFailure - function to execute when the state of the XMLHttpRequest changes.
Properties:
running - true if the request is running.
response - object, text and xml as keys. You can access this property in the onSuccess event.
Example:
>var myXHR =
new XHR({method: 'get'}).send('http://site.com/requestHandler.php', 'name=john&lastname=dorian');
Ajax
Class: Ajax
An Ajax class, For all your asynchronous needs.
Inherits methods, properties, options and events from <XHR>.
Arguments:
url - the url pointing to the server-side script.
options - optional, an object containing options.
Options:
data - you can write parameters here. Can be a querystring, an object or a Form element.
update - $(element) to insert the response text of the XHR into, upon completion of the request.
evalScripts - boolean; default is false. Execute scripts in the response text onComplete.
When the response is javascript the whole response is evaluated.
evalResponse - boolean; default is false. Force global evalulation of the whole response,
no matter what content-type it is.
Events:
onComplete - function to execute when the ajax request completes.
Example:
>var myAjax = new Ajax(url, {method: 'get'}).request();
Let's see how this would work. Save the following HTML to a local file and open it in your browser. For security purposes, your browser may not execute some of the Javascript in this example because it calls a page from another site (in this case Google). If this is the case, try a different browser. Once you are using AJAX on your site calling back to your own site, you will not have this issue.
<html>
<head>
<script type="text/javascript" src="http://www.cmsmarket.com/media/system/js/mootools.js"></script>
<script type="text/javascript">
var queryIndex = 0;
var queries = [ 'cms market', 'joomla', 'mootools' ];
function sendAjaxRequest()
{
var url = "http://www.google.com/search?q=" + queries[queryIndex];
try
{
var myAjax = new Ajax(url, {method: 'get', update: 'responseDiv'}).request();
}
catch(err)
{
$('responseDiv').innerHTML =
"This demo may not work if you don't have the proper permissions setup with your browser.<br />" +
"This page must be 'trusted' by the browser to work.<br />" +
"If you are using Firefox, try using Internet Explorer.<br />" +
err;
}
queryIndex++;
if(queryIndex > count(queries)) { queryIndex = 0; }
}
</script>
</head>
<body>
<a onclick="javascript:sendAjaxRequest(); return false;" href="#">Send Ajax Request</a><br />
<div id="responseDiv" style="border: solid 1px black">
No Response
</div>
</body>
</html>
In the code above, when the user clicks on the anchor tag, it will call a function that creates an Ajax request and calls to Google to search for one of three terms. The response is then written into the responseDiv div element. Each time the user clicks the anchor tag, the query value to search on Google will change and a new query will run. Notice that each time you click the link, your page does not reload. Only the HTML in the div element is updated.
|
