Learn AJAX

Asynchronous JavaScript And XML: A to Z blog…

Posts Tagged ‘Introduction’

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 »

Need of AJAX…

Posted by Lasantha Samarakoon on August 19, 2009

Remind a situation where you used Google to search something. You visited Google, entered the keyword, and file clicked “Search”, the page went blank and loaded the new page with your search results. So in this situation, when you click “Search”, the browser navigated from one page to another. So the total page reloaded. If the second page contains only few kbytes, and the content in the previous page will no longer required, then this won’t be a big problem. But if you have a slow internet connection, and you are viewing a photo gallery in Facebook or something, and you clicked on a thumbnail to enlarge it, the page vanished and finally you are end up with only the larger one, think what kind of impression will be remained in your mind :). So it’s worthwhile if you can reload only the part in the web page which contains the large photo. To help you in this kind of situation, the technology called AJAX come to the stage.

These requirements can also archive by using Flash or Java Applet. But to view Flash .SWF file you want Flash player installed in your computer and to run Java Applet you need JRE in your machine. But to use AJAX, you want only JavaScript enabled browser and most of today browsers have JavaScript.

Remind that, if you have a desire of coding, and you want your visitors to have better user experience with your website, then AJAX should be there on your web site.

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