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?

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
  • http://programmerguru.com/ Android Guru

    Thank you.

Pin It on Pinterest

Shares