Ajax Bible

Chapter 1: Essential Ajax

Figure 1.1: Google searches for matches to the term you enter.

Figure 1.2: Google displays the matches it finds.

Figure 1.3: The Google Suggest page

Figure 1.4: Google Suggest looks for matches as you type.

Figure 1.5: The original Ajax article

Figure 1.6: Gollum performs live searches of Wikipedia.

Figure 1.7: An Ajax-enabled calculator

Figure 1.8: Signing in for PHP Free Chat

Figure 1.9: PHP Free Chat lets you enter text that others can see.

Figure 1.10: An Ajax-enabled free chat application

Figure 1.11: Num Sum is an online Ajax spreadsheet application.

Figure 1.12: Browsing through Amazon.com

Figure 1.13: Using autocomplete

Figure 1.14: Using SWATO for autocomplete

Figure 1.15: An Ajax-enabled login page

Figure 1.16: The login is blocked.

Figure 1.17: A successful Ajax-enabled login

Figure 1.18: In this example you can download images.

Figure 1.19: In this example you can download a new image without refreshing the page.

Figure 1.20: The refrigerator magnet words stay where you placed them unless someone else comes along and moves them.

Figure 1.21: Creating a shared mosaic

Figure 1.22: Dragging a column in Ideo Technologies’ datagrid

Figure 1.23: Dragging an item to an Ajax-enabled shopping cart

Figure 1.24: Adding an item to an Ajax-enabled shopping cart

Figure 1.25: Using the Harry Potter–based diary

Figure 1.26: The diary responds.

Figure 1.27: Asking the diary where it is

Figure 1.28: The diary indicates where it is.

Figure 1.29: Playing Ajax chess

Figure 1.30: An Ajax Rolodex

Figure 1.31: Using an Ajax Rolodex

Figure 1.32: The Digg Spy application updates itself constantly.

Figure 1.33: SaneBull constantly updates its stock ticker using Ajax.

Figure 1.34: A reverse ZIP code finder

Figure 1.35: Using the reverse ZIP code finder

Figure 1.36: A sample Writely page

Figure 1.37: Using Google Maps

Figure 1.38: Checking traffic conditions in the UK the Ajax way

Figure 1.39: Browser-supported e-mail

Figure 1.40: Using e-mail with Ajax

Getting information on the Netflix top 100 movies

Chapter 2: Know Your JavaScript

Figure 2.1: An Ajax demo

Figure 2.2: Downloading text using Ajax

Figure 2.3: A first JavaScript example

Figure 2.4: A JavaScript error in Internet Explorer

Figure 2.5: Examining a JavaScript error in Internet Explorer

Figure 2.6: A JavaScript problem in Firefox

Figure 2.7: Examining a JavaScript problem in Firefox’s JavaScript console

Figure 2.8: Handling an onmousedown event

Figure 2.9: Writing a message to a Web page

Figure 2.10: Writing a message to a Web page using function arguments

Figure 2.11: Writing text using a <span> element

Figure 2.12: Returning values from functions

Figure 2.13: Storing data in variables

Figure 2.14: Using the if statement

Figure 2.15: Using the else statement

Figure 2.16: Determining that the user’s browser is Firefox

Figure 2.17: Determining that the user’s browser is Internet Explorer

Figure 2.18: Determining the user’s Firefox version

Figure 2.19: Determining the user’s Internet Explorer version

Figure 2.20: Adding 1 to 1000 with the for loop

Figure 2.21: Finding Nancy with the while loop

Figure 2.22: A JavaScript-enabled button

Figure 2.23: Responding to a button click

Chapter 3: Creating Ajax Applications

Figure 3.1: A first Ajax application

Figure 3.2: Downloading text using Ajax techniques

Figure 3.3: Reading text from a PHP script using Ajax

Figure 3.4: Downloading text from a PHP script

Figure 3.5: Interacting with the server by passing data

Figure 3.6: Retrieving a message from the server

Figure 3.7: Interacting with the server by passing data using POST

Figure 3.8: Retrieving a message from the server using POST

Figure 3.9: The lunch.html page

Figure 3.10: Retrieving a menu’s items from the server using XML

Figure 3.11: Selecting a menu item

Chapter 4: Serious Ajax Programming

Figure 4.1: Using two XMLHttpRequest objects

Figure 4.2: Using an array of XMLHttpRequest objects

Figure 4.3: Using multiple XMLHttpRequest objects

Figure 4.4: Downloading JavaScript

Figure 4.5: Executing JavaScript

Figure 4.6: Google Suggest

Figure 4.7: Connecting to Google Suggest with a custom page

Figure 4.8: Checking a user’s suggested username

Figure 4.9: Rejecting a user’s suggested username

Figure 4.10: A HEAD request

Figure 4.11: Getting specific HEAD data

Chapter 5: Introducing Ajax Frameworks

Figure 5.1: Using the Ajax Utility Library

Figure 5.2: Downloading text using the Ajax Utility Library

Figure 5.3: Downloading XML using the Ajax Utility Library

Figure 5.4: Downloading menu 1

Figure 5.5: Downloading menu 2

Figure 5.6: Posting text and getting it back

Figure 5.7: Posting data and getting XML back

Figure 5.8: Getting menu 1

Figure 5.9: Getting menu 2

Figure 5.10: Downloading XML data using libXmlRequest

Figure 5.11: Downloading XML data using AJAXLib

Chapter 6: More Advanced Ajax Frameworks

Figure 6.1: Using the Majax Ajax framework

Figure 6.2: Downloading text with the Majax Ajax framework

Figure 6.3: Downloading text with the Sack Ajax framework

Figure 6.4: Downloading text with the XHConn Ajax framework

Figure 6.5: Downloading text with the uniAjax Ajax framework

Figure 6.6: Downloading text with the AjaxGear Ajax framework

Figure 6.7: Downloading text with the AjaxRequest Ajax framework

Figure 6.8: Downloading text with the Http Ajax framework

Figure 6.9: Downloading XML with the Sarissa framework

Figure 6.10: Downloading XML with the IWF framework

Chapter 7: Using Server-Side Ajax Frameworks

Figure 7.1: Adding two numbers with the Sajax Ajax framework

Figure 7.2: Dragging and dropping with Sajax

Figure 7.3: Using the Xajax framework to add numbers

Figure 7.4: Using the LibAjax framework to add numbers

Figure 7.5: Using DWR

Figure 7.6: Using DWR to download text

Figure 7.7: The DWR chat application

Figure 7.8: Using the DWR chat application

Figure 7.9: Editing a table in the DWR table application

Figure 7.10: Saving a change in the DWR table application

Figure 7.11: The DWR list application

Figure 7.12: Reloading the list box in the DWR list application

Figure 7.13: The Ajax Tag Library cars application

Figure 7.14: Selecting a car make in the Ajax Tag Library application

Figure 7.15: Using the Ajax Tag Library speed converter

Figure 7.16: Converting a speed with the Ajax Tag Library speed converter

Figure 7.17: Callouts created with the Ajax Tag Library

Figure 7.18: A SWATO autocomplete example

Figure 7.19: Matches are displayed.

Figure 7.20: Using SWATO in an Ajax form example

Figure 7.21: Data is displayed.

Figure 7.22: A Ruby on Rails Ajax application

Figure 7.23: Downloading text with a Ruby on Rails Ajax application

Figure 7.24: A Ruby on Rails Ajax application that lets you handle data

Figure 7.25: A data-handling Ruby on Rails Ajax application

Chapter 8: The DOM and Event Handling

Figure 8.1: Using appender.html

Figure 8.2: Using appender.html to download text

Figure 8.3: Using appender.html to append downloaded text

Figure 8.4: Using replacer.html

Figure 8.5: Using replacer.html to download text

Figure 8.6: Using replacer.html to replace existing text with downloaded text

Figure 8.7: An Ajax-enabled shopping cart example

Figure 8.8: Dragging a DVD player

Figure 8.9: Buying a DVD player

Figure 8.10: The Ajax image application

Figure 8.11: Downloading the first image

Figure 8.12: Downloading the second image

Figure 8.13: Handling timeouts

Figure 8.14: The application timed out

Chapter 9: XML and Ajax

Figure 9.1: The documentElement.html application

Figure 9.2: The documentElement.html application at work

Figure 9.3: The event.html application at work

Figure 9.4: Accessing the third guest

Figure 9.5: Accessing the third guest in Firefox

Figure 9.6: An example that accesses the third guest directly

Figure 9.7: Accessing the third guest directly

Figure 9.8: Accessing the third guest’s attendance attribute

Figure 9.9: Validating an XML document

Chapter 10: Cascading Style Sheets and Ajax

Figure 10.1: The Ajax-enabled menu application

Figure 10.2: Displaying an Ajax-enabled menu

Figure 10.3: Selecting a menu item

Figure 10.4: Displaying a menu selection

Figure 10.5: Changing the color of text to get it noticed

Figure 10.6: Scrolling text to get it noticed

Figure 10.7: Styling fonts using CSS

Figure 10.8: Styling text using CSS

Figure 10.9: Styling colors using CSS

Figure 10.10: Setting colors

Figure 10.11: Setting positions of Web page elements

Figure 10.12: Setting the z-order of Web page elements

Chapter 11: Dynamic HTML and Ajax

Figure 11.1: The mouseOver application

Figure 11.2: Enlarging text with dynamic styles

Figure 11.3: The hover application

Figure 11.4: Using the mouse to set a new style

Figure 11.5: The dynamicStyles application

Figure 11.6: Setting a new style sheet

Figure 11.7: The selfModifying application

Figure 11.8: Displaying the larger image

Figure 11.9: Displaying the smaller image

Figure 11.10: The rewrite application

Figure 11.11: Rewriting a Web page on the fly

Figure 11.12: The restaurant.html application

Figure 11.13: The insertAdjacent.html application

Figure 11.14: Inserting a new text field into a page

Figure 11.15: The innerText.html application

Figure 11.16: Replacing text in the innerText.html application

Figure 11.17: The innerHTML.html application

Figure 11.18: The outerHTML.html application

Figure 11.19: Replacing text in the outerHTML.html application

Figure 11.20: The textranges.html application

Figure 11.21: Replacing text in the textranges.html application

Figure 11.22: The createElement.html application

Figure 11.23: Creating new elements in the createElement.html application

Figure 11.24: Creating more new elements in the createElement.html application

Figure 11.25: The dynamicTable.html application

Figure 11.26: Creating a new table row in the dynamicTable.html application

Figure 11.27: Creating another new table row in the dynamicTable.html application

Figure 11.28: Creating animation in the animation.html application

Chapter 12: Introducing Ajax and PHP

Figure 12.1: The phpinfo.php application

Figure 12.2: Echoing text back to the browser

Figure 12.3: Echoing XML back to the browser

Figure 12.4: Using variables

Figure 12.5: Using string functions

Figure 12.6: Using interpolation

Figure 12.7: Using arrays

Figure 12.8: Copying arrays

Figure 12.9: Using PHP operators

Figure 12.10: Using if/else statements

Figure 12.11: Using elseif statements

Figure 12.12: Using switch statements

Figure 12.13: Using the for loop

Figure 12.14: Using the while loop

Figure 12.15: Using the do...while loop

Figure 12.16: Using the foreach loop

Chapter 13: PHP-Functions and HTML Controls

Figure 13.1: The functions.php application

Figure 13.2: The passData.php application

Figure 13.3: The variableArguments.php application

Figure 13.4: The adder.php application

Figure 13.5: The multipleReturns.php application

Figure 13.6: The text.html Web page

Figure 13.7: The text.php application at work

Figure 13.8: The checkboxes.html Web page

Figure 13.9: The checkboxes.php application at work

Figure 13.10: The radios.html Web page

Figure 13.11: The radios.php application at work

Figure 13.12: The lists.htmlWebpage

Figure 13.13: The lists.php application at work

Figure 13.14: The password.html Web page

Figure 13.15: The password.php application at work

Figure 13.16: The map.html Web page

Figure 13.17: The map.php application at work

Figure 13.18: The file.html Web page

Figure 13.19: The file.php application at work

Chapter 14: Handling User Input in PHP

Figure 14.1: The formdata.html page

Figure 14.2: The formdata.php application

Figure 14.3: The browser.html page

Figure 14.4: The browser.php application

Figure 14.5: The formarray.html page

Figure 14.6: The formarray.php application

Figure 14.7: The single.php page asks for your name.

Figure 14.8: The single.php page displays your name.

Figure 14.9: The validation.php page asks for your name.

Figure 14.10: The validation.php page displays an error.

Figure 14.11: The validation.php page displays your name.

Figure 14.12: The validateinteger.php page asks for an integer.

Figure 14.13: The validateinteger.php page displays an error.

Figure 14.14: The validateinteger.php page displays your integer.

Figure 14.15: The validatetext.php page asks for text.

Figure 14.16: The validatetext.php page displays an error.

Figure 14.17: The validatetext.php page displays your text.

Figure 14.18: The handlehtml.php page accepts HTML.

Figure 14.19: The HTML has been stripped out.

Figure 14.20: The HTML has been escaped.

Chapter 15: Ajax and Security

Figure 15.1: The comments.html page

Figure 15.2: Blocking HTML

Figure 15.3: The array.html page

Figure 15.4: An error in the array.html application

Figure 15.5: Handling an error in the array.html application

Figure 15.6: The checker.html page

Figure 15.7: The checker.html application lets you in.

Figure 15.8: The checker.html application says no way.

Figure 15.9: The password.html page

Figure 15.10: The password.html application’s login dialog box

Figure 15.11: Downloading password protected Ajax data

Figure 15.12: Echoing the user’s username

Figure 15.13: Entering the user’s username and password

Figure 15.14: Echoing the user’s username

Figure 15.15: The md5.html page

Figure 15.16: The two MD5 strings agree.

Chapter 16: Filters, MVC, and Ajax

Figure 16.1: The password.html page

Figure 16.2: An incorrect password

Figure 16.3: Using the right password

Figure 16.4: The log.html page

Figure 16.5: The log.jsp page

Figure 16.6: The Time filter at work

Figure 16.7: The MVC application at work