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:

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.

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.

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

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