AJAX In Action [23]
http://moon.google.com
The images of the bicycle were taken from the Pedaling History website: www.pedalinghistory.com
Licensed to jonathan zheng First steps with Ajax This chapter covers ■ Introducing the technologies behind Ajax ■ Using Cascading Style Sheets to define look and feel ■ Using the Document Object Model to define the user interface structure ■ Using XMLHttpRequest to asynchronously contact the server ■ Putting the pieces together 31 Licensed to jonathan zheng 32 CHAPTER 2 First steps with Ajax In chapter 1 we focused on users and how Ajax can assist them in their daily activities. Most of us are developers, and so, having convinced ourselves that Ajax is a Good Thing, we need to know how to work with it. The good news is that, as with many brand-new, shiny technologies, most of this process will be reasonably familiar already, particularly if you’ve worked with the Internet. In this chapter, we’ll explain the Ajax technology. We’ll discuss the four technological cornerstones of Ajax and how they relate to one another, using code examples to demonstrate how each technology works and how everything fits together. You might like to think of this chapter as the “hello world” section of the book, in which we introduce the core technologies using some simple examples. We’re more interested here in just getting things to work; we’ll start to look at the bigger picture in chapter 3. If you’re already familiar with some or all of the Ajax technologies, you may want to skim these sections. If you’re new to Ajax and to web client programming, these introductions should be sufficient to orient you for the rest of the book. 2.1 The key elements of Ajax Ajax isn’t a single technology. Rather, it’s a collection of four technologies that complement one another. Table 2.1 summarizes these technologies and the role that each has to play. Table 2.1 The key elements of Ajax JavaScript JavaScript is a general-purpose scripting language designed to be embedded inside applications. The JavaScript interpreter in a web browser allows programmatic interaction with many of the browser’s inbuilt capabilities. Ajax applications are written in JavaScript. Cascading Style CSS offers a way of defining reusable visual styles for web page elements. It offers a Sheets (CSS) simple and powerful way of defining and applying visual styling consistently. In an Ajax application, the styling of a user interface may be modified interactively through CSS. Document Object The DOM presents the structure of web pages as a set of programmable objects that Model (DOM) can be manipulated with JavaScript. Scripting the DOM allows an Ajax application to modify the user interface on the fly, effectively redrawing parts of the page. XMLHttpRequest The (misnamed) XMLHttpRequest object allows web programmers to retrieve data object from the web server as a background activity. The data format is typically XML, but it works well with any text-based data. While XMLHttpRequest is the most flexible general-purpose tool for this job, there are other ways of retrieving data from the server, too, and we’ll cover them all in this chapter. Licensed to jonathan zheng The key elements of Ajax 33 We saw in chapter 1 how an Ajax application delivers a complex, functioning application up front to users, with which they then interact. JavaScript is the glue that is used to hold this application together, defining the user workflow and business logic of the application. The user interface is manipulated and refreshed by using JavaScript to manipulate the Document Object Model (DOM), continually redrawing and reorganizing the data presented to the users and processing their mouse-and keyboard-based interactions. Cascading Style Sheets (CSS) provide a consistent look and feel to the application and a powerful shorthand for the programmatic DOM manipulation. The XMLHttpRequest object (or a range of similar mechanisms) is used to talk to the server asynchronously, committing