AJAX is wonderful. It allows you to make calls to the server without refreshing the page. This allows your users to have an uninterrupted experience on your application. It gives sites a feel of professionalism and makes it feel more like an actual application. And, it turns out. That with MooTools (or jQuery) writing AJAX is not only fun, but it’s exceedingly easy. With a little understanding of JavaScript and the MooTools framework, you can be writing AJAX like it’s your job. And maybe it is.

The following super simple AJAX example is about as barebones as it possible can. There is no error checking and the example actually does very little. It’s meant to be a framework for beginners or a reference for advanced website designers. The only thing to keep in mind when designing sites with AJAX: it doesn’t work if the user has JavaScript disabled. Therefore, a decision has to be made. Make the scripts unobtrusive – results are still obtained without JavaScript – or acknowledge that your site won’t be functional with JavaScript. It’s up to you to determine your audience and decide who to cater to. Facebook for example, doesn’t work without JavaScript.

This example however, still works without JavaScript. But the results are slightly different. The user navigates to demo.html when they click the link as JavaScript isn’t there to intercept the click and halt it (return false in the onclick statement).

A super simple, complete example:

<html>
<head>
<script src="/files/mootools.1.2.3.js" type="text/javascript"></script>
<script type="text/javascript">
function easyAjax() {
  url = 'demo.html';
  new Request({
    url: url,
    method: 'get',
    onSuccess: function(responseText) {
      //write the response to someelement
      $('someelement').set('html', responseText);
     }
  }).send();
  return false;
}
</script>
</head>
 
<body>
 
<p>
  <a href="demo.html" onclick="return easyAjax()">Click</a>
</p>
 
<div id="someelement">
 
</div>
 
</html>

View the working demo.
View the MooTools request documentation

An advanced example with error checking, visual effects, and PHP integration coming soon. :)

Tagged with:
 

One Response to Super simple example of AJAX with MooTools

  1. David Ryder says:

    The blog has been refreshed and restored!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Looking for something?

Use the form below to search the site:


Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...