Chapter 1.using ajax Page 34 Return to Table of Contents request object properties 5米 WHAT'S MY PURPOSE? SOLUTION Below on the left are several properties of the request object.Your job was to match each property to what it does,or what information it contains. This one indicates that a request is finished,and it's now okay to process the server's results The status code message returned by the server,for example,“OK”for readyState status 202. status and statusText are different versions of the same information status Contains information sent back by the server in XML format. This is empty unless the server sends baek data in XML format rePoXAL A status code returned by the server indicating,for example, success or that a requested resource is missing. Contains textual information sent back by the server. statusText A number that represents the responseText current state of the request object This is empty unless the server sends back data as text (and not XML). 34 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:1673621Copyright 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 t mitted in 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 USC1o7)or that otherwise violates the Safari Terms of Service is strictly prohibited
34 Chapter 1 The status code message returned by the server, for example, “OK” for status 202. readyState Below on the left are several properties of the request object. Your job was to match each property to what it does, or what information it contains. responseText responseXML status statusText status and statusText are different versions of the same information. This one indicates that a request is finished, and it’s now okay to process the server’s results. This is empty unless the server sends back data in XML format. This is empty unless the server sends back data as text (and not XML). Jfclk`fe A number that represents the current state of the request object. Contains textual information sent back by the server. Contains information sent back by the server in XML format. A status code returned by the server indicating, for example, success or that a requested resource is missing. request object properties Chapter 1. using ajax Page 34 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 Page35 Return to Table of Contents using ajax Use a callback function to work with To Do data the server returns ☑Modty the XHTM □了INitialize the pape How do we show the textual description for each item?Let's assume the server will send the details about an item as pre-formatted text in the (reate a request object responseText property of the request object.So we just need to get ☑Get the itens details that data and display it. Display the details Our callback function,displayDetails(),needs to find the XHTML element that will contain the detail information,and then set its innerHTML property to the value returned by the server. The server returns the details in the responseText property of the request objeet equest responseText function getDeti displayDetails() thumbnails.js Our callback function ean use the response data. ..and update the web page with the requested item's details. there jare no Dumb Questions the rver calls displayDetaisheishth No.hcall does h llhe oeort object.Every time that property changes,the browser calls the function named in the onreadystatechange property.Don't worry,though,well talk about this in a lot more detail in the next chapter. you are here 35 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 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 USC1o7)or that otherwise violates the Safari Terms of Service is strictly prohibited
you are here 35 using ajax Use a callback function to work with data the server returns How do we show the textual description for each item? Let’s assume the server will send the details about an item as pre-formatted text in the responseText property of the request object. So we just need to get that data and display it. Our callback function, displayDetails(), needs to find the XHTML element that will contain the detail information, and then set its innerHTML property to the value returned by the server. request responseText The server returns the details in the responseText property of the request object. To Do Modify the XHTML Initialize the page Create a request object Get the item’s details Display the details thumbnails.js function getDetails { ... displayDetails() Our callback function can use the response data... ...and update the web page with the requested item’s details. Q : So the server calls displayDetails() when it’s finished with the request? A : No, the browser actually does that. All the server does is update the readystate property of the request object. Every time that property changes, the browser calls the function named in the onreadystatechange property. Don’t worry, though, we’ll talk about this in a lot more detail in the next chapter. Chapter 1. using ajax Page 35 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 Page36 Return to Table of Contents responseText stores the server's response Get the server's response from the request object's responseText property The data we want is in the request object.Now we just need to get that data and use it.Here's what we need: function displayDetails(){ This line gets a reference to if (request.readyState =4)( the XHTML element we'll 化s okay if all of if (request.status ==200){put the item details in. this isn't completely detailDiv document.getElementById("description"); elear to you.We'll look at read小y states detailDiv.innerHTML request.responseText; and status codes in This line puts the XHTML returned a lot more detail in by the server into that element. the next chapter. thumbnails.js there are no Dumb Questions What's that readyState property? it receives the request,and to 2 or 3 as it's processing your request,you can't be sure ItinerHbad thing to use? :Thats a number that indicles where the server's done unless readystate is equal to 4. A tis,but sometimes it's also very the server is in its processing.0 is the initial effective.We'll look at better ways to change value,and when the server's completed a request,it's 4. Q a page when we get more into the DOM in And the status property? later chapters.For now,though,it works A and that's the most important thing. thtfirst statement just check :That's the HTTP status code,like 404 to see if the server's finished with the for forbidden,and 200 for okay.You want request? to make sure it's 200 before doing anything this?There's sure a lot going on in that with your request object. A:you callback function... Why would the sever set the Why do we have to check that ready state to 4 when the status code is Forow ust make sure you know something like 404? that the callback is where you can use the every time? server's response.We'll talk about callbacks ready states,and status codes a lot more in :Becausethe ber wil run your Good question.We'll talk about that in Chapter 2. the next chapter,but can you think of how a callback every time the ready state changes. request could be complete and still have a Since a server might set this value to 1 when status code that indicates a problem? 36 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 itted i 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
36 Chapter 1 thumbnails.js function display Details { ... function displayDetails() { if (request.readyState == 4) { if (request.status == 200) { detailDiv = document.getElementById("description"); detailDiv.innerHTML = request.responseText; } } Get the server’s response from the request object’s responseText property The data we want is in the request object. Now we just need to get that data and use it. Here’s what we need: This line gets a reference to the XHTML element we’ll put the item details in. This line puts the XHTML returned by the server into that element. Q : What’s that readyState property? A : That’s a number that indicates where the server is in its processing. 0 is the initial value, and when the server’s completed a request, it’s 4. Q : So that first statement just checks to see if the server’s finished with the request? A : You got it. Q : Why do we have to check that every time? A : Because the browser will run your callback every time the ready state changes. Since a server might set this value to 1 when it receives the request, and to 2 or 3 as it’s processing your request, you can’t be sure the server’s done unless readyState is equal to 4. Q : And the status property? A : That’s the HTTP status code, like 404 for forbidden, and 200 for okay. You want to make sure it’s 200 before doing anything with your request object. Q : Why would the server set the ready state to 4 when the status code is something like 404? A : Good question. We’ll talk about that in the next chapter, but can you think of how a request could be complete and still have a status code that indicates a problem? Q : Isn’t innerHTML a bad thing to use? A : It is, but sometimes it’s also very effective. We’ll look at better ways to change a page when we get more into the DOM in later chapters. For now, though, it works, and that’s the most important thing. Q : Am I supposed to be getting all this? There’s sure a lot going on in that callback function... A : For now, just make sure you know that the callback is where you can use the server’s response. We’ll talk about callbacks, ready states, and status codes a lot more in Chapter 2. It’s okay if all of this isn’t completely clear to you. We’ll look at ready states and status codes in a lot more detail in the next chapter. responseText stores the server’s response Chapter 1. using ajax Page 36 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 Page37 Return to Table of Contents using ajax TesT DRive Code your callback,and test out the inventory page. Add displayDetails (to your thumbnails.is file.You should also make sure that the server-side program with the inputs and outputs detailed on page 30 is running,and that the URL in your getDetails (method is pointing to that program.Then fire up the inventory page and click on an item. When you click on an item,you should see both a larger image of the item,and details about it.all without a page reload. ROB'S ROCK'N ROLL Confused about getting your Relax server-side program working? Flip to Appendix I for some help on getting things working on the server. There are also some helpful server-side resources for the book online at http://www.headfirstlabs.com. you are here 37 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 any form by any means without the pro 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
you are here 37 using ajax Test Drive Code your callback, and test out the inventory page. Add displayDetails() to your thumbnails.js file. You should also make sure that the server-side program with the inputs and outputs detailed on page 30 is running, and that the URL in your getDetails() method is pointing to that program. Then fire up the inventory page and click on an item. When you click on an item, you should see both a larger image of the item, and details about it.. all without a page reload. Confused about getting your server-side program working? Flip to Appendix I for some help on getting things working on the server. There are also some helpful server-side resources for the book online at http://www.headfirstlabs.com Chapter 1. using ajax Page 37 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 38 Return to Table of Contents ajax apps are peppy Goodbye traditional web apps... Rob's page is working more smoothly now,customers are coming back in droves,and you've helped pair vintage leather with the next-generation web. Rob's old,traditional web app: ...reloaded the entire page when a user clicked on an item's thumbnail image. ..took a long time to load because the entire page had to be rendered by the These aren't problems that browser on every click. just Rob's having Almost all ..felt unresponsive because traditional web apps have the user had to wait on all these problems in some form or fashion. those page refreshes. ..lost Rob business,annoyed his customers,and drained his bank account. Compare these benefits with the list on page Rob's new,Ajax appi 10..they should look Pretty similar Amazing work...I've ...only changed the part of already got some ideas the page that needed to for our next project. be updated. 0 ...lets users keep viewing the page while images and descriptions are loaded behind the scenes, asynchronously. ...reduced the need for his users to have super-fast connections to use his site 38 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 transmitted 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 USCio7)or that otherwise violates the Safari Terms of Service is strictly prohibited
38 Chapter 1 Goodbye traditional web apps... Rob’s page is working more smoothly now, customers are coming back in droves, and you’ve helped pair vintage leather with the next-generation web. $PD]LQJZRUN,·YH DOUHDG\JRWVRPHLGHDV IRURXUQH[WSURMHFW ...only changed the part of the page that needed to be updated. Rob’s new, Ajax app: ...lets users keep viewing the page while images and descriptions are loaded behind the scenes, asynchronously. ...reduced the need for his users to have super-fast connections to use his site. ...reloaded the entire page when a user clicked on an LWHP·VWKXPEQDLOLPDJH Rob’s old, traditional web app: ...took a long time to load because the entire page had to be rendered by the browser on every click. ...felt unresponsive because the user had to wait on all those page refreshes. ...lost Rob business, annoyed his customers, and drained his bank account. Compare these benefits with the list on page 10... they should look pretty similar. These aren’t problems that just Rob’s having. Almost all traditional web apps have these problems in some form or fashion. ajax apps are peppy Chapter 1. using ajax Page 38 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.