Chapter 1.using ajax Page29 Return to Table of Contents using ajax So what about the server-side code? The server-side code is... ...on the server. That sounds obvious,but lots of times,you don't have to (or even get to)write the code your web application is talking to.Instead, you work with an existing program,where you know the inputs and outputs,or tell another group what you need. Not only that,but you might also have one server-side program that's written in PHP and another in ASPNET...and other than the URL you don't have to change your JavaScript code at all.Take a look: This is what you need to worry about..the JavaScript code and Evcn if this part of things is your responsibility,it's totally separate the request object. from your fiax front-end code. request funct getDetails() getDeraus getDetails.php displayDetails() thumbnails.js equest Web Server All you really need to know about the server is the script's name and what your request object sends and gets from the server. you are here 29 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 29 using ajax 6RZKDWDERXWWKH VHUYHUVLGHFRGH" The server-side code is... ...on the server. That sounds obvious, but lots of times, you don’t have to (or even get to) write the code your web application is talking to. Instead, you work with an existing program, where you know the inputs and outputs, or tell another group what you need. Not only that, but you might also have one server-side program that’s written in PHP, and another in ASP.NET... and other than the URL, you don’t have to change your JavaScript code at all. Take a look: thumbnails.js function getDetails { ... getDetails() displayDetails() Web Server request request getDetails.php This is what you need to worry about... the JavaScript code and the request object. Even if this part of things is your responsibility, it’s totally separate from your Ajax front-end code. All you really need to know about the server is the script’s name and what your request object sends and gets from the server. Chapter 1. using ajax Page 29 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 30 Return to Table of Contents servers return just what you need The server usually returns data to Ajax requests In a traditional web app,the server always responds to a request from the browser by sending back a new page.The browser throws away anything that's already displayed (including any fields the user has filled in)when that new page arrives. Traditional server-side interactions The browser sends a request The server may do some to a rl,possibly sending processing,or may just along some request data. load and send some text but it always returns a full web page The server sends back an entire page. Web Server Ajax server-side interactions The server always does some processing In an Ajax app,the server can return a whole page,part of a page,or and sends back data. just some information that will be formatted and displayed on a web some七mes HTML page.The browser only does what your JavaScript tells it to do. sometimes just raw information net getPetalls0 getVetails-php thumbnails.js Web Server Our JavaScript can use the server's data The server responds,and to update just part of the browser runs your the page. callback funet七om 30 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 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
30 Chapter 1 The server usually returns data to Ajax requests In a traditional web app, the server always responds to a request from the browser by sending back a new page. The browser throws away anything that’s already displayed (including any fields the user has filled in) when that new page arrives. The browser sends a request to a url, possibly sending along some request data. The server sends back an entire page. Traditional server-side interactions The server may do some processing, or may just load and send some text, but it always returns a full web page. The server always does some processing and sends back data... sometimes HTML, sometimes just raw information. In an Ajax app, the server can return a whole page, part of a page, or just some information that will be formatted and displayed on a web page. The browser only does what your JavaScript tells it to do. Ajax server-side interactions The server responds, and the browser runs your callback function. thumbnails.js function getDetails { ... getDetails() displayDetails() Web Server request request getDetails.php Our JavaScript can use the server’s data to update just part of the page. Web Server servers return just what you need Chapter 1. using ajax Page 30 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 Ajax is server-agnostic Ajax doesn't require any particular server technology.You can use Active Server Pages(ASP).PHP or whatever you need and have access to.In fact,there's no need to get into the details of the server- side technology because it doesn't change how you build your Ajax apps. Here's all that Ajax really sees: This is how Ajax sees server-side interactions. This is what we'll send to the server. parameters request response T刀his is what the server nceds to send back. Sharpen yourcil What parameter and response do we need for the interaction with the server for Rob's memorabilia page? Answers on page 40. you are here 31 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 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 USC1o7)or that otherwise violates the Safari Terms of Service is strictly prohibited
you are here 31 using ajax Ajax is server-agnostic Ajax doesn’t require any particular server technology. You can use Active Server Pages (ASP), PHP, or whatever you need and have access to. In fact, there’s no need to get into the details of the serverside technology because it doesn’t change how you build your Ajax apps Here’s all that Ajax really sees: request parameters response This is what we’ll send to the server. This is what the server needs to send back. This is how Ajax sees server-side interactions. What parameter and response do we need for the interaction with the server for Rob’s memorabilia page? Answers on page 40. Chapter 1. using ajax Page 31 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 Page3z Return to Table of Contents test drive TesT DRIve Code getDetails(),and fire up your web browser. Make sure you've got getDetails()coded in your thumbnails.js file.Load up Rob's memorabilia page,and try clicking on one of the inventory images. 000 ROB'S ROCKN ROLL VEMORABILIA BRAIN POWER What happens?What's wrong with the page? What do you need to do to fix the problem? 32 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 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 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
32 Chapter 1 :KDWKDSSHQV":KDW¶VZURQJZLWKWKHSDJH" :KDWGR\RXQHHGWRGRWRIL[WKHSUREOHP" Test Drive Code getDetails(), and fire up your web browser. Make sure you’ve got getDetails() coded in your thumbnails.js file. Load up Rob’s memorabilia page, and try clicking on one of the inventory images. test drive Chapter 1. using ajax Page 32 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 33 Return to Table of Contents using ajax 米 WHAT'S MY PURPOSE? + Below on the left are several properties of the request object.Can you match each property to what it does,or what information it contains? The status code message returned readyState by the server,.for example,“OK”for status 202. Contains information sent back status by the server in XML format. A status code returned by the server responseXML indicating,for example,success or that a requested resource is missing. statusText Contains textual information sent back by the server. response Text A number that represents the current state of the request object. thereare no Dumb Questions Can you explain wht a calback a calback executes when the Isthawhy the reqest property is function is again? server's finished with a request? called onreadystatechange? No,it's actually called by the browser That's exacly right Every time the is executed when something else finishes. every time the server responds to the server responds to a request,it sets the In Ajax,it's the function that's called when request,even if the server's not totally readystate property of the request the server responds to a request object. done with the request.Most servers object to a different value.So we'll need to The browser 'calls back"that function at a respond more than once to say that they've pay close attention to that property to figure certain time. received the request,that they're working out exacthy when the server's done with the on the request,and then,again,when request we send it. they've finished processing the request you are here 33 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 reproduc ced 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 USC1o7)or that otherwise violates the Safari Terms of Service is strictly prohibited
you are here 33 using ajax readyState Below on the left are several properties of the request object. Can you match each property to what it does, or what information it contains? responseText responseXML status statusText Q : Can you explain what a callback function is again? A : A callback function is a function that is executed when something else finishes. In Ajax, it’s the function that’s called when the server responds to a request object. The browser “calls back” that function at a certain time. Q : So a callback executes when the server’s finished with a request? A : No, it’s actually called by the browser every time the server responds to the request, even if the server’s not totally done with the request. Most servers respond more than once to say that they’ve received the request, that they’re working on the request, and then, again, when they’ve finished processing the request. Q : Is that why the request property is called onreadystatechange? A : That’s exactly right. Every time the server responds to a request, it sets the readyState property of the request object to a different value. So we’ll need to pay close attention to that property to figure out exactly when the server’s done with the request we send it. 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. The status code message returned by the server, for example, “OK” for status 202. Chapter 1. using ajax Page 33 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