Ajax, which stands for Asynchronous JavaScript and XML, is a way to make Web pages highly interactive. In its basic form, Ajax uses JavaScript and a DOM extension called XMLHttpRequest to update just parts of a Web page with server data. One common use is to suggest content that will complete a user's text input.

To prepare for this Application:

For this Application, create an alternative version of your "catalog" ordering page. Replace the table that lists all of the available items with a text box where the user can type in an item's name. Use Ajax to display complete item names as the user types.

First, create a copy of your catalog page. Replace the table with a text box that will accept an item name. Include an attribute that will call a handler function like this (assuming that you named the handler function handleInput):

onkeyup=handleInput(this.value)

This will pass the content of the text box to the handler function every time the user finishes typing a character. Also add an empty paragraph that you will fill in with the item description. Include an id="description" attribute so that your JavaScript can locate the paragraph. Keep the rest of the page content unchanged.

Next, create the handler function. Unless the parameter contains an empty string, create an XMLHttpRequest object named xhr, Include cross-browser support in your code. Include code to register and specify a receiver function. For now, simply store the xhr.responsetext in the innerHTML attribute of the description paragraph.

Decide a name for your PHP response document and add open and send calls. Remember to include the item string as a parameter in the URL. Create the response document so that it recognizes item names and returns their descriptions.

Notice that the code shows a description only when the user completes the item name. Use this fact to give the order button a visibility style of hidden unless the user has entered a valid product name. Modify your validation code correspondingly. Explain how you could modify the response document so that it will match partial item names.

Ensure that your websites comply with the accessibility and usability standards discussed in this weeks resources. Submit your pages to the W3C validator (http://validator.w3.org/) and correct all errors. (Note: You may ignore an error concerning placement of the script element.) Include screenshots of the results in your submission. Also include the full XHTML code for each page, and screenshots of the pages as your Web browser displays them. Summarize the steps you followed to create and perfect the Web site. Outline the difficulties you encountered and how you resolved them.