List of Figures | 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