Introducing Prototype and Scriptaculous Part 1
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.
A Brief History of Ajax
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.
The Settlers Arrive
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