Simple AJAX w/Prototype.js

From the prototypejs.org site:

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

The 1.6 version of Prototype is compatible with the following browsers:

Browser Version(s)
Mozilla Firefox ≥ 1.5
Microsoft Internet Explorer ≥ 6.0
Apple Safari ≥ 2.0
Opera ≥ 9.25

With prototype, you can easily access and modify DOM elements using "utility method" shortcuts like $('element_id') or $F('element_id') to access form element values.

Using standard JavaScript to modify a DIV's text with a form's textarea value might be accomplished like this:
[code]
var textDiv = document.getElementById('textDiv');
var textInput = document.getElementById('textInput');

textDiv.innerHTML = textInput.value;
[/code]
Using prototype, the same can be accomplished with the following:
[code]
$('textDiv').innerHTML = $F('textInput');
[/code]
Prototype also extends JavaScript's array handling in ways that make it much easier to accomplish more complicated programming tasks.

Hopefully in future tutorials I'll be able to go deeper into some of the more amazing aspects of prototype... but today we're talking about Ajax. So let's get started!

Getting prototype on your site

In order to use prototype you first have to include the JavaScript into your web page/s. There are a couple different ways to do this: A) Download the code from prototypejs.org and install the script on your server... then reference the script on your page. Or B) use Google's JavaScript API and let them handle the hard stuff.

I'll cover both but tend to lean towards the Google method as it requires less work to get started and it's incredibly easy to upgrade to future versions.

Download the code yourself (a bit more work but more control over the code):

  1. Download the prototype script from prototypejs.org
  2. Upload the script to your server in an easy to reference sub-directory like "js" or "includes/js"
  3. Reference the script within the HEAD section of your web page using code like the following:
    [code]

    [/code]

The Google JavaScript API method:

  1. Put the following code within the HEAD section of your web page/s:
    [code]

    [/code]

Whichever method you go with, the added JavaScript will moderately increase the amount of data your audience has to download to view your site. How much overhead is added depends on whether you're using a compressed version of the script or not. This is another good reason to use Google's JSAPI, it will be cached for one year and served with the proper compression headers. That means that most users will incur a ~30 KB download only once.

For even more information, see: http://www.prototypejs.org/2008/5/27/prototype-hosted-on-google-s-servers

Now let's move on to using Prototype's Ajax objects...

Prototype's AJAX objects & methods

Ajax... or for the truly geeky, Asynchronous Javacript And Xml, is a way of sending/receiving data to/from the server without making your user's refresh the whole page. You can load just the basics of a page and then get more information from the server as the user requests it. This can dramatically speed up your website by not having to load a bunch of content the user might not even want.

Now, I'm not going to go into a ton of detail about the issues surrounding ajax like browser compatibility differences, returned script execution, callback methods, etc... suffice it to say that Prototype has done an excellent job of dealing with these issues and actually making it easy (dare I say fun) to use. They also provide a very nice Ajax tutorial on their website which I'll be paraphrasing at times here. I'm more focused on getting a working set of code that encompasses everything from start to finish, but I highly recommend reading what they've put together after you're done here:

http://www.prototypejs.org/learn/introduction-to-ajax

Prototype's Ajax object is pretty flexible and they've many easy-to-use methods for processing ajax requests. I'm going to focus on 3 that I use a fair amount in my work.

Ajax.Updater()
This is the one you'll use most often. Great for easily replacing the content of one element (a DIV's innerHTML for example) with the server's response.

Ajax.Request()
When you don't need to update the page but simply send something to the server (update a database for example).

Ajax.PeriodicalUpdater()
Great for when you want to update your page with content that changes over time... a newsfeed or statistics or something like that.

Ajax.Updater()

Okay, you've got protoypejs running on your site, let's see what it can do. We'll start by creating a simple DIV element to stick some content in.
[code]


[/code]
Next, let's create a <script> section on your page that will execute the Ajax for the update we want to perform.
[code]

[/code]
Which will end up looking something like this:

Click the button and you'll see the content of the test.html file replace this text.

There are several options that you can use to control how the update takes place. Let's take a look at the format prototype uses for the Ajax method.