Chapter 1.using ajax Page4 Return to Table of Contents ajax is a methodology Okay.I get that Ajax makes web pages respond faster,but what exactly is it? Ajax is a new way of using existing technologies. Ajax isn't a whole new technology that you have to learn,like CSS or JavaScript,or a set of graphics techniques you'll need to crack open PhotoShop to accomplish.Ajax is just a new way of thinking about how to do what you're already doing,using technologies you probably already know. The browser sends requests and gets responses from a web server. Your page can use im39e,月ash animations,Silverlight, or anything else you want or need. <htmb> function getDetails #mystyle( </htmb> XHTML files scripts style sheets other resources Most web programmers and designers are already using some,or even all,of these technologies. 4 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 tr nsmitted 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
Chapter 1 2ND\,JHWWKDW$MD[PDNHVZHESDJHV UHVSRQGIDVWHUEXWZKDWH[DFWO\LVLW" Ajax is a new way of using existing technologies. Ajax isn’t a whole new technology that you have to learn, like CSS or JavaScript, or a set of graphics techniques you’ll need to crack open PhotoShop to accomplish. Ajax is just a new way of thinking about how to do what you’re already doing, using technologies you probably already know. <html> ... </html> function getDetails { ... #mystyle{ ... XHTML files scripts style sheets other resources The browser sends requests and gets responses from a web server. Your page can use images, Flash animations, Silverlight, or anything else you want or need. Most web programmers and designers are already using some, or even all, of these technologies. ajax is a methodology Chapter 1. using ajax Page 4 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 Page5 Return to Table of Contents using ajax So what makes a page "Ajax"? Ajax is a way of designing and building web pages that are as interactive and responsive as desktop applications.So what does that mean for you?You handle things at the client's browser whenever you can.Your pages make asynchronous requests that allow the user to keep working instead An asynchronous of waiting for a response.You only update the things on your pages that actually change.And best of all,an Ajax page is built using standard Internet request is a technologies,things you probably already know how to use,like: request that ● XHTML occurs behind ● Cascading Style Sheets ● the scenes. JavaScript Ajax applications also use a few things that have been around for a while but Your users can may be new to you,like: keep working ● The XmlHttpRequest We'll look at all of XML JSON these in detail before while the we're through. ● The DOM request is taking place. there are no Dumb Questions Doesn'Ajax stand for Asynchronous JavaScript and XML”? But aren't all wb pages asynchronous?Lik when a browser loads an image while I'm already looking at the Sont ol oe re page? don't use JavaScript or XML,it's more useful to define Ajax as a Browsers are asynchronous,but the standard web page way of building web pages that are as responsive and interactive isn't Usually when a web page needs information from a as desktop applications,and not worry too much about the exact server-side program,everything comes to a complete stop until technologies involved. the server responds...unless the page makes an asynchronous request And that'what Ajax is all about. What exactly doesasynchronous"mean? In ax.you can make thserve Butall Ajaxpageuse thatequstc right? making your user wait around for a response.That's called an asynchronous request,and it's the core of what Ajax is all Nope.Lots do,and we spend a couple of chapters about. mastering XMLHttpRequest,but it's not a requirement.In fact,lots of apps that are considered Ajax are more about user interactivity and design than any particular coding technique. you are here 5 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 smitted 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 USC107)or that otherwise violates the Safari Terms of Service is strictly prohibited
you are here 5 using ajax So what makes a page “Ajax” ? Ajax is a way of designing and building web pages that are as interactive and responsive as desktop applications. So what does that mean for you? You handle things at the client’s browser whenever you can. Your pages make asynchronous requests that allow the user to keep working instead of waiting for a response. You only update the things on your pages that actually change. And best of all, an Ajax page is built using standard Internet technologies, things you probably already know how to use, like: Q : Doesn’t Ajax stand for “Asynchronous JavaScript and XML”? A : Sort of. Since lots of pages that are considered “Ajax” don’t use JavaScript or XML, it’s more useful to define Ajax as a way of building web pages that are as responsive and interactive as desktop applications, and not worry too much about the exact technologies involved. Q : What exactly does “asynchronous” mean? A : In Ajax, you can make requests to the server without making your user wait around for a response. That’s called an asynchronous request, and it’s the core of what Ajax is all about. Q : But aren’t all web pages asynchronous? Like when a browser loads an image while I’m already looking at the page? A : Browsers are asynchronous, but the standard web page isn’t. Usually when a web page needs information from a server-side program, everything comes to a complete stop until the server responds... unless the page makes an asynchronous request. And that’ what Ajax is all about. Q : But all Ajax pages use that XMLHttpRequest object, right? A : Nope. Lots do, and we’ll spend a couple of chapters mastering XMLHttpRequest, but it’s not a requirement. In fact, lots of apps that are considered Ajax are more about user interactivity and design than any particular coding technique. Ajax applications also use a few things that have been around for a while but may be new to you, like: We’ll look at all of these in detail before we’re through. XHTML Cascading Style Sheets JavaScript The XmlHttpRequest XML & JSON The DOM An asynchronous request is a request that occurs behind the scenes. Your users can keep working while the request is taking place. Chapter 1. using ajax Page 5 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 Page6 Return to Table of Contents rob needs your help Rob's Rock n'Roll Memorabilia Meet Rob.He's put all his savings into an online rock n'roll memorabilia store.The site looks great,but he's still been getting tons of complaints.Customers are clicking on the thumbnail images on the inventory page,but the customers'browsers are taking forever before they show information about the selected item.Some of Rob's users are hanging around,but most have just stopped coming to Rob's online shop altogether. ROUS ROCK”ROL VEMORI When the user clicks an item,a bigger This panc picture of the image contains is displayed here... thumbnails of the items Rob has for sale. .and the details about the item are shown here. I'm desperate...but I can't afford a more powerful server or a team of web experts 0 Ajax pages only talk to the server when they have to... and only about what the server knows. The problem with Rob's site isn't that his server is too slow,but that his pages are sending requests to the server all the time...even when they don't need to. 6 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 nsmitted 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
Chapter 1 Rob’s Rock ‘n’ Roll Memorabilia Meet Rob. He’s put all his savings into an online rock n’ roll memorabilia store. The site looks great, but he’s still been getting tons of complaints. Customers are clicking on the thumbnail images on the inventory page, but the customers’ browsers are taking forever before they show information about the selected item. Some of Rob’s users are hanging around, but most have just stopped coming to Rob’s online shop altogether. This pane contains thumbnails of the items Rob has for sale. When the user clicks an item, a bigger picture of the image is displayed here... ...and the details about the item are shown here. ,·PGHVSHUDWHEXW,FDQ·W DIIRUGDPRUHSRZHUIXOVHUYHURU DWHDPRIZHEH[SHUWV Ajax pages only talk to the server when they have to... and only about what the server knows. The problem with Rob’s site isn’t that his server is too slow, but that his pages are sending requests to the server all the time... even when they don’t need to. rob needs your help Chapter 1. using ajax Page 6 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 Page7 Return to Table of Contents using ajax Sharpen your pencil Here's what Rob's online store does right now.What's wrong with this picture? The browser sends The user clieks the selected item's ID to the server. The server sends back a new page, with the seleeted item's information The user elicks another thumbnail. The browser sends the new item's ID to the server. The server sends back another whole The user gets new page. 七ired of waiting and does something else... How would Ajax change this diagram?Write down what you think should happen on Rob's site. you are here > 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 itted 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 7 using ajax The user clicks a thumbnail. The browser sends the selected item’s ID to the server. The server sends back a new page, with the selected item’s information. The browser sends the new item’s ID to the server. The server sends back another whole The user gets new page. tired of waiting and does something else... The user clicks another thumbnail. Here’s what Rob’s online store does right now. What’s wrong with this picture? How would Ajax change this diagram? Write down what you think should happen on Rob’s site. Chapter 1. using ajax Page 7 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 Page8 Return to Table of Contents asynchronous apps do more than one thing at once Sharpen your pencil oution Your job was to think about how Ajax could help save Rob's site...and his business.With Ajax,we can completely remove all the page refreshes on his inventory page.Here's what that would look like: Clicking an image calls a JavaScript function. The function creates The user clicks a request object that a thumbnail. asks the server for a deseription of the item. 个 The funetion also The browser changes the image sends the to match the request object selected item. to the server behind the scenes The browser requests the new image from the server...but that's not something your page worries about. Only the part of the page that actually changed is updated...but The server returns the user still sces the new image and a new image and a response to the the selected item's request to the description. user's browser. BULLET POINTS ■ Asynchronous requests allow more than one thing to happen at the same time. Only the part of a web page that needs to change gets updated. The page isn't frozen while the server is returning data to the browser. 8 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 itted in any form by any means without the prior written permission for reprints and excerpts from the publis er.R 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
Chapter 1 The user clicks a thumbnail. Clicking an image calls a JavaScript function. The function also changes the image to match the selected item. The function creates a request object that asks the server for a description of the item. The browser sends the request object to the server, asynchronously, behind the scenes. The browser requests the new image from the server... but that’s not something your page worries about. Only the part of the page that actually changed is updated... but the user still sees a new image and the selected item’s description. Asynchronous requests allow more than one thing to happen at the same time. Only the part of a web page that needs to change gets updated. The page isn’t frozen while the server is returning data to the browser. request request Your job was to think about how Ajax could help save Rob’s site... and his business. With Ajax, we can completely remove all the page refreshes on his inventory page. Here’s what that would look like: The server returns the new image and a response to the request to the user’s browser. function getDetails { ... asynchronous apps do more than one thing at once Chapter 1. using ajax Page 8 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