XML.com: XML From the Inside Out
oreilly.comSafari Bookshelf.Conferences.


What's New in Prototype 1.5?

January 24, 2007

The latest release of Ruby on Rails, version 1.2, was announced last week to great fanfare. But the announcement might have overshadowed news of a simultaneous release: version 1.5 of Prototype, the popular JavaScript library. Despite the synchronization and developer overlap between the two projects, nothing about Prototype depends on Rails—it's perfectly suitable for use with any server-side technology. In fact, Prototype has amassed a huge user base beyond the Rails community—from dozens of Web 2.0 startups to household names like Apple, NBC, and Gucci.

The Prototype library is fairly compact (about 15K), and decidedly not a kitchen-sink library. It doesn't provide custom widgets or elaborate visual effects. Instead, it just strives to make JavaScript more pleasant to work with. In many ways, Prototype acts like the missing standard library for JavaScript—it provides the functionality that arguably ought to be part of the core language.

Despite the minor version number bump, the 1.5 release is a major one. It's been over a year since 1.4 was released, and the library has made significant strides in that time, while retaining complete backward compatibility (with one notable exception, but more on that later). In this article, we'll look at what's new, organized into four major areas: Ajax support, String extensions, Array/Enumerable extensions, and DOM access.

For an introduction to some of Prototype's capabilities, see Prototype: Easing AJAX's Pain and The Power of Prototype.js. To get a feel for the breadth of the library, peruse the new, long-awaited API documentation on the new, long-awaited Prototype website. Or check out my book, Ajax on Rails, which includes an exhaustive reference to Prototype, as well as its companion library script.aculo.us. The Prototype reference is also available as a PDF: Prototype Quick Reference.

Ajax Support

Prototype is perhaps best known for its top-notch Ajax support. Of course, Ajax-style interactions can be created without a JavaScript library, but the process can be fairly verbose and error-prone. Prototype makes Ajax development more accessible by accounting for the varieties of browser implementations and providing a clear, natural API. The 1.5 release adds even more power, especially as relates to creating RESTful, HTTP-embracing requests. Prototype now has the ability to easily access HTTP request and response headers and simulate HTTP methods other than GET and POST by tunneling those requests over POST. Specifically:

  • Query parameters can now be provided as an object-literal to the parameters option on any Ajax method. The object is converted into a URL-encoded string. For example:

    // Requests /search?q=ajax%20tutorials
    new Ajax.Request('/search', { parameters:{ q:'ajax tutorials' } });

  • Like query parameters, request headers can also be provided as an object-literal to the requestHeaders option. For example:

    new Ajax.Request('/search', { requestHeaders:{ X-Custom-Header:'value1' } });

  • All requests now include an Accept header, which informs the server of the preferred response format. The default (text/javascript, text/html, application/xml, text/xml, */*) can be overridden using the requestHeaders option. For example:

    new Ajax.Request('/data', { requestHeaders:{ Accept:'text/plain' } });

  • The contentType option sets the Content-Type request header, which defaults to application/x-www-form-urlencoded. An encoding option can also be specified, which defaults to UTF-8. For example:

    var myXML = "<?xml version='1.0' encoding='utf-8'?>\n<rss version='2.0'>...</rss>"
    new Ajax.Request('/feeds', { postBody:myXML, contentType:'application/rss+xml', encoding:'UTF-8' });

  • The standard XMLHttpRequest object at the heart of Ajax functionality only allows HTTP GET and POST methods, but RESTfully-designed web applications often call for the lesser-used methods, like PUT and DELETE. Until browsers support the full range of HTTP methods, Prototype offers a compromise: "tunneling" those methods over POST, by including a _method query parameter with the request. You can now specify the intended HTTP method with the method option on all Ajax functions (the default is POST). Methods other than GET or POST will actually be requested with POST, but will have a _method query parameter appended to the request URL. For example:

    // Creates a POST request to /feeds/1.rss?_method=PUT
    new Ajax.Request('/feeds/1.rss', { method:'put', postBody:myXML, contentType:'application/rss+xml' });

    Of course, the server side of the application must be written to understand this convention as well, but if you use Rails, you'll get the behavior for free.

Pages: 1, 2, 3, 4, 5

Next Pagearrow