using ajax......Page 2
Web pages: the old-fashioned approach......Page 3
Web pages reinvented......Page 4
So what makes a page "Ajax"?......Page 6
Rob's Rock 'n' Roll Memorabilia......Page 7
Ajax and rock 'n' roll in 5 steps......Page 13
Step 1: Modify the XHTML......Page 15
Step 2: Initialize the JavaScript......Page 17
Step 3: Create a request object......Page 21
Step 4: Get the item's details......Page 23
Let's write the code for requesting an item's details......Page 25
Always make sure you have a request object before working with it......Page 26
The request object is just an object......Page 27
Hey, server... will you call me back at displayDetails(), please?......Page 28
Use send() to send your request......Page 29
The server usually returns data to Ajax requests......Page 31
Ajax is server-agnostic......Page 32
Use a callback function to work with data the server returns......Page 36
Get the server's response from the request object's responseText property......Page 37
Goodbye traditional web apps.........Page 39
AjaxAcrostic......Page 40
designing ajax applications......Page 44
Mike's traditional web site sucks......Page 45
Let's use Ajax to send registration requests ASYNCHRONOUSLY......Page 47
Update the registration page......Page 52
Event Handlers Exposed......Page 54
Set the window.onload event handler... PROGRAMMATICALLY......Page 55
Code in your JavaScript outside of functions runs when the script is read......Page 57
What happens when.........Page 58
And on the server.........Page 59
Some parts of your Ajax designs will be the same... every time......Page 61
createRequest() is always the same......Page 62
Create a request object... on multiple browsers......Page 65
Ajax app design involves both the web page AND the server-side program......Page 67
The request object connects your code to the web browser......Page 73
You talk to the browser, not the server......Page 74
The browser calls back your function with the server's response......Page 77
Show the Ajax registration page to Mike.........Page 79
The web form has TWO ways to send requests to the server now......Page 80
Let's create CSS classes for each state of the processing.........Page 83
...and change the CSS class with our JavaScript......Page 84
Changes? We don't need no stinkin' changes!......Page 85
Only allow registration when it's appropriate......Page 86
javascript events......Page 94
It all started with a downward-facing dog.........Page 95
Ajax apps are more than the sum of their parts......Page 102
Here's Marcy's XHTML.........Page 103
Events are the key to interactivity......Page 105
Connect events on your web page to event handlers in your JavaScript......Page 108
Use the window.onload event to initialize the rest of the interactivity on a web page......Page 109
Change those left-side images to be clickable......Page 114
Use your XHTML's content and structure......Page 115
Add the code for hideHint(), too......Page 118
Tabs: an optical (and graphical) illusion......Page 119
Use a for... loop to cycle through the images......Page 120
CSS classes are the key (again)......Page 121
Ummm... but the tabs aren't
's!......Page 122
This broke our JavaScript, too, didn't it?......Page 123
Use a request object to fetch the class details from the server......Page 128
Be careful when you have two functions changing the same part of a web page......Page 129
When you need to change images in your script, think "change CSS classes" instead......Page 134
Links in XHTML are represented by elements......Page 135
We need a function to show an active button and hide a button, too......Page 136
multiple event handlers......Page 140
An event can have only one event handler attached to it (or so it seems)......Page 141
A property can have only ONE value......Page 142
Assign multiple event handlers with addEventListener()......Page 143
Your objects can have multiple event handlers assigned to a single event in DOM Level 2......Page 145
What's going on with Internet Explorer?......Page 149
attachEvent() and addEventListener() are functionally equivalent......Page 150
addEventHandler() works for ALL apps, not just Marcy's yoga page......Page 155
Let's update initPage() to use our new utility function......Page 156
So what else could be going wrong?......Page 158
Event handlers in IE are owned by IE's event framework, NOT the active page object......Page 160
attachEvent() and addEventListener() supply another argument to our handlers......Page 161
We need to name the Event argument, so our handlers can work with it......Page 162
You say target tomato, I say srcElement tomato.........Page 163
So how do we actually GET the object that triggered the event?......Page 167
asynchronous applications......Page 175
What does asynchronous really mean?......Page 176
You've been building asynchronous apps all along......Page 178
But sometimes you barely even notice.........Page 179
Speaking of more server-side processing.........Page 180
(More) Asynchrony in 3 easy steps......Page 183
We need two password fields and a for the cover images......Page 184
If you need new behavior, you probably need a new event handler function......Page 189
With ONE request object, you can safely send and receive ONE asynchronous request......Page 198
Asynchronous requests don't wait on anything... including themselves!......Page 199
If you're making TWO separate requests, use TWO separate request objects......Page 200
Asynchrony means you can't count on the ORDERING of your requests and responses......Page 206
A monitor function MONITORS your application... from OUTSIDE the action......Page 211
You call a monitor function when action MIGHT need to be taken......Page 212
Status variables let monitors know what's going on......Page 214
And now for our last trick.........Page 218
Synchronous requests block ALL YOUR CODE from doing anything......Page 220
Use setInterval() to let JavaScript run your process, instead of your own code......Page 223
the document object model......Page 232
You can change the CONTENT of a page.........Page 233
...or you can change the STRUCTURE of a page......Page 234
Browsers use the Document Object Model to represent your page......Page 235
Here's the XHTML that you write.........Page 237
...and here's what your browser sees......Page 238
Your page is a set of related objects......Page 240
Let's use the DOM to build a dynamic app......Page 247
You start with XHTML.........Page 249
appendChild() adds a new child to a node......Page 258
You can locate elements by name or by id......Page 259
Interiew with a new parent......Page 262
Can I move the clicked tile?......Page 263
You can move around a DOM tree using FAMILY relationships......Page 265
A DOM tree has nodes for EVERYTHING in your web page......Page 275
The nodeName of a text node is "#text"......Page 277
Did I win? Did I win?......Page 281
But seriously... did I win?......Page 282
manipulating the DOM......Page 287
Webville Puzzles... the franchise......Page 288
Woggle doesn't use table cells for the tiles......Page 292
The tiles in the XHTML are CSS-positioned......Page 293
"We don't want TOTALLY random letters..."......Page 295
Our presentation is ALL in our CSS......Page 297
We need a new event handler for handling tile clicks......Page 299
We can assign an event handler in our randomizeTiles() function......Page 300
Property values are just strings in JavaScript......Page 301
Use the DOM to change a page's structure......Page 304
Use createElement() to create a DOM element......Page 305
You have to TELL the browser where to put any new DOM nodes you create......Page 306
...AND turning OFF the addLetter() event handler......Page 314
Our JavaScript doesn't care how the server figures out its response to our request......Page 316
Usability check: WHEN can submitWord() get called?......Page 321
frameworks and toolkits......Page 334
So what frameworks ARE there?......Page 340
Every framework uses a different syntax to do things......Page 341
The syntax may change... but the JavaScript is still the same......Page 342
To framework or not to framework?......Page 345
The choice is up to you.........Page 347
xml requests and responses......Page 349
Classic rock gets a 21st century makeover......Page 350
How should a server send a MULTI-valued response?......Page 353
innerHTML is only simple for the CLIENT side of a web app......Page 359
You use the DOM to work with XML, just like you did with XHTML......Page 365
XML is self-describing......Page 372
json......Page 385
JSON can be text AND an object......Page 387
JSON data can be treated as a JavaScript object......Page 388
So how do we get JSON data from the server's response?......Page 389
Use eval() to manually evaluate text......Page 391
Evaluating JSON data returns an object representation of that data......Page 392
JavaScript objects are ALREADY dynamic... because they're not COMPILED objects......Page 398
You can access an object's members... and then get an object's values with those members......Page 399
You need to PARSE the server's response, not just EVALUATE it......Page 405
forms and validation......Page 414
Validation should work from the web page BACK to the server......Page 421
You can validate the FORMAT of data, and you can validate the CONTENT of data......Page 427
Don't Repeat Yourself: DRY......Page 430
Let's build some more event handlers......Page 433
The value of a property can be another JavaScript object......Page 437
Let's warn Marcy's customers when there's a problem with their entry......Page 440
IF there's a warning, get rid of it......Page 444
Duplicate data is a SERVER problem......Page 450
post requests......Page 453
GET requests send request parameters across the network as clear text......Page 457
POST requests DON'T send clear text......Page 458
The data in a POST request is ENCODED until it reaches the server......Page 460
send() your request data in a POST request......Page 462
Always check to make sure your request data was RECEIVED.......Page 464
Why didn't the POST request work?......Page 466
The server unencodes POST data......Page 467
We need to TELL the server what we're sending......Page 468
Set a request header using setRequestHeader() on your request object......Page 470
