Ajax: The Definitive Guide pptx

Part I, Ajax Fundamentals, explains the basic technologies that form the core of Ajax and building Ajax applications: Chapter 1, Reinventing the Web Demonstrates how the first web sites

The Definitive Guide

Other resources from O’Reilly

Related titles Ajax Design Patterns

Programming ASP.NET AJAX

oreilly.com oreilly.com is more than a complete catalog of O’Reilly books.

You’ll also find links to news, events, articles, weblogs, samplechapters, and code examples

oreillynet.com is the essential portal for developers interested in

open and emerging technologies, including new platforms, gramming languages, and operating systems

pro-Conferences O’Reilly brings diverse innovators together to nurture the ideas

that spark revolutionary industries We specialize in ing the latest tools and systems, translating the innovator’sknowledge into useful skills for those in the trenches Visit

document-conferences.oreilly.com for our upcoming events.

Safari Bookshelf (safari.oreilly.com) is the premier online

refer-ence library for programmers and IT professionals Conductsearches across more than 1,000 books Subscribers can zero in

on answers to time-critical questions in a matter of seconds.Read the books on your Bookshelf from cover to cover or sim-ply flip to the page you need Try it today for free

The Definitive Guide

Anthony T Holdener III

Ajax: The Definitive Guide

by Anthony T Holdener III

Copyright © 2008 Anthony T Holdener III All rights reserved.

Printed in the United States of America.

Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472 O’Reilly books may be purchased for educational, business, or sales promotional use Online editions

are also available for most titles (safari.oreilly.com) For more information, contact our

corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com.

Editor: Simon St.Laurent

Production Editor: Rachel Monaghan

Copyeditor: Audrey Doyle

Proofreader: Rachel Monaghan

Indexer: Ellen Troutman Zaig

Cover Designer: Karen Montgomery

Interior Designer: David Futato

Illustrator: Jessamyn Read

Printing History:

January 2008: First Edition.

Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of

O’Reilly Media, Inc Ajax: The Definitive Guide, the image of a woolly monkey, and related trade dress

are trademarks of O’Reilly Media, Inc.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and O’Reilly Media, Inc was aware of a trademark claim, the designations have been printed in caps or initial caps.

While every precaution has been taken in the preparation of this book, the publisher and author assume

no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

ISBN: 978-0-596-52838-6

To Sarah, the love of my life and my unending

inspiration.

And to Kate and Tony, whom I hope to always

inspire.

Table of Contents

Preface xiii

1 Reinventing the Web 3

3 Servers, Databases, and the Web 35

4 Foundations: Scripting XML and JSON 68

5 Manipulating the DOM 103

7 Laying Out Site Navigation 175

8 Fun with Tables and Lists 247

Lists 2.0 291

9 Page Layout with Frames That Aren’t 316

10 Navigation Boxes and Windows 335

11 Customizing the Client 363

12 Errors: To Be (in Style) or Not to Be 408

13 This Ain’t Your Father’s Animation 434

14 A Funny Thing Happened on the Way to the Form 482

15 Data Validation: Client, Server, or Both 534

Part III Ajax in Applications

16 Search: The New Frontier 565

17 Introducing Web Services 594

18 Web Services: The APIs 619

19 Mashups 659

Mashups As Applications 661

20 For Your Business Communication Needs 672

21 Internet Games Without Plug-ins 721

Part IV Wrapping Up

22 Modular Coding 789

23 Optimizing Ajax Applications 807

Part V References

A The XML and XSLT You Need to Know 843

B JavaScript Framework, Toolkit, and Library References 863

C Web Service API Catalog 892

D Ajax Risk References 916

Index 925

Ajax melds together existing technologies to help developers give web users a moreadvanced browsing experience By utilizing XHTML, CSS, JavaScript, and XML, all

browsers into application platforms that closely mirror desktop applications Thiscapability is allowing existing web sites to convert to Web 2.0 sites, while increasingthe number of new web applications that can be found on the Internet today

Not that long ago, some web technologies, especially JavaScript, were losing theiruser base as developers turned their attention to other technologies, such as Flash,

that could provide more of the functionality that was needed The coining of Ajax in

2005 gave JavaScript the shot in the arm that some developers felt was sorely needed,and since then, some truly wonderful things have been done with JavaScript thatwere never thought possible before

New innovations, together with the functionality of Ajax, have given the Web a new

look and appeal Ajax: The Definitive Guide explores what you can do with Ajax to

enhance web sites and give them a Web 2.0 feel, and how additional JavaScriptenhancements can turn a web browser and web site into a true application Evenbefore that, you will get a background on what goes into today’s web sites and appli-cations Knowing what comprises Ajax and how to use it helps you apply it moreeffectively and integrate it with the latest web technologies (advanced browser search-ing, web services, mashups, etc.) This book also demonstrates how you can buildapplications in the browser, as an alternative to the traditional desktop application.Ajax is giving developers a new way to create content on the Web while throwing offthe constraints of the past Web 2.0 technologies are being integrated with Ajax togive the Web a new punch that could only be achieved before with browser plug-ins.Ajax is helping to redefine how we all should look at the Web, and I hope this bookputs you on the path to defining your own Web 2.0 applications

Who Should Read This Book

This book is intended for two very different types of people: web developers, andproject managers or other higher-level people who do not necessarily need to know

the nitty-gritty details but would benefit from a general overview of how this Ajax

stuff works The different parts of the book will reflect these different audiences.

Web Developers

For web developers, this book assumes the following:

• You have had some experience with HTML/XHTML

• You have experience using CSS, and you understand the principles behind rating presentation from content

sepa-• You understand JavaScript syntax and have written scripts with it

• You are comfortable with server-side scripting in at least one language, whether

it be ASP.NET, PHP, Python, or something similar

• You have some experience with relational databases and how to retrieve datafrom them

This book does not expect you to be an expert in all of these skills, but it does expectthat you can figure things out on your own or that you can get help from anotherresource (another book on the technology, perhaps) so that you can follow alongwith the examples presented

Server-side code examples throughout the book will use PHP, as it seems to be themost readily understandable to the widest range of developers

Managers

Project managers reading this book may not need such a rigid set of prerequisites.This book expects that you have seen web technology before and that you under-stand the concept of client-side and server-side development It also expects that youcan recognize HTML, CSS, and JavaScript, though there is no need to have ever doneanything with them Finally, this book expects that Internet terms and phrases arenot foreign to you so that you can follow along with the examples Managers willprobably want to spend more time on the first three chapters to get a broad idea ofhow Ajax fits into the Web and into application development

How This Book Is Organized

This book consists of five parts, each focusing on a different aspect of Ajax It is tainly not necessary to read it from beginning to end, though later parts of the book

cer-do build on ideas from previous parts The five parts of the book comprise 23 chapters

and four appendixes Part I is intended for project managers looking to get a leg up

on Ajax, or for anyone who is looking for its fundamentals The rest of the bookfocuses on using Ajax from a programming point of view

Part I, Ajax Fundamentals, explains the basic technologies that form the core of Ajax

and building Ajax applications:

Chapter 1, Reinventing the Web

Demonstrates how the first web sites were completely data-driven sites withoutthe benefit of tools to improve page presentation, whereas today’s Web is com-pletely different From the tools that are used to develop sites to the fact that theWeb is now very much driven by a combination of media and data, today isnothing like yesterday

Chapter 2, From Web Sites to Web Applications

Explains the nature of web site construction in the past versus the applicationsthey have become, and the fact that they require the same process and designapproach utilized by developers for regular desktop applications

Chapter 3, Servers, Databases, and the Web

Shows the technologies available on the server side of web applications, brieflydiscussing each and how you can use them as a backend to an Ajax application

An introduction to databases rounds out the topic

Chapter 4, Foundations: Scripting XML and JSON

explores XML and JSON responses and their advantages and disadvantages.Frameworks that make Ajax simpler are also addressed

Chapter 5, Manipulating the DOM

Explores manipulation and utilization of the DOM for JavaScript, examining ferences between Internet Explorer’s handling of the DOM versus that of otherbrowsers This chapter also gives an overview of everything necessary for a devel-oper to work with the DOM

dif-Chapter 6, Designing Ajax Interfaces

Examines the different parts of a web interface and how to lay out an Ajax cation so that it is usable, functional, visually pleasing, and accessible

appli-Part II, Ajax Foundations, describes how these technologies are applied in an Ajax

web application:

Chapter 7, Laying Out Site Navigation

Shows the different components that make up a web application and how youcan enhance them using Ajax This chapter also explores how some Ajax tech-niques can break browser functionality

Chapter 8, Fun with Tables and Lists

Examines how to properly create a table, enhance it, and add functionality withAjax It also discusses the different uses for Ajax-enhanced lists

Chapter 9, Page Layout with Frames That Aren’t

explains how to emulate their behavior using XML with Ajax, JavaScript, and CSS

Chapter 10, Navigation Boxes and Windows

Examines how to create navigation controls that do not rely on the defaultbrowser’s window to display messages to the user, by using Ajax to transportinformation back and forth between client and server

Chapter 11, Customizing the Client

Shows how to customize the user’s experience with an application that uses Ajax

to send new data to the client when the user requests it, giving the application aWeb 2.0 feel

Chapter 12, Errors: To Be (in Style) or Not to Be

Shows how to handle errors thrown by the application, how to use Ajax to sendmessages back to the server when it is called for, and how to determine when todisplay errors to the user

Chapter 13, This Ain’t Your Father’s Animation

Examines the traditional method for animating images on the Internet, the advantages of using the GIF format, and the advantages of the PNG format.Then this chapter shows how you can use PNGs for animation on the Web andhow to use Ajax to asynchronously download images in the background

dis-Chapter 14, A Funny Thing Happened on the Way to the Form

Explains the significance of forms on the Web, regardless of the backendmarkup used, and shows the additions for making forms accessible Then thischapter examines how you can build custom form types to follow the style of theoverall page, and how Ajax is used in Web 2.0 forms

Chapter 15, Data Validation: Client, Server, or Both

Shows how Ajax can aid in the validation of data in an XHTML form withoutrequiring a lot of extra time on behalf of the client, and where validation shouldtake place in a web application

Part III, Ajax in Applications, shows you how to integrate Ajax into applications to

create faster and more responsive web components:

Chapter 16, Search: The New Frontier

Explores available methods for searching pages on a site, their advantages anddisadvantages, and how you can leverage Ajax to bring more intelligent andhelpful functionality to searching

Chapter 17, Introducing Web Services

Examines web services and their role on the Internet, exploring the different cols that are used—from SOAP to REST and everything in between—and showshow you can take advantage of these services with Ajax behind the scenes

proto-Chapter 18, Web Services: The APIs

Gives a brief introduction to some of the web services that are available on theInternet, and how to use the APIs that make up the frontend to these services.This chapter also shows how JavaScript and Ajax can take advantage of theseservices in creating dynamic content

Chapter 19, Mashups

Explains how mashups are created from different web services and how Ajax canbring together services in a way that makes them even more seamless than theoriginal mashups

Chapter 20, For Your Business Communication Needs

Shows how you can use the different techniques you learned in the first parts ofthis book to develop components for business applications, and how you canuse these components to build a business mashup that has desktop applicationfunctionality

Chapter 21, Internet Games Without Plug-ins

Shows how to build on the techniques you learned earlier in this book todevelop an Internet game that relies on JavaScript and Ajax without the need forbrowser plug-ins This chapter also examines the different gaming genres andexplains which ones make the best Internet games for Ajax

Part IV, Wrapping Up, summarizes how to best structure Ajax applications, and how

to write them with optimization in mind:

Chapter 22, Modular Coding

Explains modular coding through all aspects of the application, from theXHTML markup, CSS styling, and JavaScript functionality on the client side, toserver modules and SQL stored procedures on the server side, and what this pro-gramming technique brings to an application

Chapter 23, Optimizing Ajax Applications

Explores techniques that you can use on both the client side and the server side

of an Ajax application to make it run as quickly and efficiently as possible inlight of the web technologies used

Part V, References, contains the appendixes that refer you to important parts of Ajax

development:

Appendix A, The XML and XSLT You Need to Know

Discusses XML and XSLT, how to use them, and how to leverage them within aweb framework

Appendix B, JavaScript Framework, Toolkit, and Library References

Discusses the major JavaScript frameworks, libraries, and toolkits—includingPrototype, script.aculo.us, Dojo, Ajax.NET, the Yahoo! User Interface, andothers—showing how each implements an Ajax wrapper or manipulates XML

Appendix C, Web Service API Catalog

Discusses some of the major web services currently available on the Internet, alongwith the protocol(s) used to implement the APIs, and whether they are free

Appendix D, Ajax Risk References

Discusses the major risks associated with implementing Ajax, such as security,default browser functionality, and accessibility, so that developers know what toexpect regarding the Ajax and Web 2.0 technologies

Conventions Used in This Book

The following typographical conventions are used in this book:

Constant width bold

Indicates commands or other text that the user should type literally

Constant width italic

Indicates text that should be replaced with user-supplied values or values mined by context

deter-This icon signifies a tip, suggestion, or general note You’ll also see

notes regarding the WCAG guidelines Even if you aren’t interested in

accessibility specifically, these are useful best practices.

This icon indicates a warning or caution.

Using Code Examples

This book is here to help you get your job done In general, you may use the code inthis book in your programs and documentation You do not need to contact us forpermission unless you’re reproducing a significant portion of the code For example,writing a program that uses several chunks of code from this book does not requirepermission Selling or distributing a CD-ROM of examples from O’Reilly books doesrequire permission Answering a question by citing this book and quoting example

code does not require permission Incorporating a significant amount of examplecode from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution An attribution usually includes the title,

author, publisher, and ISBN For example: “Ajax: The Definitive Guide, by Anthony T.

Holdener III Copyright 2008 Anthony T Holdener III, 978-0-596-52838-6.”

If you feel your use of code examples falls outside fair use or the permission given

here, feel free to contact us at permissions@oreilly.com.

Safari® Books Online

When you see a Safari® Books Online icon on the cover of yourfavorite technology book, that means the book is available onlinethrough the O’Reilly Network Safari Bookshelf

Safari offers a solution that’s better than e-books It’s a virtual library that lets youeasily search thousands of top tech books, cut and paste code samples, downloadchapters, and find quick answers when you need the most accurate, current informa-

tion Try it for free at http://safari.oreilly.com.

I could never have imagined when I started writing this, my first book, just howmuch work and time would go into it, or how I would rely on so many others tocomplete this undertaking

First and foremost, I want to thank my wife, Sarah, for her love, support, and standing Sarah, without you, I never would have succeeded in this endeavor I loveyou with all my heart Thank you for allowing me the late nights and countless week-ends to work toward this dream You have sacrificed so much of your life taking care ofthings while I could not, and for that, I do not have the words to express my gratitude

under-I want to thank Kate and Tony for their understanding that Daddy was not there forthe better part of a year I hope that as you get older, you will use this as an example

of knowing that your dreams are attainable with hard work I love you both, and I

hope to make up the time that I have missed Kate and Tony, Daddy is not working

on his ’puter

I want to thank my family, and that goes to everyone who chipped in and helpedwith the kids and I do not even know what else, as I worked away on my laptop All

of you gave up countless hours of your own time so that I could write It humbles me

to know I have so much love and support around me

I want to thank Gateway EDI, Inc for their willingness to work with me as Icrunched to get this book finished It was reassuring to know that I had that supportfrom them, and it made it less stressful down the home stretch

I want to thank all of my reviewers; no matter how small your contribution, I amgrateful for the comments, suggestions, and corrections that I received Thanks go toJohn Aughey, Prerit Bhakta, Zachary Kessin, Steve Olson, Bruce W Perry, StacyTrease, and Chris Wells—all of the work has been much appreciated

I want to thank Simon St.Laurent, my editor, for calming me down when I wouldstart to panic, working with me to give me the time that I needed, and giving me thechance to write this book in the first place This whole process, being my first and,hopefully, not last, was made almost painless with your help and guidance I cannotbegin to thank you enough

I also want to thank everyone else who helped get this book ready for production.Thanks to Audrey Doyle for all of the catches, corrections, and changes that havemade this so much more readable Thanks to Rachel Monaghan for all of the workyou put into the production of this book, as well as the proofreading Thank you,Karen, for giving me such a great animal! And thanks to Ellen, David, Jessamyn, andeveryone else who made this book what it is

I have spent more than a year working to see this book become a reality Everythingelse in my life took somewhat of a backseat as this happened I want everyone toknow that with the publication of this book comes the completion of one of my lifegoals—I could not have done it without all of the support that I received

PART I

Chapters 1 through 6 provide the basic ideas that form the fundamental core of Ajaxand building Ajax applications This part of the book discusses the technologies andfoundations that you will need to know before moving on to Ajax within applica-tions and as components

Chapter 1, Reinventing the Web

Chapter 2, From Web Sites to Web Applications

Chapter 3, Servers, Databases, and the Web

Chapter 4, Foundations: Scripting XML and JSON

Chapter 5, Manipulating the DOM

Chapter 6, Designing Ajax Interfaces

Chapter 1 CHAPTER 1

Back in 1996, the Web was incredibly exciting, but not a whole lot was actually pening on web pages Programming a web page in 1996 often meant working with astatic page, and maybe a bit of scripting helped manage a form on that page Thatscripting usually came in the form of a Perl or C Common Gateway Interface (CGI)script, and it handled basic things such as authorization, page counters, search que-ries, and advertising The most dynamic features on the pages were the updating of acounter or time of day, or the changing of an advertising banner when a pagereloaded Applets were briefly the rage for supplying a little chrome to your site, ormaybe some animated GIF images to break the monotony of text on the page.Thinking back now, the Web at that time was really a boring place to surf

hap-But look at what we had to use back then HTML 2.0 was the standard, with HTML3.2right around the corner You pretty much had to develop for Internet Explorer 3.0

or Netscape Navigator 2.1 You were lucky if someone was browsing with a

anything that felt truly cool or creative

Since then, tools, standards, hardware technology, and browsers have changed somuch that it is difficult to draw a comparison between what the Web was then andwhat it is today Ajax’s emergence signals the reinvention of the Web, and we shouldtake a look at just how much has changed

If you want to jump into implementation, skip ahead to Chapter 4.

You can always come back to reflect on how we got here.

Web Page Components

When a carpenter goes to work every day, he takes all of his work tools: hammer, saw,screwdrivers, tape measure, and more Those tools, though, are not what makes ahouse What makes a house are the materials that go into it: concrete for a foundation;

wood and nails for framing; brick, stone, vinyl, or wood for the exterior—you get the

idea When we talk about web tools, we are interested in the materials that make up

the web pages, web sites, and web applications, not necessarily the tools that areused to build them Those discussions are best left for other books that can focusmore tightly on individual tools Here, we want to take a closer look at these webtools (the components or materials, if you will), and see how these components havechanged over the history of the Web—especially since the introduction of Ajax

Classic Web Components

The tools of the classic web page are really more like the wood-framed solid or tle walls of the Neolithic period They were crude and simple, serving their purposebut leaving much to be desired They were a renaissance, though Man no longerlived the lifestyle of a nomad following a herd, and instead built permanent settle-ments to support hunting and farming In much the same way, the birth of the Weband these classic web pages was a renaissance, giving people communication toolsthey never had before

wat-The tools of the classic Web were few and simple:

• HyperText Markup Language (HTML)

• HyperText Transfer Protocol (HTTP)

Eventually, other things went into the building of a web page, such as CGI scriptingand possibly even a database

The World Wide Web Consortium (W3C) introduced the Cascading

Style Sheets Level 1 (CSS1) Recommendation in December 1996, but

it was not widely adopted for some time after Most of the available

web browsers were slow to adopt the technology It wasn’t until

browser makers began to support CSS that it even made sense to start

using the technology.

HTML provided everything in a web page in the classic environment There was noseparation of presentation from structure; JavaScript was in its infancy at best, andcould not be used to create “dynamic HTML” through Document Object Model(DOM) manipulation, because there was no DOM If the client and the server were

to communicate, they did so using very basic HTTP GET and, sometimes, POSTcalls

The basic structure is still there, though (unless the building was designed by FrankLloyd Wright); walls run parallel and perpendicular to one another at 90-degreeangles, and all of the structure’s basic elements, including plumbing, electricity, andlighting, are the same—they are just enhanced.

In this way, the structure of an Ajax application is built on an underlying structure ofXHTML, which was merely an extension of HTML, and so forth Here are what Iconsider to be the tools used to build Ajax web applications:

• Extensible HyperText Markup Language (XHTML)

• Document Object Model (DOM)

• JavaScript

• Cascading Style Sheets (CSS)

• Extensible Markup Language (XML)

Now, obviously, other things can go into building an Ajax application, such asExtensible Stylesheet Language Transformation (XSLT), syndication feeds with RSSand Atom (of course), some sort of server-side scripting (which is often overlookedwhen discussing Ajax in general), and possibly a database

XHTML is the structure of any Ajax application, and yes, HTML is too, but wearen’t going to discuss older technology here XHTML holds everything that is going

to be displayed on the client browser, and everything else works off of it The DOM

is used to navigate all of the XHTML on the page JavaScript has the most importantrole in an Ajax application It is used to manipulate the DOM for the page, but moreimportant, JavaScript creates all of the communication between client and server thatmakes Ajax what it is CSS is used to affect the look of the page, and is manipulateddynamically through the DOM Finally, XML is the protocol that is used to transferdata back and forth between clients and servers

Case Study

You may not think that changing and adding tools would have that much of animpact on how a site functions, but it certainly does For a case study, I want to turnyour attention to a site that actually existed in the classic web environment, andexists now as a changed Ajax web application Then there will be no doubt as to justhow far the Web has come

The following is a closer look at MapQuest, Inc (http://www.mapquest.com/), how it

functioned and existed in 2000, and how it functions today

The application then

Most people are familiar with MapQuest, seen in Figure 1-1, and how it pretty muchsingle-handedly put Internet mapping on the map (no pun intended) For those whoare not familiar with it, I’ll give the briefest of introductions MapQuest was

launched on February 5, 1996, delivering maps and directions based on user-definedsearch queries It has been the primary source for directions and maps on the Webfor millions of people ever since (well, until Google, at least).

As MapQuest evolved, it began to offer more services than just maps and drivingdirections By 2000, it offered traffic reports, travel guides, and Yellow and WhitePages as well How did it deliver all of these services? The same way all other Inter-net sites did at the time: click on a link or search button, and you were taken to anew page that had to be completely redrawn The same held true for all of the mapnavigation A change in the zoom factor or a move in any direction yielded a roundtrip to the server that, upon return, caused the whole page to refresh You will learnmore about this client/server architecture in the section “Basic Web and Ajax DesignPatterns” in Chapter 2

What you really need to note about MapQuest—and all web sites in general at thetime—is that for every user request for data, the client would need to make a roundtrip to the server to get information The client would query the server, and when theserver returned with an answer, it was in the form of a completely new page that

Figure 1-1 MapQuest’s home page in 2000, according to The Wayback Machine (http://www archive.org/)

needed to be loaded into the browser Now, this can be an extremely frustrating cess, especially when navigating a map or slightly changing query parameters for adriving directions search And no knock at MapQuest is intended here After all, thiswas how everything was done on the Internet back then; it was the only way to dothings.

pro-The Web was still in its click-wait-click-wait stage, and nothing about a web pagewas in any way dynamic Every user interaction required a complete page reload,accompanied by the momentary “flash” as the page began the reloading process Itcould take a long time for these pages to reload in the browser—everything on thepage had to be loaded again This includes all of the background loading of CSS andJavaScript, as well as images and objects Figure 1-2illustrates the flow of interac-tion on the Web as it was in 2000

The application now

In 2005, when Google announced its version of Internet mapping, Google Maps,everything changed both for the mapping industry and for the web developmentindustry in general The funny thing was that Google was not using any fancy newtechnology to create its application Instead, it was drawing on tools that had beenaround for some time: (X)HTML, JavaScript, and XML Soon after, all of the majorInternet mapping sites had to upgrade, and had to implement all the cool featuresthat Google Maps had, or they would not be able to compete in the long term.MapQuest, shown in Figure 1-3, did just that

Figure 1-2 The flow of a typical interaction on the Web in 2000

Jesse James Garrett coined the term Ajax in February 2005 in his

essay, “Ajax: A New Approach to Web Applications” (http://www.

adaptivepath.com/publications/essays/archives/000385.php) Although he

used Ajax, others began using the acronym AJAX (which stands for

Asynchronous JavaScript and XML) I prefer the former simply because

the X for XML is not absolutely necessary for Ajax to work; JavaScript

Object Notation (JSON) or plain text could be used instead.

Now, when you’re browsing a map, the only thing on the page that refreshes whennew data is requested is the map itself It is dynamic This is also the case when youget driving directions and wish to add another stop to your route The whole pagedoes not refresh, only the map does, and the new directions are added to the list Theresult is a more interactive user experience

Ajax web applications remove the click-wait-click-wait scenario that has plagued theWeb for so long Now, when you request information, you may still perform othertasks on the page while your request (not the whole page) loads All of this is done

by using the Ajax tools discussed earlier, in the “Ajax” section of this chapter, and

Figure 1-3 MapQuest’s home page, after Ajaxification

the standards that apply to them After reading the section “Standards Compliance,”later in this chapter, you will have a better idea of why coding to standards is impor-tant, and what it means when a site does not validate correctly (MapQuest, inciden-tally, does not) Figure 1-4 shows how Ajax has changed the flow of interaction on aweb page.

The addition of Ajax as a tool to use in web applications allows a developer to makeuser interaction more similar to that of a desktop application Flickering as a page isloaded after user interaction goes away The user will perceive everything about theweb application as being self-contained With this technology a savvy developer canmake an application function in virtually the same way, whether on the Web or onthe desktop

Modern Web Standards

Web standards: these two words evoke different feelings in different people Some

will scoff and roll their eyes, some will get angry and declare the need for them, andsome will get on a soapbox and preach to anyone who will listen Whatever yourview is, it is time to reach a common ground on which everyone can agree The sim-ple fact is that web standards enable the content of an application to be made avail-able to a much wider range of people and technologies at lower costs and fasterdevelopment speeds

Using the standards that have been published on the Web (and making sure they validate) satisfies the following Web Accessibility Initiative- Web Content Accessibility Guidelines (WAI-WCAG) 1.0 guideline:

• Priority 2checkpoint 3.2: Create documents that validate to lished formal grammars.

pub-Figure 1-4 The flow of an Ajax interaction within a web page

XHR request 2

XHR request n XHR response n

XHR request 1 Page request 1

XHR response 2 XHR response 1 Page response 1

In the earlier years of the Web, the browser makers were to blame for difficulties inadopting web standards Anyone that remembers the days of the 4.0 browsers, morecommonly referred to as the “Browser Wars,” will attest to the fact that nothing youdid in one environment would work the same in another No one can really blameNetscape and Microsoft for what they did at the time Competition was stiff, so whywould either of them want to agree on common formats for markup, for example?This is no longer the case Now developers are to blame for not adopting standards.Some developers are stuck with the mentality of the 1990s, when browser quirks mode,coding hacks, and other tricks were the only things that allowed code to work in allenvironments Also at fault is “helpful” What You See Is What You Get (WYSIWYG)software that still generates code geared for 4.0 browsers without any real thought todocument structure, web standards, separating structure from presentation, and soforth.

Now several standards bodies provide the formal standards and technical tions we all love and hold dear to our hearts For our discussion on standards, we

specifica-will be concerning ourselves with the W3C (http://www.w3.org/), Ecma tional (formerly known as ECMA; http://www.ecma-international.org/), and the Inter- net Engineering Task Force (IETF; http://www.ietf.org/) These organizations have

Interna-provided some of the standards we web developers use day in and day out, such asXHTML, CSS, JavaScript, the DOM, XML, XSLT, RSS, and Atom

Not only does Ajax use each standard, but also these standards are either the damental building blocks of Ajax or may be used in exciting ways with Ajax webapplications

fun-XHTML

On January 26, 2000, the W3C published “XHTML 1.0: The Extensible HyperTextMarkUp Language,” a reformulation of HTML 4.01 as XML Unfortunately, eventoday XHTML 1.0 is still not incorporated in a vast majority of web sites It may bethat people are taking the “if it ain’t broke, don’t fix it” mentality when it comes tochanging their markup from HTML 4.01 to XHTML 1.0, it may be that people just

do not see the benefits of XML, or it may be, as is especially true in corporate ronments, that there is simply no budget to change sites that already exist andfunction adequately Even after a second version of the standard was released onAugust 1, 2002, incorporating the errata changes made to that point, it still wasnot widely adopted

envi-On May 31, 2001, even before the second version of XHTML 1.0 was released, theW3C introduced the “XHTML 1.1—Module-based XHTML Recommendation.”This version of XHTML introduced the idea of a modular design, with the intention

that you could add other modules or components to create a new document typewithout breaking standards compliance (though it would break XHTML compli-ance); see Example 1-1 All deprecated features of HTML (presentation elements,framesets, etc.) were also completely removed in XHTML 1.1 This, more than any-thing, slowed the adoption of XHTML 1.1 in the majority of web sites, as few peo-ple were willing to make the needed changes—redesigning site layout without framesand adding additional attributes to elements, not to mention removing presentationand placing that into CSS Contributing to XHTML 1.1’s lack of deployment is thefact that it is not backward-compatible with XHTML 1.0 and HTML.

Although the vast majority of web sites out there are not following the XHTML 1.1Recommendation, it has tremendous potential for certain key areas The develop-ment of new applications on the Web, and the use of those applications on differentplatforms such as mobile and wireless devices, is leading to a greater rate of adop-tion than when XHTML 1.1 was first published For this reason, I believe it is impor-tant to recognize the power and potential of XHTML 1.1 Therefore, we will followthis standard in nearly every example in this book (see Chapters 20 and 21 for differ-ent standards usage)

With that said, we must be mindful that the future of web application development isbeing proposed right now Already the W3C has a working draft for an XHTML 2.0specification In XHTML 2.0, HTML forms are replaced with XForms, HTMLframes are replaced with XFrames, and DOM Events are replaced with XML Events

It builds on past recommendations, but when the XHTML 2.0 Recommendation ispublished, it will define the beginning of a new era in web development You shouldnote that XHTML 2.0 is not designed to be backward-compatible Development tak-ing advantage of this recommendation will most likely be geared toward more spe-cialized audiences that have the ability to view such applications, and not the generalpublic It will be some time before this recommendation gets its feet off the ground,but I felt that it was worth mentioning You can find more information on the

XHTML family of recommendations at http://www.w3.org/MarkUp/.

Example 1-1 The simplest XHTML 1.1 document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Example 1-1 The simplest XHTML 1.1 document</title>

<meta http-equiv="content-type" content="text/xml; charset=utf-8" />

The European Computer Manufacturer’s Association (ECMA) International controlsthe recommendations for ECMAScript JavaScript 1.5 corresponds to the ECMA-262

Edition 3 standard that you can find at http://www.ecma-international.org/publications/

standards/Ecma-262.htm As of 2009, the latest implemented version of JavaScript is 1.

9, which builds upon all of its predecessors (1.5 through 1.8.1) - all of which spond to ECMA-262 Edition 3 starting at 1.5 This latest addition includes ECMAS-cript 5 compliance, and is projected to first be seen in Mozilla Firefox 4

corre-JavaScript technically does not comply with ECMA International standards Mozillahas JavaScript, Internet Explorer has JScript, and Opera and Safari have otherECMAScript implementations, though it should be noted that Mozilla is closer tostandards than Internet Explorer is Most of these browsers have now implemented

to at least JavaScript 1.7, with the exception being Internet Explorer and ingly, Opera, who have still only implemented to JavaScript 1.5 For this reason allcode examples, unless otherwise noted, are based on this version

surpris-The New Kid on the Block?

The Web Hypertext Application Technology Working Group (WHATWG)announced its arrival June 4, 2004 Its mission, according to its web site, is “to developspecifications based on HTML and related technologies to ease the deployment ofinteroperable Web Applications, with the intention of submitting the results to a stan-dards organization.”

The group was formed with the idea of creating a single development environment onwhich web applications are built To that end, it is publishing technical specificationsintended for implementation in what it calls “mass-market web browsers” such asSafari, Mozilla, and Opera

Its current work, now proceeding jointly with the W3C, is HTML 5 HTML 5 dons the strictness of XML that XHTML had adopted, and focuses on adding new fea-tures to HTML itself Added elements includenav,article,aside,section,header,footer,mark,time,meter,progress,figure,dialog,datagrid,details,menu,command,and more

aban-HTML 5 is currently only a draft specification, and is not available in browsers

The DOM

The Document Object Model, a Level 2specification built onto the existing DOM

Events, Style, and Traversaland Rangemodules were introduced on November 13,

2000 The HTML module was introduced on January 9, 2003

The DOM Level 3 specification built onto its predecessor as well The moduleschanged around somewhat, but what this version added to DOM Level 2was greaterfunctionality to work with XML This was an important specification, as it adds to

7, 2004

Not all of the modules for DOM Level 3 have become recommendations yet, and

group notes since February 26, 2004 These modules will further shape the ways inwhich developers can interact with the DOM, subsequently shaping how Ajax appli-cations perform as well

The W3C’s DOM Technical Reports page is located at http://www.w3.org/DOM/

DOMTR.

Cascading Style Sheets (CSS)

The W3C proposed the “Cascading Style Sheets Level 2(CSS2) Recommendation”

on May 12, 1998 Most modern browsers support most of the CSS2 specifications,though there are some issues with full browser support, as you will see in the

“Browsers” section, later in this chapter The CSS2specification was built onto the

“Cascading Style Sheets Level 1 (CSS1) Recommendation,” which all modern ers should fully support

brows-Because of poor adoption by browsers of the CSS2Recommendation, the W3Crevised CSS2 with CSS2.1 on August 2, 2002 This version was more of a workingsnapshot of the current CSS support in web browsers than an actual recommenda-tion CSS2.1 became a Candidate Recommendation on February 24, 2004, but itwent back to a Working Draft on June 13, 2005 to fix some bugs and to match thecurrent browser implementations at the time

Browsers are working toward full implementation of the CSS2.1 standard (somemore than others), even though it is still a working draft, mainly so that when thenewer Cascading Style Sheets Level 3 (CSS3) finally becomes a recommendation they

will not be as far behind the times CSS3 has been under development since 2000,and is important in that it also has taken into account the idea of modularity with itsdesign Beyond that, it defines the styles needed for better control of paged media,positioning, and generated content, plus support for Scalable Vector Graphics (SVG)and Ruby These recommendations will take Ajax web development to a whole newlevel, but as of this writing CSS3 is very sparsely implemented So, this book will pri-marily be using the CSS2.1 Recommendation for all examples, unless otherwise noted.

You can find more information on the W3C’s progress on CSS at http://www.w3.org/

Style/CSS/.

XML

XML is the general language for describing different kinds of data, and it is one of themain data transportation agents used on the Web The W3C’s XML 1.0 Recommen-dation is now in its fifth edition: the first was published on February 10, 1998 whilethe latest edition was published on November 26, 2008 At the same time as editionthree was being released (February 4, 2004), the W3C also published the XML 1.1Recommendation, which gave consistency in character representations and relaxednames, allowable characters, and end-of-line representations The second edition ofXML 1.1 was published on September 29, 2006 Though both XML 1.0 and XML 1.1are considered current versions, this book will not need anything more than XML 1.0.People like XML for use on the Web for a number of reasons It is self-documenting,meaning that the structure itself defines and describes the data within it Because it isplain text, there are no restrictions on its use, an important point for the free andopen Web And both humans and machines can read it without altering the original

structure and data You can find more on XML at http://www.w3.org/XML/.

Even though Ajax is no longer an acronym and the X in AJAX is now just an x, XML

is still an important structure to mention when discussing Ajax applications It maynot be the transportation mode of choice for many applications, but it may still bethe foundation for the data that is being used in those applications by way of syndi-cation feeds

Syndication

The type of syndication that we will discuss here is, of course, that in which sections

of a web site are made available for other sites to use, most often using XML as thetransport agent News, weather, and blog web sites have always been the most com-mon sources for syndication, but there is no limitation as to where a feed can comefrom

The idea of syndication is not new It first appeared on the Web around 1995 when

R V Guha created a system called Meta Content Framework (MCF) while working

for Apple Two years later, Microsoft released its own format, called Channel tion Format (CDF) It wasn’t until the introduction of the RDF-SPF 0.9 Recommen-dation in 1999, later renamed to RSS 0.9, that syndication feeds began to take off.

Defini-For much more on syndication and feeds see Developing Feeds with

RSS and Atom, by Ben Hammersley (O’Reilly).

RSS

RSS is not a single standard, but a family of standards, all using XML for their base

structure Note that I use the term standard loosely here, as RSS is not actually a

standard (RDF, the basis of RSS 1.0, is a W3C standard.) This family of standardsfor syndication feeds has a sordid history, with the different versions having been cre-ated through code forks and disagreements among developers For the sake of sim-plicity, the only version of RSS that we will use in this book is RSS 2.0, a simpleexample of which you can see in Example 1-2

Example 1-2 A modified RSS 2.0 feed from O’Reilly’s News & Articles Feeds

Make sure you know which RSS standard you are using:

• RDF Site Summary (RSS 0.9 and 1.0)

• Rich Site Summary (RSS 0.91 and 1.0)

• Really Simple Syndication (RSS 2.0)

Each syndication format is different from the next, especially RSS 1.0.

(This version is more modular than the others, but also more complex.)

Most RSS processors can handle all of them, but mixing pieces from

different formats may confuse even the most flexible processors.

Atom

Because of all the different versions of RSS and resulting issues and confusion,another group began working on a new syndication specification, called Atom InJuly 2005, the IETF accepted Atom 1.0 as a proposed standard In December of that

year, it published the Atom Syndication Format protocol known as RFC 4287 (http://

tools.ietf.org/html/4287) An example of this protocol appears in Example 1-3.

There are several major differences between Atom 1.0 and RSS 2.0 Atom 1.0 iswithin an XML namespace, has a registered MIME type, includes an XML schema,and undergoes a standardization process By contrast, RSS 2.0 is not within a

does not have an XML schema, and is not standardized, nor can it be modified, asper its copyright

Example 1-3 A modified Atom feed from O’Reilly’s News & Articles Feeds

<?xml version="1.0" encoding="utf-8"?>

<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en-US">

<title>O'Reilly News/Articles</title>

<link rel="alternate" type="text/html" href="http://www.oreilly.com/" />

<subtitle type="text">O'Reilly's News/Articles</subtitle>

<rights>Copyright O'Reilly Media, Inc.</rights>

<link rel="alternate" href="http://www.oreilly.com/store"/>

<summary type="html"> </summary>

XSLT is an XML-based language used to transform, or format, XML documents OnNovember 16, 1999, XSLT version 1.0 became a W3C Recommendation As of Jan-uary 23, 2007, XSLT version 2.0 is a Recommendation that works in conjunctionwith XPath 2.0 (Most browsers currently support only XSLT 1.0 and XPath 1.0.)XSLT uses XPath to identify subsets of the XML document tree and to perform cal-culations on queries We will discuss XPath and XSLT in more detail in Chapter 5

For more information on the XSL family of W3C Recommendations, visit http://

www.w3.org/Style/XSL/.

XSLT takes an XML document and creates a new document with all of the mations, leaving the original XML document intact In Ajax contexts, the trans-formation usually produces XHTML with CSS linked to it so that the user can viewthe data in his browser

transfor-Browsers

Like standards, browsers can be a touchy subject for some people Everyone has aparticular browser that she is comfortable with, whether because of features, simplic-ity of use, or familiarity Developers need to know, however, the differences amongthe browsers—for example, what standards they support Also, it should be notedthat it’s not the browser, but rather the engine driving it that really matters To gen-eralize our discussion of browsers, therefore, it’s easiest to focus on the followingengines:

Gecko is the layout engine built by the Mozilla project and used in all branded browsers and software Some of these products are Mozilla Firefox,Netscape, and K-Meleon One of the nice features of Gecko is that it is cross-platform

Mozilla-by design, so it runs on several different operating systems, including Windows,Linux, and Mac OS X

Trident

Trident is the layout engine that Internet Explorer (Windows versions only) has usedsince version 4.0, and it is sometimes referred to as MSHTML AOL Explorer andNetscape use it as well (Netscape can use either Gecko or Trident)

KHTML/WebKit

KHTML is the layout engine developed by the KDE project The most notablebrowsers that use KHTML are KDE Konqueror and Apple’s Safari, though Safariuses a variant called WebKit, which Google’s Chrome and OmniWeb also use

Table 1-1 Standards supported by browser engines

PNG

alpha-transparency