Jimmy Mancusi Dot Com

This new movement in web design brought new tools and technology emerged. One of those tools was AJAX. AJAX stands for asynchronous JavaScript and XML. For a full definition you can check out Wikipedia. Sounds fancy, but what it really does is allow you to exchange information with the server behind the scenes (without the user having to refresh a page or load a new one). This ability provides developers a lot of freedom. For example, in order to store information in a database without AJAX the developer must prompt a user to submit a form of information back to the web server so that it can be processed. With AJAX, the developer can use javascript and events, such as onchange, to execute a database call. In this example all information could be saved as the user fills out the form and would also allow you to modify parts of the form on the fly to prompt the user for the information that you need.

All sounds pretty cool, but it must be complicated right? Well yes, it is complicated. A lot of things happen behind the scenes that most of us don't really want to deal with. Lucky for us, we don't have to. Many AJAX frameworks . A framework is basically a collection of functions that provide you with the backbone for using a technology, in this case AJAX. A couple of the more popular frameworks are script.aculo.us and jQuery. Both of these frameworks are built on the Prototype framework.

I have used AJAX for the past few years and to this point exclusively used the script.aculo.us framework. I can't say that one is better than the other, but I am pretty comfortable with script.aculo.us, and it is relatively simple to use. As far AJAX functionality is concerned there are 2 basic functions in script.aculo.us that you can use, Ajax.Updater and Ajax.Request.

Both of the AJAX functions (updater, and request) will create an AJAX call and execute the URL that you pass to it. However there is one main difference with the two functions. Ajax.Updater will grab the output from the given URL and update a given div with it, while Ajax.Request doesn't return the output from the URL. I primarily use Ajax.Updater, but the request function definitely has it's place.

Here is a quick example of how you would use either:

   function ajaxUpdate( example_id, example_var )
   {
    var url = "http://www.url_to_your_script.php";
    var div = "div_you_want_updated";
    //Parameter string that you want to pass to your url
    var params = "example_id=" + example_id + "&example_var=" + example_var;

    var ajax = new Ajax.Updater(
     div,
      url,
      {
        parameters: params,
        method: "post",
        evalScripts: true
      }
    );
   }

   function ajaxRequest( example_id, example_var )
   {
    var url = "http://www.url_to_your_script.php";
    var div = "div_you_want_updated";
    //Parameter string that you want to pass to your url
    var params = "example_id=" + example_id + "&example_var=" + example_var;

    var ajax = new Ajax.Request(
      url,
      {
        parameters: params,
        method: "post"
      }
    );
   }

There are only a few differences between the functions. 1) The Ajax method that we call, updater or request. 2) A div is only required for the updater. 3) In the updater I set an extra parameter called evalScripts. That will tell the updater to process any javascripts on the URL. You can set it to true if you want, it defaults to false. I normally set this to true so that I can use javascript on my PHP script to update the page.

Below is a very simple example, when you click on the button the div with id "yankee_post" will be today's Yankee Post.

Click me for a live example



I hope this post was some what helpful. Ajax is a very powerful and useful tool and by using one of the available libraries out there, you can harness this power and do some pretty cool stuff without a lot of work. Happy coding!