Ch. 17: A Touch of AJAX

• the Asynchronous JavaScript and XML: use AJAX to retrieve data

Introduction to AJAX

- Without AJAX, a web application might make the visitor wait while a response is gathered from the web server.

- An AJAX-based application sends requests from the web browser to the web server in the background (asynchronously).

- This chapter explores how you can send requests and receive responses using a fundamental AJAX object: XMLHttpRequest.

• the XMLHttpRequest object

- Since the release of Windows IE 7, you use the XMLHTTPRequest object in the same way across all major browsers.

.show()/.hide() function: show and hide elements of a page

⇒ These functions set the Cascading Style Sheets (CSS) display property.

⇒ To hide an element, you set the display property to none.

Example)

Chaper23\llisting23-1.html

//<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"> </script>

// Now click the (x). The element disappears from the page

// setting display to none does not remove the element from the DOM, so you can still show the element using the .show() function

⇒ poorly optimized because it requires adding handling for each element individually.

⇒ A better solution is to handle the options by using their functions.

Example)

Chaper23\llisting23-2.html

⇒ Example 23-2 shows a better way to accomplish the same functionality by using jQuery and without the hardcoded options.

⇒ If you’re using a browser with a debugger, such as Firefox with Firebug, you can right-click one of the other options and choose Inspect Element to see that the display property has been set to none on the hidden element

- .toggle() (on/off) function: shows or hides an element based on its current state.