Up until a couple years ago, I shied from frameworks of any kind. I know the benefits, but I also felt the cons of bloating and performance hits far outweighed them. Then one day I came into a job that forced me into the Zend Framework and Prototype, a Javascript framework. I’ve been a fan of them ever since.
I had always written my Ajax code from scratch. It wasn’t difficult, but I never quite came up with a good class to handle it. I spent hours working out code to parse XML and JSON. It seemed like it just wasn’t written well in the end, and I had more pressing matters with the application to tend to.
I was mostly a back end programmer and DBA. I could architect and engineer a system to handle sales automation pretty easily, but I would struggle when forced out of my element into the front end of web sites. This is where Prototype helped me to extend my skills to the quickly when I needed too the most.
Instead of having to write XMLHttpRequest functions that would work in all the browsers, then write a JSON or XML parser, I was able to quickly use the Prototype Ajax methods.
Prototype’s Ajax.Request method is very flexible and easy to use. It has methods for completion, error handling, JSON parsing, and more. Simply throw a URL in it, give it your method of sending data (get or post), and handle the connection any way you want.
Here’s a simple function that will reach out to a messages script, and populate a tablekit:
new Ajax.Request( this.baseUrl + '/home/get-msgs',
{
method: 'post',
onComplete: function( transport )
{
if ( 200 == transport.status )
{
var response = transport.responseText.evalJSON();
new TableOrderer( 'rr-table',
{
data : response['list'],
paginate : 'bottom',
filter : 'top',
pageCount: 25 } );
}
}.bind( this )
} );
Where you see the condition 200 == transport.status is where you can detect any type of HTTP response code. In this case, we’re only looking for 200, which is a success connection. You could easily throw a switch in there to handle as many codes as you want, or you could simply not look for any.
Aside from the Ajax.Request method, Prototype also has Ajax.PeriodicUpdater, Ajax.Updater, Ajax.Responder, and Ajax.Response. Each of them give you different types of Ajax calls, such as just send updates, or setting off a periodic event call thru Ajax.
Prototype even has a method built in to tell you how many active requests are going on. Something very important when dealing with different browsers. For instance, IE 6-8 only supported 2, while Firefox 2/3 gave you 5. Make sure you research the versions of browers you’re using before you start loading up Ajax calls. It might make sense to group a few things into one call if you can.
You read more about the Prototype Ajax API call here.
If you’re new to Ajax, and need more of a base primer on proper architecture and engineering of Ajax programs, make sure you keep checking back every day. I’m putting together a small lesson on getting started with Ajax, and I’d love to help you get started with it.
Thanks for reading! If you have any questions, please comment! And please don’t forget to follow me on twitter: @iamdanjoseph