July 21, 2019
Hot Topics:

Introducing Prototype and Scriptaculous Part 1

  • March 2, 2007
  • By Dave Crane and Bear Bibeault with Tom Locke
  • Send Email »
  • More Articles »

Ajax is growing up fast. One of the signs of that growth is the appearance, and widespread adoption, of a number of third-party libraries that make it easier to work with Ajax, and the web technologies that support it, such as DOM, CSS, and, above all, JavaScript. This two part series covers two related JavaScript libraries in depth: Prototype and Scriptaculous. Prototype provides many small-scale features that make it easier to work with Ajax applications. Scriptaculous leverages these features to build a number of higher-level user interface components. Together, they can give your Ajax development the edge, making it easy to express your ideas in JavaScript, and ridiculously easy to make your user interface sing.

In this article and the next, we'll set the scene for the Prototype and Scriptaculous libraries, describing how they relate to the bigger picture of Ajax development.

For your convenience we will take the libraries out for a quick spin in this article, using them to turbocharge a plain old Ajax application by cutting out a lot of unnecessary low-level code, and making it easy to create a fluid, pleasant user interface.

In the beginning of this article, we'll concentrate on Ajax; that is, the business of communicating between the browser and the server without causing the full page to refresh. By the end of part 1, you'll be able to make use of Prototype's support for Ajax in a variety of ways and we'll introduce an example application. In part 2, we'll move on to look at Scriptaculous in more detail and at Prototype's support for JavaScript and the DOM. We'll begin, though, with a brief review of Ajax, in order to set the context in which Prototype and Scriptaculous work.

A Brief History of Ajax

"Ajax" is a recently coined term used to describe the business of programming highly interactive web-based interfaces using nothing more than HTML, Cascading Style Sheets, and a good dose of JavaScript. People have been writing this sort of application for several years, but Jesse James Garrett only christened the practice in February 2005, and it has since gone on to become one of the hot tech topics.

The adoption of Ajax by the web community has been rapid, and the landscape has changed considerably. Prototype and Scriptaculous are in the thick of these changes, and it's useful to see where they're coming from. So, let's briefly put our tech-archaeologist hats on and dig through the history of Ajax.


If the history of Ajax began with Garrett's article in 2005, then the discipline has a rich prehistory, in which the techniques behind Ajax were being explored without a name around which to rally the various practitioners. Ajax was first made possible by the invention of an ActiveX component called XMLHttpRequest. This component allowed web applications to contact the web server without refreshing the entire page, but rather passing the response to a script for processing. These hidden requests for data are generally referred to as "asynchronous," a term that provides the first "A" in Ajax. Browsers had long been able to manipulate the user interface programmatically using the Document Object Model (DOM) and Cascading Style Sheets (CSS), but without the ability to fetch anything new from the server, full-page refreshes were still frequent. Adding XMLHttpRequest into the mix made it possible for an entire application workflow to be encapsulated within a single web page, which simply reorganized itself in response to asynchronous requests for data made while the user was working.

Technologically, this was a cool new toy to play with. In usability terms, it offered a major breakthrough, because it allows the user to continue working while the browser waits for the server to respond to a request. Without Ajax, web-based apps are characterized by frequent periods of inactivity while a new page is requested, and this stop-start pattern is unsuitable for any serious application. Nonetheless, webbased apps are beloved of tech support departments because they don't need to be installed on the user's machine, and can be upgraded instantly. The tension between these two factors is resolved by Ajax, making Ajax-powered web apps a compelling alternative to desktop apps and thick clients in a wide variety of applications.

XMLHttpRequest was made available with Internet Explorer 5, in 2000. However, the adoption of Ajax didn't happen then. Everyone who saw Microsoft Exchange Web Mail thought it was pretty neat, but few rushed in to copy it. Maybe the fact that it relied on ActiveX, and was therefore limited to Microsoft operating systems was seen as too great a drawback. Maybe broadband penetration wasn't sufficiently advanced to consider providing apps that required a constant connection to the server. Maybe it just looked too complicated or different. Whatever the case, the capability wasn't exploited by many, and it would take several years before widespread interest in the techniques developed and the barrier imposed by the stop-start workflow was finally lifted.

The Pioneer Phase

In these days of Ajax prehistory, a few hardy individuals-Eric Costello, Erik Hatcher, and Jim Ley, to name but three-explored the possibilities of communicating asynchronously with the server, and they even published descriptions of the techniques that they developed, sometimes using XMLHttpRequest and sometimes falling back on other browser features such as IFrames to enable asynchronous traffic. As well as these publicly visible efforts, several corporate or private developers (including ourselves) were also discovering the techniques and putting them to use internally.

Another group of pioneers deserve a mention in this section. These are the people who were exploring the JavaScript language and the browser environment in which JavaScript commonly sits. Doug Crockford did pioneering work on object-oriented JavaScript techniques back when it was generally regarded as a toy for script-kiddies. Piers-Paul Koch explored the intricacies of cross-browser behavior, and Dan Steinberg and Mike Foster developed entire frameworks for cross-browser DOM manipulation, some of which even predated XMLHttpRequest's first appearance. JavaScript is the glue that holds Ajax applications together, and their work has done a great deal to inform current thinking on Ajax web development.

When "Ajax" became a household name, then, there was already a rich seam of work by Crockford, Koch, and others waiting to be discovered. However, communication between these various efforts was limited, given the low profile of the subject prior to 2005, and the early Ajax landscape consisted largely of roll-your-own solutions and makeshift frameworks. With more eyes on the subject of developing large, robust JavaScript applications, though, the amount of effort in this area intensified.

The Settlers Arrive

The year 2005 saw an explosion in the number of Ajax and JavaScript frameworks, helper libraries, and other projects aimed at assisting in the development of Ajax apps. Ajax in Action (by Dave Crane and Eric Pascarello with Darren James) included a list of over forty frameworks, and several were certainly left out. The pioneers were being followed by a wave of settlers, staking out territory and busily setting up small settlements. Inevitably, some of these withered, and others grew into small towns. Over the next year or two, we can expect to see a reduction in completely hand-coded Ajax applications, as best practices and the results learned from other peoples' mistakes crystallize into frameworks and utilities.

Prototype and Scriptaculous are two of the more successful of these JavaScript frameworks, and they have grown quite a community in a short time. (In fact, according to the Ajaxian.com 2006 frameworks and libraries survey, Prototype and Scriptaculous dominated the field at 43 and 33 percent adoption respectively.) A large part of their design is focused on making Ajax development faster, easier, and more enjoyable. The impact of these, and other, frameworks on the nature of Ajax development is likely to be considerable.


That brings our history of Ajax development up to the present day. The phase that we'd consider analogous to "civilization" hasn't happened yet (and we won't even stop to consider the subsequent descent into barbarism that tends to plague real-world empires!). There are still many ways to get the job done using Ajax, and many of these ways are only partly compatible. In this article and the next, you'll learn the details of one particular way, but we'll also look at how Prototype and Scriptaculous can interact with other popular frameworks.

And so, without any further ado, let's start to unpack Prototype and Scriptaculous, and see what they're capable of.

Page 1 of 3

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date