This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Advance Praise for Head First Ajax “Ajax is more than just revisiting existing technologies, making some small changes to your web application and then declaring it Ajax-enabled. Rebecca M. Riordan walks you through all of the steps of building an Ajax application in Head First Ajax, and shows you that Ajax is more than ‘that little asynchronous part’, but a better approach to web design all together.” — Anthony T. Holdener III, author of “Ajax: The Definitive Guide” “You don’t just read Head First books, you *do* Head First books. And it makes all the difference.” — Pauline McNamara, Techno-pedagogical Consultant for university eLearning projects, Switzerland “The author does an excellent job teaching the various aspects of Ajax, bringing back previous lessons without being repetitive and introducing common problems in a way that helps readers discover the problems themselves. In areas where there still isn’t a definitive practice, the reader is exposed to all the options and encouraged to make up his or her own mind.” — Elaine Nelson, Website Designer “Behind the Ajax eight ball? Get out of the shadows with this book. You’ll wrap your mind around the core concepts, and have some fun in the process.” — Bear Bibeault, Web Applications Architect
Download at WoweBook.Com
Other related books from O’Reilly Ajax Design Patterns Ajax: The Definitive Guide Ajax HacksTM Ajax on Java Programming ASP.NET Ajax JavaScript: The Definitive Guide JavaScript: The Good Parts
Other books in O’Reilly’s Head First series Head First JavaTM Head First Object-Oriented Analysis and Design (OOA&D) Head First HTML with CSS and XHTML Head First Design Patterns Head First Servlets and JSP Head First EJB Head First PMP Head First SQL Head First C# Head First Software Development Head First JavaScript Head First Physics Head First Statistics Head First Rails (2008) Head First PHP & MySQL (2008) Head First Web Design (2008) Head First Algebra (2008)
Download at WoweBook.Com
Head First Ajax Wouldn’t it be dreamy if there was a book on web programming that wasn’t a bunch of theory and fancy talk about Google Maps? But it’s probably just a fantasy...
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. The Head First series designations, Head First Ajax, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and the authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. No web pages were harmed in the creation of this book, although several were bent significantly out of shape. Several browser-server communications were interrogated, but only after their rights were carefully presented. TM
This book uses RepKover™, a durable and flexible lay-flat binding.
ISBN: 978-0-596-51578-2 [M]
Download at WoweBook.Com
[12/08]
the author
Author of Head First Ajax
rdan
Rebecca M. Rio
With twenty years experience in the field, Rebecca M. Riordan has earned an international reputation for designing and implementing computer systems that are technically sound, reliable, and effectively meet her clients’ needs. Her particular area of expertise is database design, and she is a five year Access MVP. Rebecca has also authored several database books and served as a senior technical support engineer for Microsoft’s database products. As a Microsoft employee in Australia, Rebecca was the Senior technical support engineer for Microsoft’s database products.
Download at WoweBook.Com
table of contents
Table of Contents (Summary)
Intro
xix
1
Using Ajax: Web Apps for a New Generation
1
2
Designing Ajax Applications: Thinking Ajaxian
43
3
Javascript Events: Reacting to your users
93
4
Multiple Event Handlers: Two’s Company
139
5
Asynchronous Applications: It’s Like Renewing Your Driver’s License
173
6
The Document Object Model: Web Page Forestry
229
7
Manipulating the DOM: My Wish is Your Command
283
8
Frameworks and Toolkits: Trust No One
329
9
XML Requests and Responses: More Than Words Can Say
343
10
JSON: SON of JavaScript
379
11
Forms and Validation: Say What You Meant to Say
407
12
Post Requests: Paranoia: It’s Your Friend
445
i
Appendix i: Top Five Topics We Didn’t Cover
471
ii
Appendix ii: Utility Functions
483
Table of Contents (the real thing) Intro Your brain on Ajax. Here you are trying to learn something, while here your brain is doing you a favor by making sure the learning doesn’t stick. Your brain’s thinking, “Better leave room for more important things, like which wild animals to avoid and whether naked snowboarding is a bad idea.” So how do you trick your brain into thinking that your life depends on knowing Ajax? Who is this book for?
xx
We know what you’re thinking
xxi
Metacognition
xxiii
Bend your brain into submission
xxv
Read me
xxvi
The technical review team
xxviii
Acknowledgments
xxix
vi Download at WoweBook.Com
table of contents
1
using ajax Web Apps for a New Generation Tired of waiting around for your page to reload? Frustrated by clunky web application interfaces? It’s time to give your web apps that slick, responsive desktop feel. And how do you do that? With Ajax, your ticket to building Internet applications that are more interactive, more responsive, and easier to use. So skip your nap; it’s time to put some polish on your web apps. It’s time to get rid of unnecessary and slow full-page refreshes forever.
I’m desperate... but I can’t afford a more powerful server or a team of web experts.
Ajax pages only talk to the server when they have to... and only about what the server knows.
Web pages: the old-fashioned approach
2
Web pages reinvented
3
So what makes a page “Ajax” ?
5
Rob’s Rock ‘n’ Roll Memorabilia
6
Ajax and rock ‘n’ roll in 5 steps
12
Step 1: Modify the XHTML
14
Step 2: Initialize the JavaScript
16
Step 3: Create a request object
20
Step 4: Get the item’s details
22
Let’s write the code for requesting an item’s details
24
Always make sure you have a request object before working with it
25
The request object is just an object
26
Hey, server... will you call me back at displayDetails(), please?
27
Use send() to send your request
28
The server usually returns data to Ajax requests
30
Ajax is server-agnostic
31
Use a callback function to work with data the server returns
35
Get the server’s response from the request object’s responseText property
36
Goodbye traditional web apps...
38
request function getDetails() getDetails { ... displayDetails() } thumbnails.js
Our JavaScript can use the server’s dat to update just part aof the page.
The server responds, and the browser runs your callback function.
getDetails.php
request
Web Server
The server always does some processing and sends back data... sometimes HTML, sometimes just raw information.
vii Download at WoweBook.Com
table of contents
2
designing ajax applications Thinking Ajaxian Welcome to Ajax apps—it’s a whole new web world. So you’ve built your first Ajax app, and you’re already thinking about how to change all your web apps to make requests asynchronously. But that’s not all there is to Ajax programming. You’ve got to think about your applications differently. Just because you’re making asynchronous requests, doesn’t mean your application is user-friendly. It’s up to you to help your users avoid making mistakes, and that means rethinking your entire application’s design. Mike’s traditional web site sucks
In Progress...
44
Let’s use Ajax to send registration requests ASYNCHRONOUSLY 46
Username is okay.
Username is taken.
When you enter a username, this in progress graphic should be displayed.
The submit button is disabled.
This graphic tells you the username is okay.
Update the registration page
51
Event Handlers Exposed
53
Set the window.onload event handler... PROGRAMMATICALLY
54
Code in your JavaScript outside of functions runs when the script is read
56
What happens when...
57
And on the server...
58
Some parts of your Ajax designs will be the same... every time
60
createRequest() is always the same
61
Create a request object... on multiple browsers
64
Ajax app design involves both the web page AND the server-side program
66
The request object connects your code to the web browser
72
You talk to the browser, not the server
73
The browser calls back your function with the server’s response
76
Show the Ajax registration page to Mike...
78
The web form has TWO ways to send requests to the server now
79
Let’s create CSS classes for each state of the processing...
82
...and change the CSS class with our JavaScript
83
Changes? We don’t need no stinkin’ changes!
84
Only allow registration when it’s appropriate
85
You can submit the page now.
viii Download at WoweBook.Com
table of contents
3
javascript events Reacting to your users Sometimes you need your code to react to other things going on in your web application... and that’s where events come into the picture. An event is something that happens on your page, in the browser, or even on a web server. But it’s not enough to just know about events... sometimes you want to respond to them. By creating code, and registering it as an event handler, you can get the browser to run your handler every time a particular event occurs. Combine events and handlers, and you get interactive web applications.
Beginner This is where you should start if you’re new to yoga.
Intermediate When the beginner course isn’t a challenge, try this one.
Advanced
It all started with a downward-facing dog...
94
Ajax apps are more than the sum of their parts
101
Here’s Marcy’s XHTML...
102
Events are the key to interactivity
104
Connect events on your web page to event handlers in your JavaScript
107
Use window.onload event to initialize the interactivity on a web page 108 Change those left-side images to be clickable
references the current page. We don’t want the tabs to take the user anywhere else, although later we’ll write code so that clicking on a tab shows the selected class’s schedule.
Q:
If we’re not taking the user anywhere, why use elements?
With the tabs, we had an inactive class and an active class. But on the buttons, they’re in the XHTML without a class, and then there’s a CSS “active” class description with the active image. Why don’t we have an inactive CSS class with these buttons, too?
A:
Good question. With the tabs, there were two distinct states: active (in the forefront) and inactive (in the background). The buttons we have, though, really have a normal state, where they sit flat, and an active state, where the button is highlighted. So it seemed more accurate to have a button (with no class), and then assign that button the “active” class when it’s rolled over. Uniformity is a good thing, though, so you could probably use inactive and active classes if you felt strongly about it.
134 Chapter 3 Download at WoweBook.Com
javascript events
We need a function to show an active button and hide a button, too Before we change any of schedule.js, let’s add two functions we know we’ll need. First, we need a buttonOver() function to show the active image for a button. That’s just a matter of changing a CSS class: function buttonOver() { this.className = "active"; }
When the mouse is over a button, make it active.
We can do just the opposite for when a user’s mouse rolls out of the button’s area. We just need to change back to the default state, which is no CSS class: function buttonOut() { this.className = ""; }
When the mouse rolls out of a button, go back to the default state.
This 
the 
images of 
