Learn AJAX

Asynchronous JavaScript And XML: A to Z blog…

Posts Tagged ‘Examples’

Introduction to AJAX…

Posted by Lasantha Samarakoon on August 19, 2009

AJAX is stands for Asynchronous JavaScript And XML. It’s not a language such as Javascript, VBScript or anything, but it’s a collection of techniques that the developpers used for a long time.

AJAX can be used to update a web page continuesly or to update only a part of the web page. But, how this can happen? So to get an idea about this, you should consider about how the traditional model works.

So how the browser going to fetch data from the server? To understand this, let’s get an example of visiting Google.com. So when you want to visit google.com, you just enter google’s URL in your browsers address bar. When you hit “Enter”, the browser generate an request which is called as “HTTP Request“, and send that to the web server. When the server get this request, extract it, analyse it, and finally send back the required web page to the client’s browser. So this is happen everytime when you click a link or type a URL in the address bar.

Traditional Model

Traditional Model

In the AJAX model, it is little bit different from the traditional model. Let’s understand this by an example. Imagine that you are viewing a photo gallery in some website. Thumbnails of all the photos are there on the page. When you click on one of the thumbnails, you can view the full-size image of that. If you are using the traditional model, the image will be loaded in a new page. But if you are using the AJAX model, you can see that image on the same page at some location without refreshing or navigating away from that page.

AJAX Model

AJAX Model

So this is the basic idea of AJAX. AJAX has been so popular these days, and many websites use this for increase their user experience. Here are the some real world examples of AJAX.

  1. GMail

    • If you are familiar with GMail, you can remember that, when you select a mail and click “Delete”, your mail will be deleted without refreshing the whole page. It’s AJAX.
  2. Facebook

    • Facebook is one of main sites which use AJAX. In Facebook, you can update your status, delete a post from the wall, or send message without reloading the page. And when you enter someone’s name in your search box, you can see drop down list of similar names. That is also AJAX. The most interesting thing is, did you ever noticed that your news feed refreshes every 60 seconds? This shows the power of AJAX.
  3. Google Maps

    • Google maps also uses AJAX for refreshing their maps when you navigate through or when you zoom them.

Oh… I forgot to tell you about another thing. Do you know what is meant by “Asynchronous“? OK, again an example. Your honey is gonna prepare something for the dinner. So she’s working hard and she does everything without bothering you. That is Synchronous. But one day, she asked you to cut potatoes while she’s doing other stuff. When you finished cutting, you alert her that you have finished cutting. That is Asynchronous.

In the Synchronous method, there is only one stream, that only the main-stream available (like herself). In asynchronous model, along with the main-steam, there are several sub-streams available (like your help to her). So in AJAX, it is asynchronous. i.e. data transfers happen, without disturbing your view.

So now the time to get ready for long run with AJAX…

Posted in Uncategorized | Tagged: , , , , , | Leave a Comment »