book

Head First Ajax

Name: Head First Ajax
Author: Rebecca M. Riordan
ISBN: 9780596515782

by Rebecca M. Riordan

August 2008

Beginner to intermediate

527 pages

11h 10m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Head First Ajax
A Note Regarding Supplemental Files
Advance Praise for Head First Ajax
Author of Head First Ajax
How to Use this Book: Intro
Who is this book for?Who should probably back away from this book?We know what you’re thinkingWe know what your brain is thinkingMetacognition: thinking about thinkingHere’s what WE didHere’s what YOU can do to bend your brain into submissionRead MeThe technical review teamAcknowledgmentsSafari® Books Online
1. Using Ajax: Web Apps for a New Generation
Web pages: the old-fashioned approachWeb pages reinventedSo what makes a page “Ajax”?Rob’s Rock ‘n’ Roll MemorabiliaAjax and rock ‘n’ roll in 5 stepsStep 1: Modify the XHTMLStep 2: Initialize the JavaScriptTo set up the onclick behavior for the thumbnails, the initPage() function has to do two thingsStep 3: Create a request objectStep 4: Get the item’s detailsLet’s write the code for requesting an item’s detailsAlways make sure you have a request object before working with itAnd here’s how that looks in our code...The request object is just an objectLet’s break open() down a bit...Hey, server... will you call me back at displayDetails(), please?Use send() to send your requestThe server usually returns data to Ajax requestsTraditional server-side interactionsAjax server-side interactionsAjax is server-agnosticUse a callback function to work with data the server returnsGet the server’s response from the request object’s responseText propertyGoodbye traditional web apps...
2. Designing Ajax Applications: Thinking Ajaxian
Mike’s traditional web siteLet’s use Ajax to send registration requests ASYNCHRONOUSLYUpdate the registration pageSet the window.onload event handler... PROGRAMMATICALLYCode in your JavaScript outside of functions runs when the script is readWhat happens when...And on the server...Some parts of your Ajax designs will be the same... every timecreateRequest() is always the sameCreate a request object... on multiple browsersAjax app design involves both the web page AND the server-side programWhat we’ve done so far...What we still need to do...The request object connects your code to the web browserYou talk to the browser, not the serverThe browser calls back your function with the server’s responseShow the Ajax registration page to Mike...The web form has TWO ways to send requests to the server nowLet’s create CSS classes for each state of the processing...... and change the CSS class with our JavaScriptChanges? We don’t need no stinkin’ changes!Only allow registration when it’s appropriate
3. Javascript Events: Reacting to your users
It all started with a downward-facing dog...Ajax apps are more than the sum of their partsHere’s Marcy’s XHTML...Events are the key to interactivityConnect events on your web page to event handlers in your JavaScriptUse the window.onload event to initialize the rest of the interactivity on a web pageChange those left-side images to be clickableUse your XHTML’s content and structureEvery XHTML element is accessible in your JavaScript code as an objectAdd the code for hideHint(), tooTabs: an optical (and graphical) illusionTo make a tab active, we need to change the tab’s background to the “active” colorUse a for... loop to cycle through the imagesCSS classes are the key (again)Ummm... but the tabs aren’t < a >’s !This broke our JavaScript, too, didn’t it?Use a request object to fetch the class details from the serverBe careful when you have two functions changing the same part of a web pageMarcy wants the images on the left to change when users roll their mouse over the imageWhen you need to change images in your script, think “change CSS classes” insteadLinks in XHTML are represented by <a> elementsWe need a function to show an active button and hide a button, tooWhen you initialize the page, you need to assign the new event handlers
4. Multiple Event Handlers: Two’s company
An event can have only one event handler attached to it (or so it seems)Only the LAST event handler assigned gets runEvent handlers are just propertiesA property can have only ONE valueAssign multiple event handlers with addEventListener()Your objects can have multiple event handlers assigned to a single event in DOM Level 2The browser runs every handler for an event when that event is triggeredWhat’s going on with Internet Explorer?Internet Explorer uses a totally different event modelattachEvent() and addEventListener() are functionally equivalentaddEventHandler() works for ALL apps, not just Marcy’s yoga pageLet’s update initPage() to use our new utility functionUse an alert() to troubleshootSo what else could be going wrong?Event handlers in IE are owned by IE’s event framework, NOT the active page objectattachEvent() and addEventListener() supply another argument to our handlersYour event handlers get an Event object from attachEvent() and addEventListener()We need to name the Event argument, so our handlers can work with itYou say target tomato, I say srcElement tomato...So how do we actually GET the object that triggered the event?
5. Asynchronous Applications: It’s like renewing your driver’s license
What does asynchronous really mean?A synchronous request for colaAn asynchronous request for colaYou’ve been building asynchronous apps all alongBut sometimes you barely even notice...Speaking of more server-side processing...Oh, and password verification...And... how about some eye candy, too?(More) Asynchrony in 3 easy stepsWe need two password fields and a <div> for the cover imagesIf you need new behavior, you probably need a new event handler functionWith ONE request object, you can safely send and receive ONE asynchronous requestAsynchronous requests don’t wait on anything... including themselves!If you’re making TWO separate requests, use TWO separate request objectsRight now, we disable the Register button in initPage()...... and enable the button in the callback functionsAsynchrony means you can’t count on the ORDERING of your requests and responsesA monitor function MONITORS your application... from OUTSIDE the actionYou call a monitor function when action MIGHT need to be takenRight now, the username and password callbacks directly update the Register button’s statusLet’s have the callbacks run the monitor function...... and let the monitor function update the Register buttonStatus variables let monitors know what’s going onAnd now for our last trick...Synchronous requests block ALL YOUR CODE from doing anythingFirst, we no longer need a “submit” buttonSecond, we need to register a new event handler for the button’s onclick eventThird, we need to send an ASYNCHRONOUS request to the serverUse setInterval() to let JavaScript run your process, instead of your own code

6. The Document Object Model: Web Page Forestry
You can change the CONTENT of a page...... or you can change the STRUCTURE of a pageBrowsers use the Document Object Model to represent your pageThe document object is just an OBJECTHere’s the XHTML that you write...... and here’s what your browser seesYour page is a set of related objectsLet’s use the DOM to build a dynamic appWe’re not replacing content, we’re moving itYou start with XHTML...appendChild() adds a new child to a nodeA new child gets a new parent... automaticallyYou can locate elements by name or by idCan I move the clicked tile?You can move around a DOM tree using FAMILY relationshipsA DOM tree has nodes for EVERYTHING in your web pageThose spaces are nodes, tooThe nodeName of a text node is “#text”swapTiles() and cellIsEmpty() don’t take whitespace nodes into accountDid I win? Did I win?But seriously... did I win?
7. Manipulating the DOM: My wish is your command
Webville Puzzles... the franchiseWoggle doesn’t use table cells for the tilesThe tiles in the XHTML are CSS-positioned“We don’t want TOTALLY random letters...”Our presentation is ALL in our CSSNow the designers have optionsWe need a new event handler for handling tile clicksStart building the event handler for each tile clickWe can assign an event handler in our randomizeTiles() functionProperty values are just strings in JavaScriptWe need to add content AND structure to the “currentWord” <div>Use the DOM to change a page’s structureUse createElement() to create a DOM elementYou have to TELL the browser where to put any new DOM nodes you createThe nodeName and nodeValue properties tell you about nodesWe need to disable each tile. That means changing the tile’s CSS class...... AND turning OFF the addLetter() event handlerSubmitting a word is just (another) requestOur JavaScript doesn’t care how the server figures out its response to our requestUsability check: WHEN can submitWord() get called?You can’t submit a word if there’s no word to submit
8. Frameworks and Toolkits: Trust No One
So what frameworks ARE there?Every framework uses a different syntax to do thingsThe syntax may change... but the JavaScript is still the sameTo framework or not to framework?The choice is up to you...
9. XML Requests and Responses: More Than Words Can Say
Classic rock gets a 21st century makeoverHow should a server send a MULTI-valued response?InnerHTML is only simple for the CLIENT side of a web appYou use the DOM to work with XML, just like you did with XHTMLXML is self-describing
10. JSON: SON of JavaScript
JSON can be text AND an objectJSON data can be treated as a JavaScript objectSo how do we get JSON data from the server’s response?JavaScript can evaluate textual dataUse eval() to manually evaluate textEvaluating JSON data returns an object representation of that dataBut there’s one catch...JavaScript objects are ALREADY dynamic... because they’re not COMPILED objectsYou can access an object’s members... and then get an object’s values with those membersYou need to PARSE the server’s response, not just EVALUATE itSo which is the better data format?
11. Forms and Validation: Say what you meant to say
Marcy’s Yoga for Programmers... a booming new enterpriseValidation should work from the web page BACK to the serverYou can validate the FORMAT of data, and you can validate the CONTENT of dataWe need to validate the FORMAT of the data from Marcy’s enrollment pageDon’t Repeat Yourself: DRYLet’s build some more event handlersRETURN of SON of JavaScriptThe value of a property can be another JavaScript objectLet’s warn Marcy’s customers when there’s a problem with their entryIf you don’t warn(), you have to unwarn()IF there’s a warning, get rid of itDuplicate data is a SERVER problemYou could do this with an asynchronous request...... but what’s the benefit?So we’re done now, right?
12. Post Requests: Paranoia: It’s your friend
There’s a villain in the moviesGET requests send request parameters across the network as clear textClear text is text... in the clear!POST requests DON’T send clear textGET requests send data in the request URLPOST requests send data separate from the request URLThe data in a POST request is ENCODED until it reaches the serversend() your request data in a POST requestAlways check to make sure your request data was RECEIVED.Why didn’t the POST request work?The server unencodes POST dataWe need to TELL the server what we’re sendingServers get information from the browser via REQUEST HEADERS.Servers send information to the browser using RESPONSE HEADERS.Set a request header using setRequestHeader() on your request object
A. Leftovers: The Top Five Topics (we didn’t cover)
#1 Inspecting the DOMInspecting the DOM in Internet ExplorerInspecting the DOM in Safari#2 Graceful degradation#3 script.aculo.us and the Yahoo UI librariesscript.aculo.usYahoo UI (YUI)#4 Using JSON libraries in your PHP codeUsing JSON in PHP 5.1 and earlier#5 Ajax and ASP.NETYou don’t NEED ASP.NET Ajax to build Internet Explorer-compatible web apps
B. Utility Functions: Just Gimme the Code
utils.js: a work in progress
Index
About the Author
Copyright

Content preview from Head First Ajax

Chapter 7. Manipulating the DOM: My wish is your command

Sometimes you just need a little DOM mind control.

It’s great to know that web browsers turn your XHTML into DOM trees. And you can do a lot by moving around within those trees. But real power is taking control of a DOM tree and making the tree look like you want it to. Sometimes what you really need is to add a new element and some text, or to remove an element, like an <img>, from a page altogether. You can do all of that and more with the DOM, and along the way, banish that troublesome innerHTML property altogether. The result? Code that can do more to a page, without having to mix presentation and structure in with your JavaScript.

Webville Puzzles... the franchise

All the cool kids have been playing the Fifteen Puzzle you developed for Webville Puzzles. The company’s been making so much on subscription fees that they want a new puzzle... and they’ve come to you to build the interactivity.

This time, the company wants something a little more educational: Woggle, an online word generation game. They’ve already built the XHTML, and even know exactly how they want the puzzle to work.

Here’s the initial Woggle page:

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9780596515782Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Head First Ajax

by Rebecca M. Riordan

Chapter 7. Manipulating the DOM: My wish is your command

Webville Puzzles... the franchise

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.