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.
One Response to Super simple example of AJAX with MooTools
Leave a Reply Cancel reply
post categories
- AJAX (2)
- css (2)
- freelance website design (16)
- graphics (4)
- javascript (4)
- photoshop (1)
- php/mysql (5)
- portfolio (2)
- resources (4)
- site info (2)
- social networking (1)
- tools (1)
- tutorials (8)
Limited time offer
As a limited time offer - thanks to a deal with Host Gator - Wildreason Productions is able to provide a basic 2-3 page webpage with a blog and custom logo for free. All you have to do is host your website at Host Gator as a new customer. Click here to signup or get more information about a free website!February 2012 M T W T F S S « Apr 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 Tags
16x16 icon ajax backgrounds convert decimal convert fraction css css layout tutorial decimal to fraction desktop background dynamic width error reporting favicon favicon generator fixed width css fixed width layout fraction common denominator free backgrounds free favicon freelance website design graphics high resolution backgrounds image hover effect image rollover image transition invalid argument supplied foreach javascript javascript image transition liquid layout mootools mootools hover mootools transition effect networking online tool PHP png quote generator quotes resources runtime error simplify fraction social icon social networking tutorial wallpaper website designers




The blog has been refreshed and restored!