Site Moved

This site has been moved to a new location - Bin-Blog. All new post will appear at the new location.


A Gentle Introduction to Ajax

What is Ajax?

Ajax or Asynchronous JavaScript and XML enables the programmer to execute a server-side script without refreshing the page.


A simple form.

Traditional method

The user enters the comments and email and then clicks the submit button. The browser sends the entered data to the server-side script through the post or get method. When this is done, the browser will call the server-side script(for example a PHP page) by loading that page in the browser. This page will save the data to a database and display a 'Thank You' message in the browser.

The problem with this approch is that the users loses some time waiting for another page to load. The page cannot save the entered data without loading the PHP file.

The flow of data in the Traditional method

Ajax Method

Here when the user clicks the Submit button, a javascript function is called which loads the server-side script in the background. The user does not see it being loaded. Instead the JavaScript will immediatly remove the form from the page and show a 'Thank you' message dynamically - without reloading the page.

The flow of data in the Ajax method


if (user hits the submit button) {
 comment = (user submitted comment)
 email = (user's email id)
 //Happens in Background
 CallPage("save_comment.php?comment=" + comment + "&email=" + email);
 //User sees this...
 Display("Thank you for your comment.")


The given example was for a simple application. In more advaced uses, the result generated by the called server-side script will be taken and used in the page. Some applications that would be impossible without Ajax are...

Examples of use of Ajax


  • Breaks the Back button
  • Works only on the latest browsers
  • Harder to make and maintain
  • Goes against user expectations
  • Assesibility issues

[This the first part of a three part series on Basic Ajax progamming]
UPDATE : Part 2 of tutorial is now available.
UPDATE : The third part of the Tutorial - Ajax Feedback Form is now available.

1 Comment:

Anonymous said...

Nice introductory tutorial.

If you get a second, you should pop over to my site and have a look at my AJAX introduction.

The URL is