AJAX - Technologies

AJAX - Technologies

  • HTML(Hyper Text Markup Language) (or XHTML) and CSS(Cascading Style Sheets) for presentation.
  • The Document Object Model (DOM) for dynamic display of and interaction with data.
  • JSON(JavaScript Object Notation) or XML for the interchange of data, and XSLT(Extensible Stylesheet Language Transformations) for its manipulation.
  • The XMLHttpRequest object for asynchronous communication.
  • JavaScript to bring these technologies together.

Core Ajax concepts

  • JavaScript's XMLHttpRequest object helps to access files from a web server.
  • Supported by all current day browsers such as IE5+, Safari, Firefox, Opera and Chrome.
  • Performs tasks asynchronously in the background.
  • contents of fetched file can be put into current web page using DOM.
  • result : user's web page updates dynamically without a page reload.

Fig2. Web Page Requests

Fig2. Http Request Response Cycle

Http Request Response Cycle

  1. User clicks a button or a hyperlink that invokes an event handler.
  2. Event handler's js code creates an XMLHttpRequest object.
  3. XMLHttpRequest object requests for data from a web server.
  4. Server returns the required data back to XMLHttpRequest object.
  5. XMLHttpRequest triggers an event to inform about the received data, usually termed as a callback.
  6. The callback process the data and delivers it for display.

Fig3. Page Life Cycle