Introduction to AJAX

What is AJAX?
  • AJAX stands for Asynchronous Javascript And XML
  • AJAX is a technique for creating dynamic, better, faster and more interactive web applications.
  • AJAX is mainly used in web applications where partial load of a page is needed. For ex: Google Map (Where map will be zoomed on scrolling mouse wheel), Google Suggest (Suggestions will be displayed based on what user typed in the search box).
  • AJAX is not a new technology but a technique which uses existing technologies to achieve partial load of a page
  • AJAX uses following technologies for achieving partial page load:
    • Javascript – To make asynchronous request to the server and dynamic content display
    • XHTML – Presenting content on the screen
    • CSS – Web page design
    • XML – Information received from server as a result of AJAX request
    • Plain text or JSON – Another format to receive information
  • Traditional web application exchange information to and from the server using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server.
  • In AJAXified websites, when submit button is pressed, JavaScript will make a request to the server, interpret the results and update the portion of a screen. Thus the user would not even know that anything was transmitted to the server.
  • Intuitive and natural user interaction. No clicking required only Mouse movement is a sufficient event trigger.
  • AJAX just replaces ‘Click, Wait and Refresh’ kinda approach as user will get information without page refresh

How AJAX works?


AJAX works based on Internet Standards

We know already AJAX is not a technique but the combination of:

  • XMLHttpRequest object – To make HttpRequest and exchange data asynchronously with a server
  • JavaScript and DOM (XHTML) – To display/interact with the information
  • CSS – To style the returned content from server on the browser screen
  • XML – Data exchange format for transferring data from/to server
  • Plain text or JSON – Another data exchange format for transferring data from/to server
Simple Demo
Click the button to change the content of this block without refreshing or reloading the page.

Example is explained here.

Author: Udhay

Share This Post On

Pin It on Pinterest