Chapter 1. using ajax Table of Contents Chapter 1. using ajax.................................................................................... 1 Section 1.1. Web pages: the old-fashioned approach..................................................................................................................... 2 Section 1.2. Web pages reinvented................................................................................................................................................. 3 Section 1.3. So what makes a page "Ajax"?..................................................................................................................................... 5 Section 1.4. Rob's Rock 'n' Roll Memorabilia................................................................................................................................. 6 Section 1.5. Ajax and rock 'n' roll in 5 steps.................................................................................................................................. 12 Section 1.6. Step 1: Modify the XHTML........................................................................................................................................ 14 Section 1.7. Step 2: Initialize the JavaScript................................................................................................................................. 16 Section 1.8. Step 3: Create a request object.................................................................................................................................. 20 Section 1.9. Step 4: Get the item's details..................................................................................................................................... 22 Section 1.10. Let's write the code for requesting an item's details............................................................................................... 24 Section 1.11. Always make sure you have a request object before working with it...................................................................... 25 Section 1.12. The request object is just an object......................................................................................................................... 26 Section 1.13. Hey, server... will you call me back at displayDetails(), please?............................................................................. 27 Section 1.14. Use send() to send your request.............................................................................................................................. 28 Section 1.15. The server usually returns data to Ajax requests.................................................................................................... 30 Section 1.16. Ajax is server-agnostic.............................................................................................................................................. 31 Section 1.17. Use a callback function to work with data the server returns................................................................................. 35 Section 1.18. Get the server's response from the request object's responseText property.......................................................... 36 Section 1.19. Goodbye traditional web apps................................................................................................................................. 38 Section 1.20. AjaxAcrostic............................................................................................................................................................. 39 Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: [email protected] Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited. Chapter 1. using ajax Page 1 Return to Table of Contents 1 using ajax Web Apps for a New Generation (cid:44)(cid:183)(cid:79)(cid:79)(cid:3)(cid:77)(cid:88)(cid:86)(cid:87)(cid:3)(cid:87)(cid:68)(cid:78)(cid:72)(cid:3)(cid:68)(cid:3)(cid:79)(cid:76)(cid:87)(cid:87)(cid:79)(cid:72)(cid:3)(cid:81)(cid:68)(cid:83)(cid:3) (cid:90)(cid:75)(cid:76)(cid:79)(cid:72)(cid:3)(cid:44)(cid:183)(cid:80)(cid:3)(cid:90)(cid:68)(cid:76)(cid:87)(cid:76)(cid:81)(cid:74)(cid:3)(cid:73)(cid:82)(cid:85)(cid:3)(cid:80)(cid:92)(cid:3) (cid:90)(cid:72)(cid:69)(cid:3)(cid:68)(cid:83)(cid:83)(cid:3)(cid:87)(cid:82)(cid:3)(cid:85)(cid:72)(cid:86)(cid:83)(cid:82)(cid:81)(cid:71)(cid:17)(cid:17)(cid:17) Tired of waiting around for your page to reload? (cid:41)(cid:85)(cid:88)(cid:86)(cid:87)(cid:85)(cid:68)(cid:87)(cid:72)(cid:71)(cid:3)(cid:69)(cid:92)(cid:3)(cid:70)(cid:79)(cid:88)(cid:81)(cid:78)(cid:92)(cid:3)(cid:90)(cid:72)(cid:69)(cid:3)(cid:68)(cid:83)(cid:83)(cid:79)(cid:76)(cid:70)(cid:68)(cid:87)(cid:76)(cid:82)(cid:81)(cid:3)(cid:76)(cid:81)(cid:87)(cid:72)(cid:85)(cid:73)(cid:68)(cid:70)(cid:72)(cid:86)(cid:34)(cid:3)(cid:44)(cid:87)(cid:182)(cid:86)(cid:3)(cid:87)(cid:76)(cid:80)(cid:72)(cid:3)(cid:87)(cid:82)(cid:3)(cid:74)(cid:76)(cid:89)(cid:72)(cid:3)(cid:92)(cid:82)(cid:88)(cid:85)(cid:3)(cid:90)(cid:72)(cid:69)(cid:3)(cid:68)(cid:83)(cid:83)(cid:86)(cid:3)(cid:87)(cid:75)(cid:68)(cid:87)(cid:3) (cid:86)(cid:79)(cid:76)(cid:70)(cid:78)(cid:15)(cid:3)(cid:85)(cid:72)(cid:86)(cid:83)(cid:82)(cid:81)(cid:86)(cid:76)(cid:89)(cid:72)(cid:3)(cid:71)(cid:72)(cid:86)(cid:78)(cid:87)(cid:82)(cid:83)(cid:3)(cid:73)(cid:72)(cid:72)(cid:79)(cid:17)(cid:3)(cid:36)(cid:81)(cid:71)(cid:3)(cid:75)(cid:82)(cid:90)(cid:3)(cid:71)(cid:82)(cid:3)(cid:92)(cid:82)(cid:88)(cid:3)(cid:71)(cid:82)(cid:3)(cid:87)(cid:75)(cid:68)(cid:87)(cid:34)(cid:3)(cid:58)(cid:76)(cid:87)(cid:75)(cid:3)Ajax(cid:15)(cid:3)(cid:92)(cid:82)(cid:88)(cid:85)(cid:3)(cid:87)(cid:76)(cid:70)(cid:78)(cid:72)(cid:87)(cid:3)(cid:87)(cid:82)(cid:3) (cid:69)(cid:88)(cid:76)(cid:79)(cid:71)(cid:76)(cid:81)(cid:74)(cid:3)(cid:44)(cid:81)(cid:87)(cid:72)(cid:85)(cid:81)(cid:72)(cid:87)(cid:3)(cid:68)(cid:83)(cid:83)(cid:79)(cid:76)(cid:70)(cid:68)(cid:87)(cid:76)(cid:82)(cid:81)(cid:86)(cid:3)(cid:87)(cid:75)(cid:68)(cid:87)(cid:3)(cid:68)(cid:85)(cid:72)(cid:3)more interactive, more responsive, (cid:68)(cid:81)(cid:71)(cid:3)easier to use(cid:17)(cid:3)(cid:54)(cid:82)(cid:3)(cid:86)(cid:78)(cid:76)(cid:83)(cid:3)(cid:92)(cid:82)(cid:88)(cid:85)(cid:3)(cid:81)(cid:68)(cid:83)(cid:30)(cid:3)(cid:76)(cid:87)(cid:182)(cid:86)(cid:3)(cid:87)(cid:76)(cid:80)(cid:72)(cid:3)(cid:87)(cid:82)(cid:3)(cid:83)(cid:88)(cid:87)(cid:3)(cid:86)(cid:82)(cid:80)(cid:72)(cid:3)(cid:83)(cid:82)(cid:79)(cid:76)(cid:86)(cid:75)(cid:3)(cid:82)(cid:81)(cid:3)(cid:92)(cid:82)(cid:88)(cid:85)(cid:3)(cid:90)(cid:72)(cid:69)(cid:3)(cid:68)(cid:83)(cid:83)(cid:86)(cid:17)(cid:3)(cid:44)(cid:87)(cid:182)(cid:86)(cid:3)(cid:87)(cid:76)(cid:80)(cid:72)(cid:3)(cid:87)(cid:82)(cid:3) (cid:74)(cid:72)(cid:87)(cid:3)(cid:85)(cid:76)(cid:71)(cid:3)(cid:82)(cid:73)(cid:3)(cid:88)(cid:81)(cid:81)(cid:72)(cid:70)(cid:72)(cid:86)(cid:86)(cid:68)(cid:85)(cid:92)(cid:3)(cid:68)(cid:81)(cid:71)(cid:3)(cid:86)(cid:79)(cid:82)(cid:90)(cid:3)(cid:73)(cid:88)(cid:79)(cid:79)(cid:16)(cid:83)(cid:68)(cid:74)(cid:72)(cid:3)(cid:85)(cid:72)(cid:73)(cid:85)(cid:72)(cid:86)(cid:75)(cid:72)(cid:86)(cid:3)(cid:73)(cid:82)(cid:85)(cid:72)(cid:89)(cid:72)(cid:85)(cid:17) this is a new chapter 1 Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: [email protected] Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited. Chapter 1. using ajax Page 2 Return to Table of Contents old-fashionedweb apps Web pages: the old-fashioned approach With traditional web pages and applications, every time a user clicks on something, the browser sends a request to the server, and the server responds with a whole new page. Even if your user’s web browser is smart about caching things like images and cascading style sheets, that’s a lot of traffic going back and forth between their browser and your server... and a lot of time that the user sits around waiting for full page refreshes. The user clicks something on your page. The browser sends a request to the server. The server sends back a whole new page, with all the changed The user clicks information. something else. The browser sends another request to the server. Most of the time, only a single line or image is changing... but there’s still a complete page refresh. And the server sends back another whole page... 2 Chapter 1 Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: [email protected] Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited. Chapter 1. using ajax Page 3 Return to Table of Contents usingajax Web pages reinvented Using Ajax, your pages and applications only ask the server for what they really need—just the parts of a page that need to change, and just the parts that the server has to provide. That means less traffic, smaller updates, and less time sitting around waiting for page refreshes. With Ajax, the browser only sends and receives the parts of a page that need to change. This time, your page’s code creates a special request object that the browser sends to the server. request fguentDcteitoanils { The server updates } ... the request object... Whotpabrihtav eeehglioyn e tt gA cow sja p ahonsrxiuf ol,efe c fvwteteeshahnsreie et kdp iunrea.sgeeegq preau ruedfsoslotiiunce ngskidns e t.’r.t.hs e ..bp.aranordwt ssy eoorfu rt t oc houepd dpea atgteeer l eltosq hnutlaeyhst te t he have changed. Sometimes the browser doesn’t have to talk to the server at all. The script can update the The browser calls image without the server-side The user clicks a function in program at all! something. your script file. function getDetails { ... } The script tells the browser how to update the page... all without a page refresh. you are here (cid:23) 3 Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: [email protected] Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited. Chapter 1. using ajax Page 4 Return to Table of Contents ajax is a methodology (cid:50)(cid:78)(cid:68)(cid:92)(cid:15)(cid:3)(cid:44)(cid:3)(cid:74)(cid:72)(cid:87)(cid:3)(cid:87)(cid:75)(cid:68)(cid:87)(cid:3)(cid:36)(cid:77)(cid:68)(cid:91)(cid:3)(cid:80)(cid:68)(cid:78)(cid:72)(cid:86)(cid:3)(cid:90)(cid:72)(cid:69)(cid:3)(cid:83)(cid:68)(cid:74)(cid:72)(cid:86)(cid:3) (cid:85)(cid:72)(cid:86)(cid:83)(cid:82)(cid:81)(cid:71)(cid:3)(cid:73)(cid:68)(cid:86)(cid:87)(cid:72)(cid:85)(cid:15)(cid:3)(cid:69)(cid:88)(cid:87)(cid:3)(cid:90)(cid:75)(cid:68)(cid:87)(cid:3)(cid:72)(cid:91)(cid:68)(cid:70)(cid:87)(cid:79)(cid:92)(cid:3)(cid:76)(cid:86)(cid:3)(cid:76)(cid:87)(cid:34) Ajax is a new way of using existing technologies. Ajax isn’t a whole new technology that you have to learn, like CSS or JavaScript, or a set of graphics techniques you’ll need to crack open PhotoShop to accomplish. Ajax is just a new way of thinking about how to do what you’re already doing, using technologies you probably already know. The browser sends requests and gets responses from a web server. Your page can use images, Flash oarn iamnayttiohninsg, Seillsvee ryloiguh t, want or need. function <html> #mystyle{ getDetails { ... ... ... </html> } } XHTML files scripts style sheets other resources Most web programmers and designers are already using some, or even all, of these technologies. 4 Chapter 1 Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: [email protected] Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited. Chapter 1. using ajax Page 5 Return to Table of Contents usingajax So what makes a page “Ajax” ? Ajax is a way of designing and building web pages that are as interactive and responsive as desktop applications. So what does that mean for you? You handle things at the client’s browser whenever you can. Your pages make An asynchronous asynchronous requests that allow the user to keep working instead of waiting for a response. You only update the things on your pages that request is a actually change. And best of all, an Ajax page is built using standard Internet technologies, things you probably already know how to use, like: request that XHTML occurs behind Cascading Style Sheets the scenes. JavaScript Your users can Ajax applications also use a few things that have been around for a while but may be new to you, like: keep working The XmlHttpRequest We’ll look at all of while the XML & JSON these in detail before we’re through. request is The DOM taking place. Q: Q: Doesn’t Ajax stand for “Asynchronous JavaScript and But aren’t all web pages asynchronous? Like when XML”? a browser loads an image while I’m already looking at the A: page? A: Sort of. Since lots of pages that are considered “Ajax” don’t use JavaScript or XML, it’s more useful to define Ajax as a Browsers are asynchronous, but the standard web page way of building web pages that are as responsive and interactive isn’t. Usually when a web page needs information from a as desktop applications, and not worry too much about the exact server-side program, everything comes to a complete stop until technologies involved. the server responds... unless the page makes an asynchronous Q: request. And that’ what Ajax is all about. Q: What exactly does “asynchronous” mean? A: But all Ajax pages use that XMLHttpRequest object, In Ajax, you can make requests to the server without right? A: making your user wait around for a response. That’s called an asynchronous request, and it’s the core of what Ajax is all Nope. Lots do, and we’ll spend a couple of chapters about. mastering XMLHttpRequest, but it’s not a requirement. In fact, lots of apps that are considered Ajax are more about user interactivity and design than any particular coding technique. you are here (cid:23) 5 Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: [email protected] Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited. Chapter 1. using ajax Page 6 Return to Table of Contents rob needs your help Rob’s Rock ‘n’ Roll Memorabilia 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 the customers’ browsers are taking forever before they show information about the selected item. Some of Rob’s users are hanging around, but most have just stopped coming to Rob’s online shop altogether. When the user clicks an item, a bigger This pane picture of the image contains is displayed here... thumbnails of the items Rob ...and the details has for sale. about the item are shown here. (cid:44)(cid:183)(cid:80)(cid:3)(cid:71)(cid:72)(cid:86)(cid:83)(cid:72)(cid:85)(cid:68)(cid:87)(cid:72)(cid:17)(cid:17)(cid:17)(cid:3)(cid:69)(cid:88)(cid:87)(cid:3)(cid:44)(cid:3)(cid:70)(cid:68)(cid:81)(cid:183)(cid:87)(cid:3) (cid:68)(cid:73)(cid:73)(cid:82)(cid:85)(cid:71)(cid:3)(cid:68)(cid:3)(cid:80)(cid:82)(cid:85)(cid:72)(cid:3)(cid:83)(cid:82)(cid:90)(cid:72)(cid:85)(cid:73)(cid:88)(cid:79)(cid:3)(cid:86)(cid:72)(cid:85)(cid:89)(cid:72)(cid:85)(cid:3)(cid:82)(cid:85)(cid:3) (cid:68)(cid:3)(cid:87)(cid:72)(cid:68)(cid:80)(cid:3)(cid:82)(cid:73)(cid:3)(cid:90)(cid:72)(cid:69)(cid:3)(cid:72)(cid:91)(cid:83)(cid:72)(cid:85)(cid:87)(cid:86)(cid:17) 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 hisserver is too slow, but that his pages are sending requests to the server all the time... even when they don’t need to. 6 Chapter 1 Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: [email protected] Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited. Chapter 1. using ajax Page 7 Return to Table of Contents usingajax Here’s what Rob’s online store does right now. What’s wrong with this picture? The browser sends The user clicks the selected item’s ID a thumbnail. to the server. The server sends back a new page, with the selected item’s information. The user clicks another thumbnail. The browser sends the new item’s ID to the server. The server sends back another whole The user gets new page. tired of waiting and does something else... How would Ajax change this diagram? Write down what you think should happen on Rob’s site. you are here (cid:23) 7 Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: [email protected] Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited. Chapter 1. using ajax Page 8 Return to Table of Contents asynchronous apps do more than one thing at once Your job was to think about how Ajax could help save Rob’s site... and his business. With Ajax, we can completely remove all the page refreshes on his inventory page. Here’s what that would look like: The user clicks JCalvicakSicnrgi patn fimunacgtei ocna.lls a Ta hree qfuuenstct oiobnj eccrte attheast a thumbnail. asks the server for a description of the item. function getDetails { request ... } The function also The browser changes the image sends the to match the request object selected item. to the server, asynchronously, behind the scenes. The browser requests the new image from the server... but that’s not something your page worries about. Only the part of the page that actually changed is updated... but The server returns the user still sees request the new image and a new image and a response to the the selected item’s request to the description. user’s browser. (cid:132) Asynchronous requests allow more than one thing to happen at the same time. (cid:132) Only the part of a web page that needs to change gets updated. (cid:132) The page isn’t frozen while the server is returning data to the browser. 8 Chapter 1 Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: [email protected] Print Publication Date: 2008/08/26 User number: 1673621 Copyright 2008, Safari Books Online, LLC. This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that otherwise violates the Safari Terms of Service is strictly prohibited.