Rebecca M. Riordan. A Brain-Friendly Guide. Head First. Ajax. Learn how to
make your web pages talk and listen at the same time. Get a handle on trees and.
A Brain-Friendly Guide
Head First
Ajax Learn how to make your web pages talk and listen at the same time
Learn how Sally did two things at the same time with asynchronous programming
Transfer your data with plain text, XML, and JSON Make your clunky web apps feel like dynamic, responsive desktop applications
Get a handle on trees and the Document Object Model
Rebecca M. Riordan
Head First Ajax by Rebecca M. Riordan Copyright © 2008 O’Reilly Media, Inc. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
on
O’Reilly Media 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
[email protected].
Printing History:
er si
August 2008: First Edition.
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. The Head First series designations, Head First Ajax, and related trade dress are trademarks of O’Reilly Media, Inc.
V
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.
ft
While every precaution has been taken in the preparation of this book, the publisher and the authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. ISBN: 978-0-596-51578-2
D
ra
[M]
page goal header
Meet Rob. He’s put all his savings into an online rock n’ roll memorabilia. store The site looks great, but he’s still been getting tons of complaints. Customers are clicking on the thumbnail images on the inventory page, but instead of showing information about the selected item, the customers’ browsers are taking forever to do anything. Some of Rob’s users are hanging around, but most have just stopped coming to Rob’s shop altogether.
er si
This pane contains thumbnails of the item Rob has for sale.
...and the details about the item are shown here.
V
When the user clicks an item, a bigger picture of the image is displayed here....
D
ra
ft
I’m desperate... but I can’t afford a more powerful server, or a team of web experts.
Chapter 1
on
Rob’s Rock ‘n’ Roll Memorabilia
Ajax pages only talk to the server when they have to... and only about what the server knows. The problem with Rob’s site isn’t that his server is too slow... it’s that his pages are sending requests to the server all the time... even when they don’t need to.
using ajax
Here’s what Rob’s online store does right now. What’s wrong with this picture?
The browser sends the selected item’s ID to the server.
on
The user clicks a thumbnail.
er si
The server sends back a new page, with the selected item’s information.
ft
V
The user clicks another thumbnail.
The server sends back another whole new page.
D
ra
The user gets tired of waiting and does something else...
The browser sends the new item’s ID to the server.
How would Ajax change this diagram? Write down what you think should happen on Rob’s site.
you are here 4
page goal header
Your job was to think about how Ajax could help save Rob’s site... and his business. With Ajax, we can completely remove all page refreshes on his inventory page. Here’s what that would look like:
Clicking an image calls a JavaScript function.
The function creates a request object that asks the server for a description of the item.
on
The user clicks a thumbnail.
request
er si
function getDetails { ... }
ra
Only the part of the page that actually changed is updated... but the user still sees a new image, and the selected item’s description.
ft
V
The function also changes the image to match the selected item.
The browser requests the new image from the server... but that’s not something your page worries about. And, the browser loads the new image asynchronously, too.
D
request
Chapter 1
The browser sends the request object to the server, asynchronously.
The server retu the new image, anrns a response to the d request, to the user’s browser.
Asynchronous requests allow more than one thing to happen at the same time.
Only the part of a web page that needs to change gets updated.
The page isn’t frozen while the user waits for the server to return.
using ajax
Put a checkmark next to the benefits that you think Ajax can provide to your web applications.
The browser can request multiple things from the server at the same time.
Colors are rendered more faithfully.
on
Browser requests return a lot faster.
Server traffic is reduced.
er si
Only the parts of the page that actually change are updated.
Pages are less vulnerable to compatibility issues.
The user can keep working while the page updates.
V
Some changes can be handled without a server round-trip. Your boss will love you.
D
ra
ft
Only the parts of the page that actually change are updated.
Not all pages will reap every benefits of Ajax. In fact, some pages wouldn’t benefit from Ajax at all. Which of the benefits you checked off above do you think Rob’s page will see?
you are here 4
page goal header
Remember, not every page is going to see all these benefits...
onous requests Browsers can operate asynchronously, but they usually make synchrently. unless you indicate to them that they should do something differ
The browser can request multiple things from the server at the same time.
Browser requests return a lot faster.
Color rendering is dictated by the user’s monitor, not your app.
er si
Colors are rendered more faithfully.
on
This is only true sometimes. The speed of a request and response depends on what returning. And it’s possible to build Ajax pages that are slower than traditional the server is pages.
Only the parts of the page that actually change are updated.
Reduced server traffic can save your users a lot of time, and your clients a lot of money on bandwidth. Server traffic is reduced.
V
Because Ajax pages rely on technologies in addition to XHTML, compatibility issues can actually be a bigger problem with Ajax. Test, test, test your apps on the browsers your users have installed. Pages are less vulnerable to compatibility issues.
ft
Sometimes you want a user to wait on the server’s response, but that doesn’t mean you can’t still use Ajax. We’ll look at asynchrony more in Chapter 4.
ra
The user can keep working while the page updates.
Handling things at the client can make your web application feel more like a desktop application.
D
Some changes can be handled without a server round-trip.
?
Your boss will love you.
If you use Ajax in a way that helps your apps, the boss will love you. But you shouldn’t use Ajax everywhere... more on that later.
Only the parts of the page that actually change are updated.
Yes, this is the second time this shows up in the list. It’s that important!
10 Chapter 1
using ajax
Well, yes, dear, unless everyone decided they’d try the same approach. Now look at the mess we’re in! What a jam.
Q:
ft
V
er si
on
...but Howard said there’s be much less traffic this way.
A:
ra
First you said Ajax was the web reinvented. Now it’s increasing server traffic. Which is it?
Sometimes it’s both! Ajax is one way to make requests, get responses, and build responsive web apps. But you’ve still got to be smart about when to make an asynchronous request, and when a regular synchronous request would be a better idea.
D
Q:
How do I know when to use Ajax and asynchronous requests, and when not to?
A:
Think about it like this: if you want something to go on while your user’s still working, you probably want an asynchronous request. But if your user needs information or a response from your app before they continue, then you want to make them wait. That usually means a synchronous request.
Q:
So for Rob’s online store, since we want users to keep browsing while we’re loading product images and descriptions, we’d want an asynchronous request. Right?
A:
Exactly. That particular part of Rob’s app—checking out different items—shouldn’t require the user to wait everytime they select a new item. So that’s a great place to use Ajax and make an asynchronous request.
Q: A:
And how do I do that?
Good question. Turn the page, and let’s get down to actually using Ajax to fix up Rob’s online store.
you are here 4 11
