mitch's meanderings

When I first became involved in a project that would require Ajax techniques, I quickly went to the web in search of tutorials to learn how to use the XMLHttpRequest object. Following are the resources I found most helpful as I learned to create dynamic web applications. Links to various JavaScript libraries and other sites I like are also listed. Hat tip to Rushi for writing the post that prompted this compilation.

The Apple Developer Network is a great source of information including a nice, easy-to-follow introduction to The XMLHttpRequest Object. This brief tutorial includes a description of object methods and properties, simple examples of instantiation, and a fully functional example. Other good ADC articles include: Remote Scripting with IFRAME, Dynamic Content with DOM-2 Part I and Part II, and Object Detection.

Jim Ley’s article Using the XML HTTP Request Object shows you how to create an XHR object using conditional compilation that degrades nicely to support all browsers. Examples include using XHR to make a HEAD request, or to check if a URL exists.

Easy Ajax with Prototype-1 is a ridiculously simple example from 24 ways-2 and a great introduction to using prototype.js, the big-daddy of JavaScript libraries (read on for more information).

Getting Started with Ajax shows you how to make an Ajax request, then use the responseText property and DOM innerHTML property to update the page. Later, a slight modification to the example uses responseXML, and DOM manipulation to perform the same update. This article makes use of the XHConn library, a “simple XMLHTTP interface”.

There is a great post over on the QuirksBlog describing the pros and cons of XML, HTML, and JSON responses, (part II here). As you begin to develop web applications that use XHR, the response format/language you choose deserves some consideration. My projects thus far have all been simple enough to use the XHR responseText and DOM innerHTML property.

Paven Keely’s Reusing XMLHttpRequest Object in IE is a great read, as is Alex Bosworth’s Ajax Mistakes. For the authoritative (albeit dry) reference on the XHR object, see Microsoft’s IXMLHTTPRequest Members.

JavaScript Libraries

At some point you may want to consider the many JavaScript libraries available designed to make development easier (especially XHR calls) and/or provide some amazing effects.

prototype.js is a widely used library popularized by it’s use in 37 Signals many web-based offerings. The Ajax.Request and Ajax.Updater classes are fantastic! This library packs a powerful punch and is the basis for the Script.aculo.us and Rico effects libraries. If prototype is too much, try Moo.fx, a lightweight effects library based on “prototype-lite”. Lots of fun!

Other libraries worth considering include Dojo, MochiKit, Zimbra, and Yahoo! User Interface Library. In addition to XHR classes/objects each of these include other classes designed to streamline development. For libraries primarily focused on encapsulating the XHR object try the XHConn library, AHAH, or ASK.

Other Great Resources

Round-up of 30 AJAX Tutorials
XMLHttpRequest & Ajax Based Applications
Ajax Patterns
Ajax Matters
Ajaxian Blog

I hope this helps some of you get started. The Ajax buzz seems to have breathed new life into the web, and has certainly made it fun to develop.

Leave a comment if you have other good links!