Chapter 1.using ajax Page19 Return to Table of Contents using ajax Test DRive Create thumbnails.js,add the initPage()function,and give the inventory page a whirl. Create a file named thumbnails.js in a text editor.Add the code shown on page 18,and then load inventory.html in your browser. initPage (should run when the page loads,and you're ready to try out the detail images... ROUS ROCKN ROUL VEORUR Click here.… .and an image is displayed here. The item's details won't show up yet but the right image should appear. To Do ☑/update the x ☑wita啡ie theav5 Seript You can check another item off the To Do list ☐Create a reqsto吨ject for Rob's inventory page ☐Get the itensdetal ☐Display the details you are here 19 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 USC107)or that otherwise violates the Safari Terms of Service is strictly prohibited
you are here 19 using ajax Test Drive Create thumbnails.js, add the initPage() function, and give the inventory page a whirl. Create a file named thumbnails.js in a text editor. Add the code shown on page 18, and then load inventory.html in your browser. initPage() should run when the page loads, and you’re ready to try out the detail images... Click here.... ...and an image is displayed here. To Do Update the XHTML Initialize the JavaScript Create a request object Get the item’s details Display the details You can check another item off the To Do list for Rob’s inventory page. The item’s details won’t show up yet, but the right image should appear. Chapter 1. using ajax Page 19 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 Page2o Return to Table of Contents request objects are browser-specific To Do Step 3:Create a request object ☑Modify the XHM When users click on an item's image,we also need to send a request ☑e the p8 to the server asking for that item's detailed information.But before we (reate a request object can send a request,we need to create the request object. ▣Get the itendetail水 The bad news is that this is a bit tricky because different browsers ☐Diplay the detai create request objects in different ways.The good news is that we can create a function that handles all the browser-specific bits. Go ahead and create a new function in thumbnails.js called createRequest ()and add this code: Reapy Bake Ready Bake code is code Cope that you can just type in and use...but don't function createRequest()( worry,you'll understand try This line tries to create a new all of this in just another request object,but it won't work chapter or two. request new XMLHttpRequest () for every browser type. catch (tryMs)The first approach failed,so tryagain try inifferent type of ojec request new Activexobject ("Msxm12.XMLHTTP"); catch (otherMS)( That didn't work either, try so try one more thing request new Activexobject ("Microsoft.XMLHTTP"); catch (failed){ request null; If the code gets here,nothing This either returns a worked.Return a null so that Fa the calling code will know there was a problem. return request; thumbnails.js 20 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 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
20 Chapter 1 function createRequest() { try { request = new XMLHttpRequest(); } catch (tryMS) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (otherMS) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = null; } } return request; Step 3: Create a request object When users click on an item’s image, we also need to send a request to the server asking for that item’s detailed information. But before we can send a request, we need to create the request object. The bad news is that this is a bit tricky because different browsers create request objects in different ways. The good news is that we can create a function that handles all the browser-specific bits. Go ahead and create a new function in thumbnails.js called createRequest(), and add this code: This line tries to create a new request object, but it won’t work for every browser type. That didn’t work either, so try one more thing. If the code gets here, nothing worked. Return a null so that the calling code will know there was a problem. This either returns a request object, or “null” if nothing worked. Ready Bake Code To Do Modify the XHTML Initialize the page Create a request object Get the item’s details Display the details Ready Bake code is code that you can just type in and use... but don’t worry, you’ll understand all of this in just another chapter or two. The first approach failed, so try again using a different type of object. thumbnails.js function createReq { ... request objects are browser-specific Chapter 1. using ajax Page 20 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 Pagea Return to Table of Contents using ajax there are no Dumb Questions May I have an 00 XMLHTTPRequest? ①：Amudrsall ofhs7 function No.For osrygere all this looks and the way the pieces fit together.Focus on the big Huh? 0 picture,and then we'll start to fill in the gaps in later chapters. 0 :so what's an XMLHttPRequest? XMLpRequest is what most browsers call e request object that you can send to the server and get responses from without reloading an entire page. :Well i thas an HRwhat's an ActiveXObject? May I have an XMLHTTP object from :AAcivMicrosospei the Msxml2 library? programming object There are two different versions,and different browsers support each.That's why there are two different code blocks,each trying to create a different version of ActiveXobject. createRe What? 0 And thericalled XMLHTP inMicrosof browser? s the tve of the obectbt ouall vour anything you'd like;we've been using request.Once you have the createRequest (function working,you never have to worry about these different types again.Just call createRequest ()and then assign the retumed value to a variable. May I have an XMLHTTP object from don'teed to be 0 the Microsoft library? Rightonge aveJvaScrpt enabled. your users can be running any browser they want. ction createReq What if they don't have JavaScript enabled? Sure thing! 0 :Unfortunatelypcireqrcriptorn. So users who have JavaScript disabled aren't going to be able to use your Ajax applications.The good news is that JavaScript is usually enabled by default,so anyone who has disabled JavaScript probably knows what they're doing.and could turn JavaScript support back on if they wanted to use your Ajax app. you are here 21 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 USC1o7)or that otherwise violates the Safari Terms of Service is strictly prohibited
you are here 21 using ajax Q : Am I supposed to understand all of this? A : No, you’re not. For now, just try to get a general idea of how all this looks and the way the pieces fit together. Focus on the big picture, and then we’ll start to fill in the gaps in later chapters. Q : So what’s an XMLHttpRequest? A : XMLHttpRequest is what most browsers call the request object that you can send to the server and get responses from without reloading an entire page. Q : Well, if that’s an XMLHttpRequest, what’s an ActiveXObject? A : An ActiveXObject is a Microsoft-specific programming object. There are two different versions, and different browsers support each. That’s why there are two different code blocks, each trying to create a different version of ActiveXObject Q : And the request object is called XMLHTTP in a Microsoft browser? A : That’s the type of the object, but you can call your variable anything you’d like; we’ve been using request. Once you have the createRequest() function working, you never have to worry about these different types again. Just call createRequest(), and then assign the returned value to a variable. Q : So my users don’t need to be using a specific browser? A : Right. As long as their browsers have JavaScript enabled, your users can be running any browser they want. Q : What if they don’t have JavaScript enabled? A : Unfortunately, Ajax applications require JavaScript to run. So users who have JavaScript disabled aren’t going to be able to use your Ajax applications.The good news is that JavaScript is usually enabled by default, so anyone who has disabled JavaScript probably knows what they’re doing, and could turn JavaScript support back on if they wanted to use your Ajax app. 0D\,KDYHDQ ;0/+7735HTXHVW" +XK" 0D\,KDYHDQ ;0/+773REMHFWIURP WKH0V[POOLEUDU\" :KDW" 0D\,KDYHDQ ;0/+773REMHFWIURP WKH0LFURVRIWOLEUDU\" 6XUH WKLQJ function createReq { ... function createReq { ... function createReq { ... Chapter 1. using ajax Page 21 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 Pageaz Return to Table of Contents lots of ajax is just javascript To Do Step 4:Get the item's details ☑Modfy the xum Once a user clicks on an item in the inventory,we need to send a request ☑INitialize the page to the server and ask for the description and details for that item.We've ☑(reate a regt object got a request object,so here is where we can use that. ☐6 et the ite details And it turns out that no matter what data you need from the server,the □play the detal basic process for making an Ajax request always follows the same pattern: ① Get a request object We've already done the work here.We just need to call createRequest (to get an instance of the request object and assign it to a variable. createRequest() function getDetails Daapu Rake createRequest() request thumbnails.js The createRcquest()function returns a request object that our code in getDetails()can use to talk to the server. ② Configure the request object's properties The request object has several properties you'll need to set. You can tell it what URL to connect to,whether to use GET or POST,and a lot more...you need to set this all up before you make your request to the server You can tell your request objeet where to make its request,include details imagelD-escapelimageName) the server will need to respond,and even indicate url-getDetails.php?imageld-"+imagelD: that the request should request open("ET",url,true): be GET or POST. 22 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 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 USCio7)or that otherwise violates the Safari Terms of Service is strictly prohibited
22 Chapter 1 To Do Modify the XHTML Initialize the page Create a request object Get the item’s details Display the details Ready Bake Code Step 4: Get the item’s details Once a user clicks on an item in the inventory, we need to send a request to the server and ask for the description and details for that item. We’ve got a request object, so here is where we can use that. And it turns out that no matter what data you need from the server, the basic process for making an Ajax request always follows the same pattern: Get a request object We’ve already done the work here. We just need to call createRequest() to get an instance of the request object and assign it to a variable. request imageID=escape(imageName) The createRequest() function returns a request object that our code in getDetails() can use to talk to the server. Configure the request object’s properties The request object has several properties you’ll need to set. You can tell it what URL to connect to, whether to use GET or POST, and a lot more... you need to set this all up before you make your request to the server. 2 url="getDetails.php?imageId=" + imageID; open("GET", url, true); You can tell your request object where to make its request, include details the server will need to respond, and even indicate that the request should be GET or POST. request createRequest() thumbnails.js function getDetails { ... createRequest() lots of ajax is just javascript Chapter 1. using ajax Page 22 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 Page23 Return to Table of Contents using ajax ③ Tell the request object what to do when the server responds So what happens when the server responds?The browser looks at another property of the request object,called onreadystatechange. This lets us assign a callback function that should run when the server responds to our request. tmagelD-escape(imageName) The property's value orl="getDetails.php?imageld="+imagelD: should be the name of a function to run once the request open("GET".url true): server's given an answer to our request onreadystatechange=displayDetails: 个Tsnt called a callback onreadystatechange is just another function…t property of the request object we gets "ealled can set in our code. back"with the ⊙ Make the request server's response. Now we're ready to send the request off to the server and get a response. ...which creates .and makes a request The user clicks an image.. ..that calls a function to the server. in thumbnails.is... and configures a request object... function getDetails request thumbnails.js ⊙xBRA 文POWER Why do you think the callback function is assigned to a property called onreadystatechange?What do you think that property name means? you are here 23 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 mitted in 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
you are here 23 using ajax request mageID=escape(imageName) imageID; onreadystatechange=displayDetails; request :K\GR\RXWKLQNWKHFDOOEDFNIXQFWLRQLVDVVLJQHGWRD SURSHUW\FDOOHGRQUHDG\VWDWHFKDQJH":KDWGR\RXWKLQN WKDWSURSHUW\QDPHPHDQV" Tell the request object what to do when the server responds So what happens when the server responds? The browser looks at another property of the request object, called onreadystatechange This lets us assign a callback function that should run when the server responds to our request. 3 onreadystatechange is just another property of the request object we can set in our code. The property’s value should be the name of a function to run once the server’s given an answer to our request. This function is called a callback function... it gets “called back” with the Make the request server’s response. Now we’re ready to send the request off to the server and get a response. 4 The user clicks an image... ...that calls a function in thumbnails.js... ...which creates and configures a request object... ...and makes a request to the server. thumbnails.js function getDetails { ... Chapter 1. using ajax Page 23 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.