Adding Ajax

Preface

Ajax: It is part revolution, part evolution, and some would say all hype. Ajax is an umbrella term used to encompass a set of technologies including:

• Markup, such as HTML, XHTML, XML, and SVG

• JavaScript

• CSS and XSLT

• Last but not least, browser objects, including the canvas object and the object that really makes Ajax, XMLHttpRequest

Despite all of the recent interest, most of these technologies have been around for about a decade. Why the interest now?

Ajax is more than just a set of technologies—it's also a determination to take web pages and applications in new directions. We've had this determination in the past, but we never had the tools with which to build these applications. Now, the specifications that were all new ten years ago have reached maturity, and, even more importantly, have broad support in web browsers. New specifications continue to appear, and tool makers cooperate much more than they did a few years ago.

Years ago when web developers made first tentative motions to add interactivity to web pages, we were constrained by browsers that supported completely different models, and at times, even different scripting languages. The use of Cascading Style Sheets (CSS) as a uniform way of adding presentation to a page was hampered by differing interpretations, not to mention proprietary extensions.

Now, CSS has almost universal support, and though there are still "quirks" in the system, most browsers support most of the specifications, and we're at a stage where what we can do exceeds what we can't do. As for scripting, through the efforts via the ECMA standards organization, we have a released version of JavaScript known as ECMAScript that is accepted and supported in all the major tools, in the Web and out.

The markup has become more sophisticated, and we're moving from the HTML with its vagaries to XHTML with its discipline. We're also adding new XML vocabularies, such as Scalable Vector Graphics (SVG)—a way of adding interactive graphics that don't depend on plug-ins and external objects. This is matched by the introduction of the Canvas object, both separate from any markup and included as part of the upcoming work on HTML5—the intermediate step between the older HTML and the more rigorous XHTML.

Yet we haven't completely abandoned the old proprietary objects. Now, rather than being implemented in one browser, their use is becoming universal. One such object is XMLHttpRequest, which allows us to make calls to web services directly from pages and then process the results dynamically without ever having to reload the page.

What does that mean to developers and consumers? It means being able to read an article, click it, and then edit it in place—all in the same page. We can also delete rows from a table and have the deletion happen instantaneously. Updates, too.

We can also add categories to a photo without reloading either the page or the photo. Or expand that photo to a larger size just by clicking on a thumbnail.

Our use of web forms has changed considerably. We can make a selection in one list and have another selection list automatically populated. We can sort a table using drag-and-drop, collapse fields to make room, or click on tabbed pages to fill in other parts of a large form or to see other information, again without having to reload the page.

Of course, what we think of as a "page" has changed, and there's good and bad with this new viewpoint. It's difficult to figure out how much to charge for ads by "page view" when a hundred pages can be loaded without once using a refresh. Search engine companies don't particularly understand dynamically generated links, and neither do screen readers. As for cases where scripting is disabled or nonexistent, well, that's a nonstarter when it comes to Ajax, with its dependence on JavaScript.

That's where the concept of progressive enhancement enters into the picture. Coined by Steven Champeon, progressive enhancement is based on the philosophy that Ajax effects are added as enhancements to existing web technologies, rather than as replacements. In other words, you still build the more traditional web application that's based on submitting a form to update a table, but then you enhance it by adding the capability to update the table with changes to the form fields without actually having to submit the form.

That tabbed page can become a series of vertical sections within a page if scripting is disabled; the data will still be there, just arranged differently. A slideshow can serve its content whether requested by an application created in PHP and residing on a Unix box, or via a JavaScript call from within Firefox, Safari, or Internet Explorer.

With the use of progressive enhancement, it doesn't matter if scripting is disabled or not, because no functionality is lost; it's just different. At the same time, the efficiencies that Ajax can add to a web application—and they are numerous—can still be provided to the 80 percent or so of people who do use an applicable browser and who do have scripting enabled.

The best thing of all for you? You're already halfway there.

Audience

One major assumption about the audience of a book about adding Ajax is that you're already a web developer looking to take your more traditional web applications to the next level by adding Ajax effects. Chances are, you already have the web forms, the server-side-driven pages, and the static content—or at a minimum, you are familiar with how traditional web applications work. You're actually lucky—you have the "business side" of the application down. Now it's time to take your page to the next level.

First though, a more in-depth look at the assumptions about the audience that drove this book. This book is intended for those who:

• Have some degree of experience with web markup, including HTML and XHTML.

• Understand the basics of XML, including the necessity of it being both valid and well-formed.

• Are familiar with relational databases and have worked with them at least once in either a production environment or just for your own interest.

• Have worked with CSS and can read most CSS stylesheets.

• Have worked with JavaScript and feel comfortable with it, and have a good idea of how object-oriented JavaScript works.

• Are more interested in extending existing applications than in creating what are known as Rich Internet Applications (RIA).

This book does not assume you're an expert in any one of the technologies just listed, only that you've had some experience and with a little help (from either an online resource or an other technology-specific book) can follow along with any of the applications.

The last item in the list of requirements is really the most important. This book does not cover the concepts needed for building a PowerPoint replacement within a web page or for creating online games and other purely scripted solutions.

This book focuses purely on enhancing existing web applications by adding Ajax effects—not replacing existing applications, and not building pure Ajax solutions from scratch. O'Reilly has other fine books focused more for those who are interested in writing the next web-based spreadsheet program; we just want to make livelier, fun, interesting, and much more interactive web pages.