sdasdasd

..... 220
eBay ........................................................................................ 223
Displaying the Results .............................................................. 223
Fallback for Non-JavaScript Browsers ....................................... 223
Screen Reader Code ......................................................................... 225
Alerting Users to Page Changes ................................................ 226
The Back Button Problem ................................................................ 227
The Two Options ..................................................................... 227
SearchHistory Class ............................................................... 228
Adding to the History .............................................................. 229
Navigating the History ............................................................. 231
Displaying the History Entry ................................................... 232
Building your own Back Button ........................................................ 233
Adding the Buttons .................................................................. 233
Using the Browser’s Back Button ...................................................... 234
Using the Location Hash .......................................................... 235
Setting Up the Fix .................................................................... 235
Setting the Hash ...................................................................... 237
Watching the Hash .................................................................. 238
Displaying the Entry ................................................................ 239
Decisions, Decisions ................................................................. 240
Search App Enhancements ............................................................... 240
Paging ...................................................................................... 240
History Menu .......................................................................... 240
Further Reading ............................................................................... 241
Apache2 and OpenSSL on Linux .............................................. 241
viiOrder the print version of this book to get all 300+ pages!
Apache2 and OpenSSL on Windows ........................................ 241
WSDL ..................................................................................... 241
Summary ......................................................................................... 242
8. Drag and Drop with AJAX Chess ......................................................... 243
AJAX Chess ...................................................................................... 243
Problems to Solve .................................................................... 244
The Chess Class ............................................................................... 245
Starting the Application ................................................................... 246
Setting Up the Board ....................................................................... 247
The Status Panel ...................................................................... 249
Loading a Game ............................................................................... 250
Using JSON ..................................................................................... 251
Encoding an Object with JSON ................................................ 251
Decoding JSON Strings ............................................................ 252
Displaying Game State ..................................................................... 253
The handleLoadGame Method .................................................. 253
The displayGame Method ........................................................ 255
Global Event Handlers ..................................................................... 258
Going Global ........................................................................... 259
Handling Mouse Clicks ............................................................ 259
Moving Pieces .................................................................................. 261
The mousemove Handler ........................................................... 262
The mouseup Handler ............................................................... 262
The Draggable Class ........................................................................ 263
The Click Offset ....................................................................... 264
Viewport Positions and Board Positions .................................... 264
The move Method .................................................................... 265
The drop Method .................................................................... 266
The doMove Method ......................................................................... 269
Making a Backup ..................................................................... 270
Error Checking ......................................................................... 270
Aborting the Move on Error ..................................................... 271
Saving the Move ...................................................................... 272
The handleMove Method ................................................................. 274
Polling for Server State ..................................................................... 276
Wiping the Board ............................................................................. 278
AJAX Chess Back End ...................................................................... 280
Future Enhancements ....................................................................... 280
Summary ......................................................................................... 281
Order the print version of this book to get all 300+ pages!viii
Build Your Own AJAX Web Applications
A. AJAX Toolkits .................................................................................... 283
Index ....................................................................................................... 287
ixOrder the print version of this book to get all 300+ pages!
x
Preface
In the ten years or so since I made my first static web page, it’s been amazing to
see the evolution of the Web as a platform—first for the exchange of information,
and then for actual applications, running right in the browser. And now the AJAX
explosion is taking web development to the next level. Using the power of AJAX-
style development, you can create applications that rival desktop apps in their
power and responsiveness and, best of all, you don’t have to rely on ugly hacks
and kludges to get there.
What is AJAX? The acronym originally stood for “Asynchronous JavaScript and
XML”—quite a mouthful—but it has since come to refer to a style of development
that uses web technologies like XML, DOM, CSS, and JavaScript to create uber-
interactive web documents that behave like full-blown applications. None of
these AJAX technologies are actually all that new (even the AJAX “secret sauce,”
XMLHttpRequest, has been around for years), but not a lot of people really knew
how to use them to the fullest. Now, with the proliferation of “Web 2.0” applic-
ations that push the web-app envelope, and its cool, easy-to-remember name,
the AJAX style of development is really starting to take off.
In the early days, web apps used server-side scripting like CGI, as well as simple
web forms and image rollovers in the browser. Now we’re seeing developers take
major steps forward to enhance the user experience with the ability to update
the UI in pieces, instead of requiring a single, enormous redraw, and client-side
functionality like drag-and-drop and edit-in-place. Today’s web applications are
more interconnected as well, and are sometimes made up of data from multiple
services or sources. A browser-based AJAX app is a fantastic platform for providing
this kind of super-interactive, networked app experience to users. And the best
part is that the AJAX revolution is still just getting started, so now’s a great time
to jump in.
This book gives me a chance to show some cool ways in which you can use AJAX
techniques to add real power and responsiveness to your web applications while
supporting accessibility and backward compatibility. The beauty of AJAX is that
it lets you do all this using straightforward, standards-based code, so you won’t
be seeing weird hacks or browser-specific code in this book. So, roll up your
sleeves—I hope you’re ready to get your hands dirty in some AJAX code!
Who Should Read this Book?
This book is aimed primarily at web application developers who are already fa-
miliar with basic client-side web technologies like CSS and JavaScript.
If that’s not you, don’t be put off: this book will suit you if you’re willing to do
some learning as you go. JavaScript syntax is pretty straightforward, and we’re
using plain, vanilla code that’s pretty much free of browser-specific workarounds.
We also provide links to valuable resources that you can use to learn more about
the technologies used in AJAX development.
Some traditional applications programmers may also find this book of interest
for seeing how they can create a real desktop-app-style user interface that runs
in a browser. More and more of these guys will be looking to dip their toes into
the AJAX pool as “web application development” and plain “application develop-
ment” continue to converge.
What’s In this Book?
This book contains eight chapters. Each chapter builds on the concepts and
techniques introduced in the previous ones, so if you’re still fairly new to web
development, you’re probably better off to take the chapters step by step, in order.
If you’re a battle-hardened veteran, it might make more sense for you to jump
around among the topics that interest you.
Chapter 1: AJAX: The Overview
This chapter takes you through a quick overview of AJAX and the technolo-
gical building blocks that work together to make an AJAX web application.
It also looks back briefly on the ugly coding gymnastics that web developers
had to use back in the Bad Old Days before AJAX, to help explain why AJAX
is such a massive step forward. If you’re not an old hand at web development,
this chapter will provide an introduction to the basic technologies you’ll need
in order to embark upon modern client-side web development with AJAX.
Chapter 2: Basic XMLHttpRequest
XMLHttpRequest is the heart and soul of AJAX. It makes AJAX web devel-
opment possible by allowing browsers to make HTTP requests to a server
without reloading the page. This chapter takes you through the process of
putting together a very simple AJAX JavaScript library; it will give you a good
grounding in how XMLHttpRequest makes requests, and an understanding
of the different ways you can access the results returned from the server.
Order the print version of this book to get all 300+ pages!xii
Preface
With the under-the-hood knowledge of XMLHttpRequest you’ll get from
this chapter, you’ll be able to work with almost any JavaScript XMLHttpRe-
quest library, and confidently diagnose and debug issues with XMLHttpRe-
quest in your web application.
Chapter 3: The “A” in AJAX
A is for “asynchronous.” Asynchronicity is what makes AJAX so cool: XML-
HttpRequest gives you the power to pull content from the server any time
you want, without reloading the entire web page. In this chapter, you’ll build
your first real AJAX app—a web app monitor that uses XMLHttpRequest to
poll a server with basic HTTP GET requests, and reports the time it takes to
get a response. This app demonstrates some of the complexity we must deal
with in a browser-based AJAX app, including the timing of events, timeouts,
and keeping users continuously informed about what the application is doing
with the help of animations and status messages.
Chapter 4: AJAX and POST Requests
We move to the grown-ups’ table in this chapter, which focuses on AJAX
HTTP POST requests. POST is the bread-and-butter of web forms, and the
process of sending packages of data back to the server. Combining it with
some tasty AJAX can make your app a lot more palatable to users. The
demonstration code in this chapter shows off one of the optimal uses for
AJAX: it’s a web app login that uses XMLHttpRequest to pass user authen-
tication data back to the server, and displays status messages inline on the
page. You’ll also learn how to create this kind of AJAX-y UI without breaking
the app’s accessibility or backwards compatibility.
Chapter 5: Broader AJAX with Edit-in-place
When non-developer types talk about AJAX web applications, they usually
mean more than just XMLHttpRequest. In this chapter, we’ll demonstrate
a little of what those people are talking about as we discuss edit-in-place. The
demo code for this chapter creates a basic blog page that lets you edit the
entries right on the page, instead of having to go to a separate web form. It
displays a nice, fading color animation effect to let users know when the ap-
plication is busy processing their edits.
Chapter 6: Web Services and Slide-and-hide
This chapter moves us into the interconnected Web 2.0 world with a basic
overview of web services and a demonstration that shows how you can wire
up your AJAX web app to them. The application we’ll work with in this
chapter plugs into Amazon’s ECS (E-Commerce Service) web service with
some simple REST-style HTTP requests to perform book searches. Unlike a
xiiiOrder the print version of this book to get all 300+ pages!
boring old web form submission that loads the results in a new page, this app
pulls down the XML results, formats them nicely, then uses a cool slide-and-
hide effect to insert them right into the page.
Chapter 7: More Web Services and a Back Button
There’s more to web services than REST. This chapter goes into more depth
on the topic of web services, providing example code for an accessible AJAX
search application that talks to the Google Web APIs, Del.icio.us, and the
EBay platform using more sophisticated methods such as SOAP and XML-
RPC. We also discuss two separate ways to fix the classic AJAX Back Button
Problem—one that builds navigation for the search history into the applica-
tion, and a hack that forces the browser’s real Back button to behave properly.
Chapter 8: Drag and Drop with AJAX Chess
This final chapter uses an in-the-browser game of AJAX Chess to demonstrate
a sophisticated drag-and-drop interface in which absolute-positioned UI ele-
ments are placed relative to the window size, drag constraints are used, and
drop functionality triggers XMLHttpRequest requests to the server to save
each move in the game. The complex interactivity of this app is managed
through a global event listener setup that routes all user input through a
single point, but gives you the flexibility to process events the way you want.
The AJAX Chess game also shows a basic way to synchronize the application
state between browsers with polling, and how to abort and revert to a previous
state in the event of a server error.
This Book’s Web Site
Located at http://www.sitepoint.com/books/ajax1/, the web site supporting this
book will give you access to the following facilities.
The Code Archive
As you progress through the text, you’ll note a number of references to the code
archive. This is a downloadable ZIP archive that contains complete code for all
the examples presented in this book. You can download the code archive from
http://www.sitepoint.com/books/ajax1/code.php
Updates and Errata
The Corrections and Typos page on the book’s web site, at
http://www.sitepoint.com/books/ajax1/errata.php will always have the latest in-
Order the print version of this book to get all 300+ pages!xiv
Preface
formation about known typographical and code errors, and necessary updates
for changes to technologies.
The SitePoint Forums
While I’ve made every attempt to anticipate any questions you may have, and
answer them in this book, there is no way that any book could cover everything
there is to know about AJAX. If you have a question about anything in this book,
the best place to go for a quick answer is SitePoint’s Forums
1
—SitePoint’s vibrant
and knowledgeable community.
The SitePoint Newsletters
In addition to books like this one, SitePoint offers free email newsletters. The
SitePoint Tech Times covers the latest news, product releases, trends, tips, and
techniques for all technical aspects of web development. The long-running SitePoint
Tribune is a biweekly digest of the business and moneymaking aspects of the Web.
Whether you’re a freelance developer looking for tips to score that dream contract,
or a marketing major striving to keep abreast of changes to the major search en-
gines, this is the newsletter for you. The SitePoint Design View is a monthly com-
pilation of the best in web design. From new CSS layout methods to subtle
Photoshop techniques, SitePoint’s chief designer shares his years of experience
in its pages. Browse the archives or sign up to any of SitePoint’s free newsletters
at http://www.sitepoint.com/newsletter/.
Your Feedback
If you can’t find your answer through the forums, or you wish to contact me for
any other reason, the best place to write is books@sitepoint.com. SitePoint has
a well-manned email support system set up to track your inquiries, and if the
support staff are unable to answer your question, they send it straight to me.
Suggestions for improvement as well as notices of any mistakes you may find are
especially welcome.
Acknowledgements
Any author is only as good as his editors. I’d like to extend a sincere and heartfelt
thanks for the great work done by Simon Mackie, my editor, and Stuart Langridge,
1
http://www.sitepoint.com/forums/
xvOrder the print version of this book to get all 300+ pages!
my expert reviewer. Their advice and feedback have made this book immeasurably
better. Much appreciation also goes to Georgina Laidlaw, my language editor,
and Craig Anderson, my tech editor, for their hard work keeping the train on the
tracks.
I’d also like to express a word of thanks to a few other people who had a hand
in the creation of this book either directly or indirectly: Mitch Kapor and everyone
at OSAF, for being so incredibly brilliant, and giving me such a great opportunity
to learn; RMS and Linus, for all the open-source goodness; all the folks in
#javascript on Freenode, from the clueless to the cranky to the crazy-smart, for
providing endless hours of both education and entertainment; Robbie and Will,
for opportunity; Ed and Hugh, for early programming help; and Neil, Geddy,
and Alex, for giving a geeky kid some inspiration back in the day, and producing
some great music to write a book to.
Order the print version of this book to get all 300+ pages!xvi
Preface
AJAX: the Overview1
He’s escaping, idiot! Dispatch War Rocket Ajax! To bring back his body!
—General Kala, Flash Gordon
So here you are, book in hand, ready to learn all about this thing called AJAX.
But, what exactly is it? The term AJAX refers to a loose grouping of technologies
that are used to create dynamic, interactive web content.
The term AJAX, originally coined by Jesse James Garrett of Adaptive Path in his
essay AJAX: A New Approach To Web Applications,
1
is an acronym for “Asynchron-
ous JavaScript And XML.” That’s a bit of a mouthful, but it’s simply describing
a technique that uses JavaScript to refresh a page’s contents from a web server
without having to reload the entire page. This is different from the traditional
method of updating web pages, which requires the browser to refresh the entire
page in order to display any changes to the content.
Similar techniques have been around in one form or another (often achieved with
the help of some clever hacks) for quite a while. But the increasing availability
of the XMLHttpRequest class in browsers, the coining of the catchy term AJAX,
and the advent of a number of high-profile examples such as Google Maps,
2
1
http://adaptivepath.com/publications/essays/archives/000385.php
2
http://maps.google.com/
Gmail,
3
Backpack,
4
and Flickr,
5
have allowed these kinds of highly interactive
web applications to begin to gain traction in the development world.
As the term AJAX has become more widespread, its definition has expanded to
refer more generally to browser-based applications that behave much more dy-
namically than old-school web apps. This new crop of AJAX web applications
make more extensive use of interaction techniques like edit-in-place text, drag-
and-drop, and CSS animations or transitions to effect changes within the user
interface. This book will explain those techniques, and show you how to develop
AJAX web applications of your own.
AJAX Web Applications
AJAX can be a great solution for many web development projects—it can empower
web apps to step up and take over a lot of the ground that previously was occupied
almost exclusively by desktop applications.
All the same, it’s important to keep in mind that AJAX is not a sort of magic fairy
dust that you can sprinkle on your app to make it whizzy and cool. Like any
other new development technique, AJAX isn’t difficult to mis-use, and the only