Chapter 1.using ajax Page24 Return to Table of Contents send a request Let's write the code for requesting an item's details Once we know what our function needs to do,it's pretty easy to write the code.Here's how the steps map to The onclick handler for cach inventory image actual JavaScript in thumbnails.js: calls this function and passes in the clicked img element's title attribute,which is the name of the item the image represents. ① Get a request object function getDetails(itemName)We've aot to check to make sure the request object request createRequest(); isn't null..that's how 1f(requesta==null)f← we know if there was a problem creating the object alert("Unable to create request"); ② Configure the request return; } spofifT.url trck var url="getDetails.php?ImageID="+ escape (itemName); eseape()takes care of ③ Set the callback function any characters that might be a problem in Mgdp-mseapdagcNaud request.open("GET",url,true); a request URL string. 门a成■ request.onreadystatechange displayDetails; arredritateshange-displaycta request.send(null); ④ Send the request thumbnails.js mbnails RoNt Add the getDetails()function to your version of thumbnails.js 24 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 USC107)or that otherwise violates the Safari Terms of Service is strictly prohibited
24 Chapter 1 function getDetails(itemName) { request = createRequest(); if (request==null) { alert("Unable to create request"); return; } var url= "getDetails.php?ImageID=" + escape(itemName); request.open("GET",url,true); request.onreadystatechange = displayDetails; request.send(null); Let’s write the code for requesting an item’s details Once we know what our function needs to do, it’s pretty easy to write the code. Here’s how the steps map to actual JavaScript in thumbnails.js Add the getDetails() function to your version of thumbnails.js request createRequest() request imageID=escape(imageName) url="getDetails.php?imageId=" + imageID; open("GET", url, true); request mageID=escape(imageName) geID onreadystatechange=displayDetails; request Get a request object 2 Configure the request 3 Set the callback function 4 Send the request The onclick handler for each inventory image calls this function and passes in the clicked img element’s title attribute, which is the name of the item the image represents. We’ve got to check to make sure the request object isn’t null... that’s how we know if there was a problem creating the object. escape() takes care of any characters that might be a problem in a request URL string. thumbnails.js function getDetails { ... thumbnails.js function getDetails { ... thumbnails.js function getDetails { ... createRequest() send a request Chapter 1. using ajax Page 24 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 Page25 Return to Table of Contents using ajax Always make sure you have a request object before working with it The first thing getDetails()does is call createRequest() to get a request object.But you've still got to make sure that object was actually created,even though the details of that creation are abstracted away in the createRequest (function: createRequest()returns a request object if it can obtain one. Daaou Bake aetDe createRequest() equest 0" thumbnails.js null If the browser doesn't support XMLHttpRequest objects, createRequest()returns a null. This linc asks for an And here's how that looks in instance of the request our code... object and assigns it to the variable "request" function getDetails(itemName){ request createRequest(); if (request==null){ alert("Unable to create request") return; createRequest()returns a null if it can't get a request var url="getDetails.php?ImageID="+ object.So if we wind up in escape(itemName）; this bit of code,we know request.open ("GET",url,true); something's gone wrong We'll display an error to the user request.onreadystatechange =displayDetails; and exit the function. request.send(null); mbnails.js you are here 25 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 transr 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 25 using ajax thumbnails.js function getDetails { ... thumbnails.js function getDetails { ... Always make sure you have a request object before working with it The first thing getDetails() does is call createRequest() to get a request object. But you’ve still got to make sure that object was actually created, even though the details of that creation are abstracted away in the createRequest() function: If the browser doesn’t support XMLHttpRequest objects, createRequest() returns a null. function getDetails(itemName) { request = createRequest(); if (request==null) { alert("Unable to create request"); return; } var url= "getDetails.php?ImageID=" + escape(itemName); request.open("GET",url,true); request.onreadystatechange = displayDetails; request.send(null); This line asks for an instance of the request object and assigns it to the variable “request.” createRequest() returns a null if it can’t get a request object. So if we wind up in this bit of code, we know something’s gone wrong. We’ll display an error to the user and exit the function. request or null getDetails() createRequest() returns a request object if it can obtain one. And here’s how that looks in our code... Ready Bake Code createRequest() Chapter 1. using ajax Page 25 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 Page26 Return to Table of Contents request objects are JavaScript objects To Do The request object is just an object Modiry the TML 画e the pa容 A request object is just a"normal"JavaScript object,and that means you can ☑eete a req由jet set properties on it and call methods.We can talk to the server by putting 口tthe花eeta information in the request object. ☐lay the deta% function getDetails(itemName){ We're still working request createRequest(); on getting the if (request==null){ details for an item. alert("Unable to create request"); return; This line tells the request object var url="getDetails.php?ImageID="+ the URL to call.We send along the escape(itemName); name of the item,so the server request.open("GET",url,true); knows which details to send. request.onreadystatechange displayDetails, request.send(null); These parameters tell the request objcet how we want it to conneet to the server. thumbnails.js Let's break open()down a bit... The open()method initializes the conneetion. This is the url for the server- side script that will respond to request.open the request "GETI GET"indicates how to send the data (the other option is "POST"). true); there are no This means that the request should Dumb Questions be asynchronous.That is,the code in the browser should continue to Are there? execute while it's waiting for the server to respond. Sure.Yove already send XML or more complicated data to the server,then there are several others you'll use. For now,though,we just need the open (method and onreadystatechange. 26 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 tra 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
26 Chapter 1 function getDetails(itemName) { request = createRequest(); if (request==null) { alert("Unable to create request"); return; } var url= "getDetails.php?ImageID=" + escape(itemName); request.open("GET",url,true); request.onreadystatechange = displayDetails; request.send(null); We’re still working on getting the details for an item. To Do Modify the XHTML Initialize the page Create a request object Get the item’s details Display the details The request object is just an object A request object is just a “normal” JavaScript object, and that means you can set properties on it and call methods. We can talk to the server by putting information in the request object. Let’s break open() down a bit... request.open( "GET" url true); The open() method initializes the connection. “GET” indicates how to send the data (the other option is “POST”). This is the url for the server- side script that will respond to the request. This means that the request should be asynchronous. That is, the code in the browser should continue to execute while it’s waiting for the server to respond. These parameters tell the request object how we want it to connect to the server. This line tells the request object the URL to call. We send along the name of the item, so the server knows which details to send. Q : Are there other properties of the request object? A : Sure. You’ve already seen onreadystatechange, and when you need to send XML or more complicated data to the server, then there are several others you’ll use. For now, though, we just need the open() method and onreadystatechange thumbnails.js function getDetails { ... request objects are JavaScript objects Chapter 1. using ajax Page 26 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 using ajax Hey,server...will you call me back at displayDetails(),please? The properties of the request object tell the server what to do when it receives the request.One of the most important is the onreadystatechange property,which we're setting to the name of a function.This function,referred to as a callback,tells the browser what code to call when the server sends back information. The server runs The getDetails() whatever program was function sends the indicated by the request request object to objeet's uRL the server. request funct getDetails() getDetails.php displayDetails() thumbnails.js But when the server request Web Server responds,the browser ealls displayDetailsO The server responds with not getDetails(). data for the request. function getDetails(itemName){ request createRequest(); if (request==null){ alert("Unable to create request"); return; ls.s This is the line var url="getDetails.php?ImageID="+ This is a referente to a that tells the escape(itemName); function,not a function browser what code request.open("GET",url,true); call.So make sure you don't to call when the inelude any parentheses at server responds to request.onreadystatechange displayDetails the end of the function the request. request.send(null); name. you are here 27 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 27 using ajax Hey, server... will you call me back at displayDetails(), please? The properties of the request object tell the server what to do when it receives the request. One of the most important is the onreadystatechange property, which we’re setting to the name of a function. This function, referred to as a callback, tells the browser what code to call when the server sends back information. The getDetails() function sends the request object to the server. This is the line that tells the browser what code to call when the server responds to the request. But when the server responds, the browser calls displayDetails(), not getDetails(). thumbnails.js function getDetails { ... thumbnails.js function getDetails { ... getDetails() displayDetails() Web Server request request The server runs whatever program was indicated by the request object’s URL. getDetails.php The server responds with data for the request. function getDetails(itemName) { request = createRequest(); if (request==null) { alert("Unable to create request"); return; } var url= "getDetails.php?ImageID=" + escape(itemName); request.open("GET",url,true); request.onreadystatechange = displayDetails; request.send(null); This is a reference to a function, not a function call. So make sure you don’t include any parentheses at the end of the function name. Chapter 1. using ajax Page 27 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 Page28 Return to Table of Contents send(your request to the server Use send()to send your request All that's left to do is actually send the request,and that's easy.just use the send (method on the request object. function getDetails(itemName){ request createRequest(); if (request==null){ alert("Unable to create request"); return; var url="getDetails.php?ImageID="+ escape(itemName); You're sending the request.open ("GET",url,true); request here. request.onreadystatechange displayDetails; request.send(null); ..and this means you're not sending any extra data with the request. thumbnails.is Aren't you forgetting something? We don't want to send null:we 0 want to send the item name. You can send data in your URL string. Asynchronous The request object allows us to send all kinds of data in a variety of ways.In getDetails ()the item name is part of the URLstring: apps make var url="getDetails.php?ImageID="+ requests using escape (itemName); a JavaScript Since that's part of the URL sent to the server,we don't need to send anything else to the server in the send ( object,not a method.Instead,we just pass nul1...which means “nothing.” form submit. 28 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 the Safari Terms of Service.No part of t may be 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
28 Chapter 1 Use send() to send your request All that’s left to do is actually send the request, and that’s easy... just use the send() method on the request object. ...and this means you’re not sending any extra data with the request. $UHQ·W\RXIRUJHWWLQJVRPHWKLQJ" :HGRQ·WZDQWWRVHQGQXOO ZH ZDQWWRVHQGWKHLWHPQDPH You can send data in your URL string. The request object allows us to send all kinds of data in a variety of ways. In getDetails(), the item name is part of the URL string: var url= "getDetails.php?ImageID=" + escape(itemName); Since that’s part of the URL sent to the server, we don’t need to send anything else to the server in the send() method. Instead, we just pass null... which means “nothing.” thumbnails.js function getDetails { ... function getDetails(itemName) { request = createRequest(); if (request==null) { alert("Unable to create request"); return; } var url= "getDetails.php?ImageID=" + escape(itemName); request.open("GET",url,true); request.onreadystatechange = displayDetails; request.send(null); You’re sending the request here... Asynchronous apps make requests using a JavaScript object, not a form submit. send() your request to the server Chapter 1. using ajax Page 28 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.