A Brain-Friendly Guide Head First Ajax Fireside Chats Learn how Sally did two things at the same Learn how to make time with asynchronous your web pages programming talk and listen at the same time Toknl Boarde Seld Transfer your data with plain text, XML,and JSON Make your clunky web apps feel like Get a handle dynamic,responsive on trees and desktop applications the Document Object Model O'REILLY Rebecca M.Riordan
Chapter 1.using ajax Table of Contents Chapter 1.using ajax....................................... Section 1.1.Web pages:the old-fashioned approach...... 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 displayDetailsO,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..... 4440440444444444444444044044444044444444404444444 Section 117.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 119.Goodbye traditional web apps.....38 Secti0nl.20。AjXACT0StiC439 Chapter 1.using ajax Head First Ajax By Rebecca M.Riordan ISBN:9780596515782 Publisher:O'Reilly Prepared for Ann Cherkis,Safari ID:maottw@gmail.com Print Publication Date:2008/08/26 User number:1673621 Copyright 2008.Safari Books Online.LLC. This PDF is exclusively for your us in accordance with the Safari Terms of Service.No part of it may be reproduced or tra nsmitted in any form by any means without the prior written permission for reprints and excerpts from the publis er.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
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 Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: maottw@gmail.com 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 Return to Table of Contents 1 using ajax 米 米 Web Apps for a New 米 Generation I'll just take a little nap while I'm waiting for my web app to respond... Tired of waiting around for your page to reload? Frustrated by clunky web application interfaces?It's time to give your web apps that slick,responsive desktop feel.And how do you do that?With Ajax,your ticket to building Intemet applications that are more interactive,more responsive,and easier to use.So skip your nap;it's time to put some polish on your web apps.It's time to get rid of unnecessary and slow full-page refreshes forever. this is a new chapter Chapter 1.using ajax Head First Ajax By Rebecca M.Riordan ISBN:9780596515782 Publisher:O'Reilly Prepared for Ann Cherkis,Safari ID:maottw@gmail.com Print Publication Date:2008/08/26 User number:1673621 Copyright 2008.Safari Books Online.LLC. This PDF is exclusively for your us in accordance with the Safari Terms of Service.No part of it may be reproduced or transmitted in written permission for reprints and excerpts from the publis hathedeu otherwise violates the Safari Terms of Service is strictly prohibited
this is a new chapter 1 using ajax Web Apps for a New Generation Tired of waiting around for your page to reload? )UXVWUDWHGE\FOXQN\ZHEDSSOLFDWLRQLQWHUIDFHV",W¶VWLPHWRJLYH\RXUZHEDSSVWKDW VOLFNUHVSRQVLYHGHVNWRSIHHO$QGKRZGR\RXGRWKDW":LWKAjax\RXUWLFNHWWR EXLOGLQJ,QWHUQHWDSSOLFDWLRQVWKDWDUHmore interactive, more responsive, DQGeasier to use6RVNLS\RXUQDS LW¶VWLPHWRSXWVRPHSROLVKRQ\RXUZHEDSSV,W¶VWLPHWR JHWULGRIXQQHFHVVDU\DQGVORZIXOOSDJHUHIUHVKHVIRUHYHU ,·OOMXVWWDNHDOLWWOHQDS ZKLOH,·PZDLWLQJIRUP\ ZHEDSSWRUHVSRQG Chapter 1. using ajax Page 1 Return to Table of Contents Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: maottw@gmail.com 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 Page2 Return to Table of Contents old-fashioned web 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 somcthing码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 H 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:maottw@gmail.com Print Publication Date:2008/08/26 User number:1673621 Copyright 2008.Safari Books Online.LLC. This PDF is exclusively for your us in accordance with the Safari Terms of Service.No part of it may be reproduced or any form by any means without the prior written permission for reprints and excerpts from the publis er.Re edistribution or other use that violates the fair use priviledge under U.S.copyright laws(see 17 USC1o7)or that otherwise violates the Safari Terms of Service is strictly prohibited
2 Chapter 1 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 information. The user clicks something else. The browser sends another request to the server. And the server sends back another whole page... Most of the time, only a single line or image is changing... but there’s still a complete page refresh. old-fashioned web apps Chapter 1. using ajax Page 2 Return to Table of Contents Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: maottw@gmail.com 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 Page3 Return to Table of Contents using ajax 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 The server updates the request objcet.. With Ajax,the user doesn't have to suffer page flickers or lots of waiting around. they can even keep using the page while the request is .and your code tells the being processed. browser to update only the parts of the page that have changed. Sometimes the browser doesn't have to talk to the server at all. The seript can update the The browser calls image without the server-side The user elieks a function in Program at all! something your script file. The script tells the browser how to update the page...all without a page refresh. you are here Chapter 1.using ajax Head First Ajax By Rebecca M.Riordan ISBN:9780596515782 Publisher:O'Reilly Prepared for Ann Cherkis,Safari ID:maottw@gmail.com Print Publication Date:2008/08/26 User number:1673621 Copyright 2008.Safari Books Online.LLC. This PDF is exclusively for your us in accordance with the Safari Terms of Service.No part of it may be reproduced or tra mitted in any form by any means without the prior written permission for reprints and excerpts from the publis er.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
you are here 3 using ajax Web pages reinvented This time, your page’s code creates a special request object that the browser sends to the server. The server updates the request object... ...and your code tells the browser to update only the parts of the page that have changed. 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. The user clicks something. Sometimes the browser doesn’t have to talk to the server at all. The browser calls a function in your script file. The script tells the browser how to update the page... all without a page refresh. The script can update the image without the server-side program at all! request request With Ajax, the user doesn’t have to suffer page flickers or lots of waiting around... they can even keep using the page while the request is being processed. function getDetails { ... function getDetails { ... Chapter 1. using ajax Page 3 Return to Table of Contents Chapter 1. using ajax Head First Ajax By Rebecca M. Riordan ISBN: 9780596515782 Publisher: O'Reilly Prepared for Ann Cherkis, Safari ID: maottw@gmail.com 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