Sue Brandreth's Learning Resources

PART I    A Refresher on Web Technologies

1    Anatomy of a Website    5

2    Writing Web Pages in HTML    13

3    Sending Requests Using HTTP    27

4    Client-Side Coding Using JavaScript    36

5    Server-Side Programming in PHP    53

6    A Brief Introduction to XML    61

PART II    Introducing Ajax

7    Anatomy of an Ajax Application    70

8    The XMLHTTPRequest Object    80

9    Talking with the Server    91

10   Using the Returned Data    102

11   Our First Ajax Application    112

PART III    More Complex Ajax Technologies

12    Returning Data as Text    123

13    AHAH–Asynchronous HTML and HTTP    131

14    Returning Data as XML    142

15    Web Services and the REST Protocol    157

16    Web Services Using SOAP    166

17    A JavaScript Library for Ajax    173

18    Ajax “Gotchas”    184

PART IV    Commercial and Open Source Ajax Resources

19    The prototype.js Toolkit    193

20    Using Rico    203

21    Using ZOAD    215

Chapter 1. Essential Ajax
Chapter 2. Getting to Know JavaScript
Chapter 3. Creating Ajax Applications
Chapter 4. Full Throttle Ajax
Chapter 5. Using Ajax Frameworks
Chapter 6. Handling XML in Ajax
Chapter 7. Working with Cascading Style Sheets with Ajax
Chapter 8. Handling Dynamic HTML with Ajax
Chapter 9. Introducing PHP with Ajax
Chapter 10. PHP in Depth
Chapter 11. Validating User Input with Ajax and PHP
Chapter 12. Using the HTML DOM and Ajax

Advance Praise for Head First Ajax; Author of Head First Ajax; How to Use this Book: Intro; Who is this book for?; We know what you’re thinking; We know what your brain is thinking; Metacognition: thinking about thinking; Here’s what WE did; Here’s what YOU can do to bend your brain into submission; Read Me; The technical review team; Acknowledgments; Safari® Books Online; Chapter 1: Using Ajax: Web Apps for a New Generation; 1.1 Web pages: the old-fashioned approach; 1.2 Web pages reinvented; 1.3 So what makes a page “Ajax”?; 1.4 Rob’s Rock ‘n’ Roll Memorabilia; 1.5 Ajax and rock ‘n’ roll in 5 steps; 1.6 Step 1: Modify the XHTML; 1.7 Step 2: Initialize the JavaScript; 1.8 Step 3: Create a request object; 1.9 Step 4: Get the item’s details; 1.10 Let’s write the code for requesting an item’s details; 1.11 Always make sure you have a request object before working with it; 1.12 The request object is just an object; 1.13 Hey, server… will you call me back at displayDetails(), please?; 1.14 Use send() to send your request; 1.15 The server usually returns data to Ajax requests; 1.16 Ajax is server-agnostic; 1.17 Use a callback function to work with data the server returns; 1.18 Get the server’s response from the request object’s responseText property; 1.19 Goodbye traditional web apps…; Chapter 2: Designing Ajax Applications: Thinking Ajaxian; 2.1 Mike’s traditional web site; 2.2 Let’s use Ajax to send registration requests ASYNCHRONOUSLY; 2.3 Update the registration page; 2.4 Set the window.onload event handler… PROGRAMMATICALLY; 2.5 Code in your JavaScript outside of functions runs when the script is read; 2.6 What happens when…; 2.7 And on the server…; 2.8 Some parts of your Ajax designs will be the same… every time; 2.9 createRequest() is always the same; 2.10 Create a request object… on multiple browsers; 2.11 Ajax app design involves both the web page AND the server-side program; 2.12 What we’ve done so far…; 2.13 What we still need to do…; 2.14 The request object connects your code to the web browser; 2.15 You talk to the browser, not the server; 2.16 The browser calls back your function with the server’s response; 2.17 Show the Ajax registration page to Mike…; 2.18 The web form has TWO ways to send requests to the server now; 2.19 Let’s create CSS classes for each state of the processing…; 2.20 … and change the CSS class with our JavaScript; 2.21 Changes? We don’t need no stinkin’ changes!; 2.22 Only allow registration when it’s appropriate; Chapter 3: Javascript Events: Reacting to your users; 3.1 It all started with a downward-facing dog…; 3.2 Ajax apps are more than the sum of their parts; 3.3 Here’s Marcy’s XHTML…; 3.4 Events are the key to interactivity; 3.5 Connect events on your web page to event handlers in your JavaScript; 3.6 Use the window.onload event to initialize the rest of the interactivity on a web page; 3.7 Change those left-side images to be clickable; 3.8 Use your XHTML’s content and structure; 3.9 Add the code for hideHint(), too; 3.10 Tabs: an optical (and graphical) illusion; 3.11 Use a for… loop to cycle through the images; 3.12 CSS classes are the key (again); 3.13 Ummm… but the tabs aren’t < a >’s !; 3.14 This broke our JavaScript, too, didn’t it?; 3.15 Use a request object to fetch the class details from the server; 3.16 Be careful when you have two functions changing the same part of a web page; 3.17 When you need to change images in your script, think “change CSS classes” instead; 3.18 Links in XHTML are represented by elements; 3.19 We need a function to show an active button and hide a button, too; Chapter 4: Multiple Event Handlers: Two’s company; 4.1 An event can have only one event handler attached to it (or so it seems); 4.2 Event handlers are just properties; 4.3 A property can have only ONE value; 4.4 Assign multiple event handlers with addEventListener(); 4.5 Your objects can have multiple event handlers assigned to a single event in DOM Level 2; 4.6 What’s going on with Internet Explorer?; 4.7 Internet Explorer uses a totally different event model; 4.8 attachEvent() and addEventListener() are functionally equivalent; 4.9 addEventHandler() works for ALL apps, not just Marcy’s yoga page; 4.10 Let’s update initPage() to use our new utility function; 4.11 Use an alert() to troubleshoot; 4.12 So what else could be going wrong?; 4.13 Event handlers in IE are owned by IE’s event framework, NOT the active page object; 4.14 attachEvent() and addEventListener() supply another argument to our handlers; 4.15 We need to name the Event argument, so our handlers can work with it; 4.16 You say target tomato, I say srcElement tomato…; 4.17 So how do we actually GET the object that triggered the event?; Chapter 5: Asynchronous Applications: It’s like renewing your driver’s license; 5.1 What does asynchronous really mean?; 5.2 You’ve been building asynchronous apps all along; 5.3 But sometimes you barely even notice…; 5.4 Speaking of more server-side processing…; 5.5 (More) Asynchrony in 3 easy steps; 5.6 We need two password fields and a

|

• Advance Praise for Head First Ajax
• Author of Head First Ajax
• How to Use this Book: Intro
• Chapter 1: Using Ajax: Web Apps for a New Generation
• Chapter 2: Designing Ajax Applications: Thinking Ajaxian
• Chapter 3: Javascript Events: Reacting to your users
• Chapter 4: Multiple Event Handlers: Two’s company
• Chapter 5: Asynchronous Applications: It’s like renewing your driver’s license
• Chapter 6: The Document Object Model: Web Page Forestry
• Chapter 7: Manipulating the DOM: My wish is your command
• Chapter 8: Frameworks and Toolkits: Trust No One
• Chapter 9: XML Requests and Responses: More Than Words Can Say
• Chapter 10: JSON: SON of JavaScript
• Chapter 11: Forms and Validation: Say what you meant to say
• Chapter 12: Post Requests: Paranoia: It’s your friend
• Leftovers: The Top Five Topics (we didn’t cover)
• Utility Functions: Just Gimme the Code

Code Downloads and Example Web Sites

Check out these pages for downloadable packages of the final versions of the sites in the book, as well as links to view them in your browser.

1. Using Ajax: Web Apps for a New Generation
2. Designing Ajax Applications: Thinking Ajaxian
3. JavaScript Events: Reacting to Your Users
4. Multiple Event Handlers: Two’s Company
5. Asynchronous Applications: It’s like Renewing Your Driver’s License
6. The Document Object Model: Web Page Forestry
7. Manipulating the DOM: Your Wish is My Command
8. Frameworks and Toolkits: Trust No One
9. XML Requests and Responses: More Than Words Can Say
10. JSON: SON of JavaScript
11. Forms and Validation: Say What You Meant to Say
12. Post Requests: Paranoia: It’s Your Friend

HOW TO USE THIS BOOK.

1 GETTING INTO AJAX.

Get into Ajax.

Using an Ajax–Based Application.

Run a Live Search.

Autocomplete What You Type.

Modify Web Pages without Page Refreshes.

Drag and Drop with Ajax.

Get Instant Login Feedback.

Create Rich Displays with Ajax.

Create Games with Ajax.

Chat Online Using Ajax.

Download Images with Ajax.

2 CREATING AJAX USING JAVASCRIPT.

Create a Script.

View JavaScript Errors.

Handle Browser Events.

Create JavaScript Functions.

Display Results Where You Choose in a Page.

Connect HTML Buttons to JavaScript.

Display Text in Text Fields.

Pass Arguments to Functions.

Return Data from Functions.

Store Data in Variables.

Work with Operators.

Use JavaScript Operators.

Create Local Variables.

Make Choices with the if Statement.

Using Comparison Operators.

Determine Browser Type and Version.

Repeat Code Execution with the for Loop.

Handle Multiple Data Items at Once Using Arrays.

Using the while Loop.

3 WRITING AJAX CODE.

Write Ajax.

Create an XMLHttpRequest Object Using JavaScript.

Open the XMLHttpRequest Object.

Get Ready to Download.

Download Data with the XMLHttpRequest Object.

Select Relative or Absolute URLs.

Create Newer XMLHttpRequest Objects in Internet Explorer.

Start Using Server–Side Scripts.

Create XML Documents for Download.

Download XML from the Server.

Create a Function That Adds Numbers.

Extract Data from XML Elements.

Read Data Sent to the Server.

Pass Data to the Server with GET.

Pass Data to the Server with POST.

4 GETTING MORE AJAX POWER.

Create Server–Side Mouseovers.

Download JavaScript Using Ajax.

Create a Live Search Using Google Suggest.

Connect to Google Suggest.

Display the Google Suggest Results.

Read Input and Send It to the Server for Validation.

Return Validation from the Server.

Get Header Information.

Extract Specific Header Data.

Check If a Document Exists.

Use Two XMLHttpRequest Objects at the Same Time.

Create an Array of XMLHttpRequest Objects.

Handle Multiple XMLHttpRequest Requests at the Same Time.

Call a Different Domain Safely.

Debug Ajax Code.

5 CREATING AJAX APPLICATIONS.

Convert Mouse Events into a Standard Format.

Handle Mouse Down and Mouse Up Events.

Handle Mouse Move Events.

Handle Mouse Click and Double–Click Events.

Handle Mouse Enter and Leave Events.

Create a Shopping Cart Application.

Drag an HTML Element in a Shopping Cart Application.

Drop an HTML Element in a Shopping Cart Application.

Update a Shopping Cart on the Server.

Download Image Names Using Ajax.

Display Images Using Ajax and Dynamic HTML.

Create an Ajax–Driven Menu System.

Display a Menu Using Cascading Styles.

Hide a Menu Using CSS.

Read Ajax–Driven Menu Selections.

6 EXPLORING THE BASIC AJAX FRAMEWORKS.

Using Ajax Frameworks.

Create the readTextWithGet Function.

Get Text with the readTextWithGet Function.

Create the readXmlWithGet Function.

Get XML with the readXmlWithGet Function.

Create the readTextWithPost Function.

Get Text with the readTextWithPost Function.

Create the readXmlWithPost Function.

Get XML with the readXmlWithPost Function.

Install AJAXLib.

Access the Server With AJAXLib.

Download Data With AJAXLib.

Install libXmlRequest.

Access the Server with libXmlRequest.

Download Data with libXmlRequest.

7 USING MORE POWERFUL AJAX FRAMEWORKS.

Install XHConn.

Access the Server with XHConn.

Download Data with XHConn.

Install SACK.

Access the Server with SACK.

Download Data with SACK.

Install Sarissa.

Access the Server with Sarissa.

Download Data with Sarissa.

Install Interactive Website Framework.

Connecting to the Server with the Interactive Website Framework.

Download Data with the Interactive Website Framework.

Install RICO.

Access the Server with RICO.

Download Data with RICO.

8 HANDLING SERVER–SIDE AJAX FRAMEWORKS.

Install SAJAX.

Write Server–Side Code with SAJAX.

Write Browser–Side Code with SAJAX.

Install Xajax.

Write Server–Side Code with Xajax.

Write Browser–Side Code with Xajax.

Install LibAjax.

Write Server–Side Code with LibAjax.

Write Browser–Side Code with LibAjax.

Chat with Direct Web Remoting.

Edit an Interactive Table with DWR.

Handling E–Mail with Echo2.

Support Auto–complete with the Ajax Tag Library.

Update HTML Elements with Ajax Tag Library.

9 HANDLING XML WITH AJAX.

Create an XML Document.

Write Well–Formed XML.

Handle XML in JavaScript.

Get the XML Document Element from Downloaded XML.

Navigate XML Using firstChild and lastChild.

Navigate XML Using nextSibling and previousSibling.

Extract Text Data From an XML Element.

Handle White Space in Mozilla and Firefox.

Create the removeWhitespace Function in Mozilla and Firefox.

Use the removeWhitespace Function in Mozilla and Firefox.

Find XML Elements by Name.

Extract XML Attributes.

Create a Valid XML Document.

Validate an XML Document.

Report XML Validation Errors.

10 USING CSS WITH AJAX.

Set Up CSS Styles.

Set Font Family and Size.

Underline or Italicize Text.

Make Text Bold.

Align Text.

Set Foreground Colors.

Make New Text More Noticeable.

Set Background Colors.

Set Background Images.

Position Elements Using Absolute Positioning.

Position Elements Using Relative Positioning.

Set HTML Element Visibility.

Create Web Page Pop–Ups.

Move Elements in a Web Page.

Overlap HTML Elements.

11 SUPPORTING AJAX ON THE SERVER WITH PHP.

Create a PHP Page.

Create HTML to Send to the Browser.

Work with Variables.

Create Arrays.

Use PHP Operators.

Handle Text String Data.

Make Choices with the if Statement.

Read Data from Text Fields.

Read Data from Check Boxes.

Read Data from Radio Buttons.

Send XML to the Browser.

Work with the for Loop.

Work with the while Loop.

Work with the foreach Loop.

Read Files on the Server.