AJAX

This is a short introduction to get you start and experience with Ajax. For more information, please refer to Sebesta book.

Overview	What is Ajax (Asynchronous Javascript and XML)? Technique for creating more interactive web applications using XML, HTML, CSS, and JS Unlike the request/response cycle where all communication is synchronous (i.e., the client has to wait for the server to response), Ajax uses JS to allow asynchronous interaction between the client and the server Users do not need to click "submit" Often used to respond to events in the UI Two important characteristics Client requests handled asynchronously Client modifies only small parts of the current document Goal To improve usability by allowing web apps to respond in ways that look more like desktop apps Example application Help users fill in a form Zip code, city, state ... when a zip code is entered, the client asks the esrver for the probable city and state popcorn.html JS used to put the response into the form Google Maps or Yahoo Maps
Ajax technology	Technologies used in Ajax XML and XHTML for content CSS for presentation DOM to represent and manipulate the structure of XML and HTML documents JS for dynamic content display In the form, JS source files must be referenced in <head> In the form, an event handler must be registered on the blur event (`onblur`) in the desired form element In JS, a response handler must be registered in `onreadystaetchange` property of XMLHttpRequest object XMLHttpRequest (JS object) to perform asynchronous interaction with the server
Ajax browser support	Here are some of the major browsers that support Ajax. Refer to http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp For more information. All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object. Syntax for creating an XMLHttpRequest object is variable = new XMLHttpRequest(); Old versions of IE (IE5 and IE6) use an ActiveX Object. Syntax for creating an XMLHttpRequest object is variable = new ActiveXObject("Microsoft.XMLHTTP"); If none of the above syntax works, it is most likely that a very outdated browser is used.
How does Ajax work?	Request phase JS (example from popcornA.js) Response component on the server (example from getCityState.php) Receiver phase JS (example from popcornA.js)
Ajax return document options	HTML XML Javascript Object Notation