A Brain-Friendly Guide《Head First Ajax》（PDF电子书，共12个Chapter）.pdf_P11-P15

Chapter 1.using ajax Page 1o Return to Table of Contents ajax app benefits Sharpen your pencil oton Remember,not every page is going to see all these benefits... With asynchronous requests,you can make sure the browser works behind the scenes,and avoid interrupting your users with full-page refreshes ☑ The browser can request multiple things from the server at the same time. This is only true sometimes The speed of a request and response depends on what the server is returning And it's possible to build Ajax pages that are slower than traditional pages. ☑ Browser requests return a lot faster. 口 Color rendering is dictated by Colors are rendered more faithfully. the user's monitor,not your app. ☑ Only the parts of the page that actually change are updated. It's possible to make smaller,more focused requests with Ajax Be careful, though..it's also casy to make a lot more requests-and increase traffic- ☑ because you can make all of those requests asynchronously. Server traffic is reduced. Because Ajax pages rely on technologies in addition to XHTML, compatibility issues can actually be a bigecr problem with Ajax. Test,test,test your apps on the browsers your users have installed. Pages are less vulnerable to compatibility issues. Sometimes you want a user to wait on the scrver's response,but that docsn't mean you can't still use Ajax.We'll look at synchronous vs.asychronous requests more in Chapter 5. 区 The user can keep working while the page updates. Handling things at the browser can make your web application feel more like a desktop application. ☑ Some changes can be handled without a server round-trip. If you use Ajax in a way that helps your apps,the boss 3 will love you.But you shouldn't use Ajax everyuhcre Your boss will love you. more on that latcr. 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 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 with the Safari Terms of Service.No part of may be reproduced or n any form by any means without the prio 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

10 Chapter 1 Remember, not every page is going to see all these benefits... The browser can request multiple things from the server at the same time. Browser requests return a lot faster. Colors are rendered more faithfully. Only the parts of the page that actually change are updated. Server traffic is reduced. Pages are less vulnerable to compatibility issues. The user can keep working while the page updates. Some changes can be handled without a server round-trip. Yo u r b o s s w i l l l ove yo u . Only the parts of the page that actually change are updated. This is only true sometimes. The speed of a request and response depends on what the server is returning. And it’s possible to build Ajax pages that are slower than traditional pages. Color rendering is dictated by the user’s monitor, not your app. 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. 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. It’s possible to make smaller, more focused requests with Ajax. Be careful, though... it’s also easy to make a lot more requests-and increase trafficbecause you can make all of those requests asynchronously. 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 synchronous vs. asynchronous requests more in Chapter 5. Handling things at the browser can make your web application feel more like a desktop application. Yes, this is the second time this shows up in the list. It’s that important! With asynchronous requests, you can make sure the browser works behind the scenes, and avoid interrupting your users with full-page refreshes. ? ajax app benefits Chapter 1. using ajax Page 10 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 Pagen Return to Table of Contents using ajax .but Howard said there's be Well,yes,dear,unless much less traffic this way. everyone decided they'd try the same approach.Now look at the mess we're in!What a jam. there jare no Dumb Questions Firstyoudsthe wb reinvented.Nots increasing server traffic.Which is it? or Rob's in tore,since we want users to kep browsing while we're loading product images and descriptions, we'd want an asynchronous request.Right? sometimes it's both!Aiax is one way to make requests responses,and build responsive web apps.But you've still got to be Exactly.That particular part of Rob's app-checking out smart when deciding whether an asynchronous request or a regular different items-shouldn't require the user to wait every time they synchronous request would be a better idea. select a new item.So that's a great place to use Ajax and make an asynchronous request. How do I know when to use Ajax and asynchronous requests,and when not to? And how do I do that? Thinkbou it like hisf ou want somethino Good question.Tum the page,and let's get down to actually your user's still working,you probably want an asynchronous request. using Ajax to fix up Rob's online store. 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 you are here 11 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 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

you are here 11 using ajax EXWHowardVDLGWKHUH·VEH PXFKOHVVWUDIILFWKLVZD\ :HOO\HVGHDUXQOHVV everyoneGHFLGHGWKH\·GWU\WKH VDPHDSSURDFK1RZORRNDWWKH PHVVZH·UHLQ:KDWDMDP Q : First you said Ajax was the web reinvented. Now it’s increasing server traffic. Which is it? A : 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 when deciding whether an asynchronous request or a regular synchronous request would be a better idea. 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 every time they select a new item. So that’s a great place to use Ajax and make an asynchronous request. Q : And how do I do that? A : Good question. Turn the page, and let’s get down to actually using Ajax to fix up Rob’s online store. Chapter 1. using ajax Page 11 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 Page Return to Table of Contents rob's ajax road map Ajax and rock n'roll in 5 steps Let's use Ajax to fix up Rob's online store,and get his impatient customers back. We'll need to make some changes to the existing XHTMI page,code some JavaScript,and then reference the script in our XHTML.When we're done,the page won't need to reload at all,and only the things that need to change will get updated when users click on the thumbnail images. Here's what we're going to do: 0 Modify the XHTML web page We need to include the JavaScript file we're going to write and add some divs and ids,so our JavaScript can find and work with different parts of the web page. thumbnails.js will contain the JavaSeript code we We'll group the write for handling clicks on thumbnails into c/htmb the thumbnail images and a <div>,so our talking to Rob's server to JavaSeript can get detailed information locate them on the inventory.html We'll use a <script>tag to thumbnails.js about each item. Page easily. reference thumbnails js in our XHTML Page Write a function to initialize the page When the inventory page first loads,we'll need to run some JavaScript to set up the images,get a request object ready,and make sure the page is ready to use. This tells the browser to run the window.onload initPage; initPage()function function initPage () We'll write code in initPage()to initialize as soon as the page all the thumbnail images,and set up loads up. /setup the images onClick event handlers for each image. /create a request object funetion 12 Chapter 1 thumbnails.js 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 itted i any form by any means without the pro 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

12 Chapter 1 Ajax and rock ‘n’ roll in 5 steps Let’s use Ajax to fix up Rob’s online store, and get his impatient customers back. We’ll need to make some changes to the existing XHTML page, code some JavaScript, and then reference the script in our XHTML. When we’re done, the page won’t need to reload at all, and only the things that need to change will get updated when users click on the thumbnail images. Here’s what we’re going to do: Modify the XHTML web page We need to include the JavaScript file we’re going to write and add some divs and ids, so our JavaScript can find and work with different parts of the web page. Write a function to initialize the page When the inventory page first loads, we’ll need to run some JavaScript to set up the images, get a request object ready, and make sure the page is ready to use. 2 thumbnails.js will contain the JavaScript code we write for handling clicks on the thumbnail images and talking to Rob’s server to get detailed information about each item. window.onload = initPage; function initPage() { // setup the images // create a request object This tells the browser to run the initPage() function as soon as the page loads up. We’ll write code in initPage() to initialize all the thumbnail images, and set up onClick event handlers for each image. thumbnails.js function getDetails { ... thumbnails.js function getDetails { ... <html> </html> inventory.html We’ll use a <script> tag to reference thumbnails.js in our XHTML page. We’ll group the thumbnails into a <div>, so our JavaScript can locate them on the page easily. rob’s ajax road map Chapter 1. using ajax Page 12 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 Page13 Return to Table of Contents using ajax Write a function to create a request object We need a way to talk to the server and get details about each piece of memorabilia in Rob's inventory.We'll write a function to create a request object to let our code talk to the server;let's call it createRequest ()We can use that createRequesto)is a onclick events function whenever a thumbnail is clicked to get a new request started. wtility function we'll trigger the getDetails()will eall the createRequest() use over and over.It tDetails() creates a basic,generic function to get a request objcet. request object. function function getDetails() createRequest() equest thumbnails.js createRequest()returns thumbnails.js a request object for our onclick function to use. ④ Get an item's details from the server We'll send a request to Rob's server in getDetails () telling the browser what to do when the server responds ction request getDetails() The request object has thumbnails.js information about what code should run when the server responds. All we need to do to update the image is Display the item's details change that image's sre We can change the image to display in getDetails ()Then,we property.The browser will handle everything need another function,displayDetails(),to update the item's else for us.- description when the server responds to our requests. The event handler changes out the image.. displayDetails() and another function thumbnails.js we'll write can take the server's information and display it on the web page. you are here 13 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 u in accordance with the Safari Terms of Service.No part of it may be reproduc itted i any form b 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 USCio7)or that otherwise violates the Safari Terms of Service is strictly prohibited

you are here 13 using ajax Write a function to create a request object We need a way to talk to the server and get details about each piece of memorabilia in Rob’s inventory. We’ll write a function to create a request object to let our code talk to the server; let’s call it createRequest(). We can use that function whenever a thumbnail is clicked to get a new request started. Get an item’s details from the server We’ll send a request to Rob’s server in getDetails() telling the browser what to do when the server responds. 4 Display the item’s details We can change the image to display in getDetails(). Then, we need another function, displayDetails(), to update the item’s description when the server responds to our requests. getDetails() will call the createRequest() function to get a request object. createRequest() returns a request object for our onclick function to use. createRequest() is a utility function we’ll use over and over. It creates a basic, generic request object. request All we need to do to update the image is change that image’s src property. The browser will handle everything else for us. request onclick events trigger the getDetails() function. The request object has information about what code should run when the server responds. The event handler changes out the image... ...and another function we’ll write can take the server’s information and display it on the web page. thumbnails.js function getDetails { ... thumbnails.js function getDetails { ... thumbnails.js function getDetails { ... thumbnails.js function createReq { ... getDetails() createRequest() getDetails() displayDetails() Chapter 1. using ajax Page 13 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