Introduction
Ajax or Asynchronous JavaScript and XML was introduced by Jesse James Garrett in 2005. He is called the “Father of Ajax” .Ajax is a collection of concepts and technologies that allows richer and more interactive user interaction with the web applications. The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something.
Who is using AJAX
The most popular and the biggest user of AJAX is Google. Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps — are Ajax applications Google mail, Google calendar and Google home page are some examples.
In your Google mailbox the “loading” that is displayed in the top right corner is using these Ajax technologies.
The new Yahoo homepage too uses some of these technologies.
Another cool Ajax implemented website would be www.pageflakes.com
Others are following suit: many of the features that people love in Flickr depend on Ajax, and Amazon’s A9.com search engine applies similar techniques.
The BackScreen of Ajax
In traditional webpages, the pages will be reloaded for each and every request. But in most of the cases only a part of the page will be processed. Hence such a page reload is unnecessary. Thus the usage of ajax plays a efficient role. In the webpages, that are using ajax, only the part of the page that has to be processed will be transferred to the web server and the processed data will be loaded in the page without a page reload.
AJAX internals
AJAX is not a single technology as mentioned earlier. It is important to remember that AJAX is not Java or .NET dependent.
Whatever be your back end code, you can use AJAX to communicate with it. People prefer AJAX for the high speed with which it works. It does it with three basic ways
- Better utilization of browser cache
- Batching up of network requests in a single packet to reduce network latency issues
- Decreasing the workload on the server by not requiring it to process the entire page
Where can we use AJAX
- Forms:
- Web based forms are slow. AJAX can definitely improve the performance of web-based forms
- User Communication:
- User communications like chat pages, voting’s and ratings can be done efficiently using AJAX
- News:
- RSS feed is another popular concept where AJAX can be used
- Data Manipulation:
- This includes some sort of filtering data, selecting names from one combo box to another, sorting data, invoking the suggest criteria or a hint
Defining Ajax
As we have seen an introduction to AJAX, let us try to define it. Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:
- Standards-based presentation using XHTML and CSS;
- Dynamic display and interaction using the Document Object Model;
- Data interchange and manipulation using XML and XSLT;
- Asynchronous data retrieval using XMLHttpRequest;
And JavaScript binding everything together.
So, how does AJAX does this sending request and getting response from the backend server??
Using the XML Http Request object.
XML Http Request object
The XML HttpRequest was introduced by Microsoft in Internet Explorer 5.0. Recently , Mozilla and apple have included support for this in their web browsers(Firefox and Safari).This object is the fundamental basis for Ajax. Microsoft implementation is different from that of other web browsers, so when you create this object in your code, you need to do a typical browser check.
For Internet Explorer, we can create this object using,
Var req = new ActiveXObject(“Microsoft.XMLHTTP”);
For firefox and safari,
Var req = new XMLHttpRequest(); |
