AJAX

Upsorn Praphamontripong, Fall 2014 (based in part on class materials by Jeff Offutt)

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
  • JS used to put the response into the form

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?


general view of Ajax


Request phase

JS (example from popcornA.js)
request phase


Response component on the server (example from getCityState.php)
request phase (server side)

Receiver phase

JS (example from popcornA.js)
receiver phase

Ajax return document options

  • HTML
  • XML
  • Javascript Object Notation