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 6. The Document Object Model: Web Page Forestry

Wanted: easy-to-update web pages. It’s time to take things into your own hands and start writing code that updates your web pages on the fly. Using the Document Object Model, your pages can take on new life, responding to users’ actions, and you can ditch unnecessary page reloads forever. By the time you’ve finished this chapter, you’ll be able to find, move, and update content virtually anywhere on your web page. So turn the page, and let’s take a stroll through the Webville Tree Farm.

You can change the CONTENT of a page...

So far, most of the apps we’ve built have sent requests, gotten a response, and then used that response to update part of a page’s content.

... or you can change the STRUCTURE of a page

But what if you need to do more than just change the content of a <div> or replace the label on a button? What if an image needs to actually move on a page? How would you accomplish that?

Your users can’t change your XHTML.

The structure of your page is defined in your XHTML, and people viewing your pages definitely can’t mess around with that structure. Otherwise, all the work you’d put into your pages would be a total waste of time. ...

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