Ajax Tutorial

This page on Ajax tutorial help you to understand the basics of Ajax to more details of  Ajax.Ajax is the acronym for Asynchronous JavaScript and XML. Ajax is used for fetching data from server without refreshing the page. Ajax Jquery is also getting popular and in the site you can learn about  that as well.

Getting started with Ajax

Defining Ajax

Ajax Q&A

Cross Domain Ajax

Ajax – Enhancing user experience

Ajax Libraries and Tools

Direct Web Remoting

Ajax Example

AJAX is an acronym for Asynchronous JavaScript And XML. AJAX is not a new programming language, but simply a new technique for creating better, faster, and more interactive web applications. AJAX uses JavaScript to send and receive data between a web browser and a web server.

The AJAX technique makes web pages more responsive by exchanging data with the web server behind the scenes, instead of reloading an entire web page each time a user makes a change. AJAX is a technology that runs in your browser. It uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.The technology makes Internet applications smaller, faster and more user friendly.

AJAX Is Based On Open Standards

AJAX is based on the following open standards:

  • JavaScript
  • XML
  • HTML
  • CSS

The open standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent. (Cross-Platform, Cross-Browser technology)

AJAX Uses XML And HTTP Requests

A traditional web application will submit input (using an HTML form) to a web server. After the web server has processed the data, it will return a completely new web page to the user.

Because the server returns a new web page each time the user submits input, traditional web applications often run slowly and tend to be less user friendly.

With AJAX, web applications can send and retrieve data without reloading the whole web page. This is done by sending HTTP requests to the server (behind the scenes), and by modifying only parts of the web page using JavaScript when the server returns data.XML is commonly used as the format for receiving server data, although any format, including plain text, can be used. There is nothing new to learn. AJAX is based on open standards. These standards have been used by most developers for several years.

Most existing web applications can be rewritten to use AJAX technology instead of traditional HTML forms.

Page update without refresh using Javascript, PHP and XML’s XMLHTTPRequest object (also known as ‘remote scripting’)

In this tutorial we’ll discuss the basic principles of remote scripting using Ajax, a combination of javascript and XML to allow web pages to be updated with new information from the server, without the user having to wait for a page refresh.  Ajax therefore allows us to build web applications with user interfaces rather more like those of desktop applications, providing a better experience for the user.  Ajax tools are becoming increasingly popular, and a list of ajax development projects is also given.

Here you’ll find:

  • a brief tour of the important principles of Ajax
  • code examples of all important points
  • links to further Ajax and related resources

This tutorial covers subjects which require some degree of familiarity with Javascript and PHP.  Beginners may therefore find it a little hard going, but hopefully should still be able to grasp the principles and uses of Ajax, if not the details.  There are some demos and further links at the bottom of the article and elsewhere on these pages – feel free to explore..

What is it?

The standard and well-known method for user interaction with web-based applications involves the user entering information (e.g. filling out a form), submitting that information to the server, and awaiting a page refresh or redirect to return the response from the server. This is at times frustrating for the user, besides being rather different to the ‘desktop’ style of user interface with which (s)he may be more familiar.

Ajax (Asynchronous Javascript And XML) is a technique (or, more correctly, a combination of techniques) for submitting server requests ‘in the background’ and returning information from the server to the user without the necessity of waiting for a page load.

Ajax is actually a combination of several technologies working together to provide this capability.

How does it work?
Instead of a user request being made of the server via, for example, a normal HTTP POST or GET request, such as would be made by submitting a form or clicking a hyperlink, an Ajax script makes a request of a server by using the Javascript XMLHTTPRequest object.

Although this object may be unfamiliar to many, in fact it behaves like a fairly ordinary javascript object.  As you may well know, when using a javascript image object we may dynamically change the URL of the image source without using a page refresh. XMLHTTPRequest retrieves information from the server in a similarly invisible manner.

How is it coded?
There are a few, relatively simple, steps to coding an Ajax application.  The description below is an attempt to describe the salient points without bogging down the new user in too many of the technicalities.

Firstly, we need to know how to create an XMLHTTPRequest object.  The process differs slightly depending on whether you are using Internet Explorer (5+) with ActiveX enabled, or a standards-compliant browser such as Mozilla Firefox.

With IE, the request looks like:

http = new ActiveXObject("Microsoft.XMLHTTP");

whereas in a standards-compliant browser we can instantiate the object directly:

http = new XMLHttpRequest();

There’s an example of a short piece of code to create the object here , which clearly demonstrates the different approaches for the two different browser types, along with a browser detection routine.

Secondly, we need to write an event handler which will be called via some event on our user’s page, and will handle sending our request for data to our server.

The event handler will use various methods of our XMLHTTPRequest object to:

  • make the request of the server
  • check when the server says that it has completed the request, and
  • deal with the information returned by the server

We can make our request of the server by using a GET method to an appropriate server-side script.  Here’s an example event handler called updateData which assumes that we have created our XMLHTTPRequest object and called it http:

function updateData(param) {
var myurl = [here I insert the URL to my server script];
http.open("GET", myurl + "?id=" + escape(param), true);
http.onreadystatechange = useHttpResponse;

Note that the function listens to the onreadystatechange property of the XMLHTTPRequest object and, each time this parameter changes, calls a further function useHttpResponse.

You will note also that, for the sake of clarity, I have said little about the server-side script which is called – essentially this can be any server routine which will generate the required output when called with the relevant URL and appended parameters, as in any other HTTP GET request.  For the sake of the example we are passing a variable named id with a value param passed as an argument to the updateData function.

Thirdly, then, we need to write a function useHttpResponse which will establish when the server has completed our request, and do something useful with the data it has returned:

function useHttpResponse() {
 if (http.readyState == 4) {
 var textout = http.responseText;

Note here that our function checks for a readyState value of 4 – there are various numbered states describing the progress of such a request, but we are only interested in the value of 4, which indicates that the request is complete and we can use the returned data.

In this case, we have received our information as simple text via the responseText property of our XMLHTTPRequest object.  Information can, however, be returned as XML or as properties of a pre defined javascript object, though this is perhaps beyond the scope of this tutorial.


I hope that reading this article on Ajax tutorial, you might have got a good understanding of Ajax examples and  Ajax tutorial.

Java J2EE Tutorials,J2EE Interview Questions, JSF Tutorials, Struts Tutorials, Hibernate Tutorials, JSP Tutorials, EJB Tutorials, JMS Tutorials, SOA Tutorials, Java Tutorials, J2EE Study Materials, J2EE PDF Guides, Ajax Tutorials