Web Cash

Over the weekend, I decided it was finally time to learn how to use JS and AJAX. I’d deliberately avoided using JS for anything I could accomplish in PHP – but I admit that I was getting a bit intrigued by the AJAX hooplah.

I found some very useful resources for dealing with JS, AJAX, and DOM, so I thought I’d share them for any other eager learners.

Getting Started with AJAX

The first place I stopped in my quest for knowledge was the Mastering Ajax series of articles at IBM’s Developer Works.

I read through the first half of the series. Articles 1, 2, and 3 give a pretty good overview of how to create and use an AJAX request. The later articles introduce the DOM and provide a good overview of how to work with the AJAX response and edit the existing web page.

After reading the first two articles, I was able to re-craft the examples and create some basic AJAX-driven forms of my own. It wasn’t anything exciting – but the concept was easy enough to master.

Although you can get by without ever working directly with the AJAX request object, I agree with the author of this series of articles. It’s best to learn to do something the hard way first – then you can take shortcuts.

AJAX the Easy Way – Prototype.js

Later in the weekend, I set about creating my first real AJAX application. My Digg WordPress Plugin uses AJAX to check the Digg API for info on an article after the page has loaded.

I tried to rework the code that I’d built with the Developer Works tutorial, but I ran into a problem when I had to make more than one request. I knew I had to make extra instances of the HttpRequest object, but I was having trouble getting the code to execute the way I wanted it to. Admittedly I’m a JS newbie – the first Javascript I ever wrote was the code from the first AJAX tutorial.

I found a great solution though – prototype.js. This is a javascript/ajax framework that makes it much simpler to work with the base AJAX class.

This made it much easier to create multiple instances of an AJAX request class and have them simultaneously fire off and handle requests. It also handles some of the browser compatibility issues. I like to do things on my own, but I’m pretty sure I’ll be using prototype.js from now on for any AJAX projects I work on.

DOM: Document Object Model Resources

Once I got a hang of sending and processing requests with AJAX, I had to turn to DOM to edit the page. After reading through the Developer Works tutorial and fiddling a bit on my own, I found this surprisingly easy.

If you’ve got an understanding of OOP and XML, the DOM should be pretty straightforward for you. However, there are a decent amount of methods/properties you’ll run into. I found two great references that I’ll be using for a while until I get more familiar with the DOM methods/properties.

howtocreate.co.uk has a compact list of pertinent methods and properties. It’s not explained very well, but it’s good for looking up a method quickly. By contrast, Javascript Kit has a thorough reference of methods and properties with explanations. It’s a bit more verbose, but a better choice if you haven’t got a clue how a method works.

Working with JS, AJAX, and DOM is pretty simple – especially if you already know a scripting language like PHP. So don’t wait any longer – go out and add to your repertoire.

Tags: ajax, development, dom, javascript, resources