Ajax Introduction - Step By Step ...

Ajax, has nothing to do with the famous soccer team from Amsterdam, Netherlands. Actually Ajax stands for 'Asynchronous Javascript and XML'. Jesse James Garret of Adaptive Path came up with the term in the following essay: Ajax - A New Approoach to Web Applications. However, AJAX doesn't really rely on XML at all, but rather on a Javascript function that happens to be named XMLHttpRequest. Using XMLHTTPRequest, Ajax allows web applications to interact asynchronously with a Web Server. It is not a specific development language neither a specific product of technology. Ajax refers to a set of technologies and techniques that are mostly used concurrently.

What Does AJAX Stand For?

Ajax, has nothing to do with the famous soccer team from Amsterdam, Netherlands. Actually Ajax stands for 'Asynchronous Javascript and XML'. Jesse James Garret of Adaptive Path came up with the term in the following essay: Ajax - A New Approoach to Web Applications. However, AJAX doesn't really rely on XML at all, but rather on a Javascript function that happens to be named XMLHttpRequest.

Using XMLHTTPRequest, Ajax allows web applications to interact asynchronously with a Web Server. It is not a specific development language neither a specific product of technology. Ajax refers to a set of technologies and techniques that are mostly used concurrently.

What Does Ajax Do?

Traditional web applications essentially submit forms, completed by a user, to a web server. The web server does some processing, and responds by sending a new web page back. Because the server must send a whole new page each time, applications run more slowly and awkwardly than their native counterparts. But using Ajax, Web based applications look like desktop applications. They respond fast, almost immediately to user actions. Ajax applications can combine receiving data on demand with pre-fetching in order to achieve the maximum utilization of the available bandwidth.

The earliest form of asynchronous remote scripting, Microsoft's Remote Scripting, was developed before XMLHttpRequest existed, and made use of a dedicated Java applet. Thereafter, remote scripting was extended by Netscape DevEdge at around 2001/2002 by use of an IFRAME instead of a Java applet.

One of the biggest reasons XMLHttpRequest has become popular now is that browsers other than Internet Explorer have started to support it, mainly due to the fuss over its use in Gmail.

How to Start with Ajax?

To get started with Ajax, you should create an XMLHttpRequest object in your Javascript code. That means that you should use this Javascript code:

var http;
onload = function (){
	if (window.ActiveXObject){
		http = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else{
		http = new XMLHttpRequest;
	}
}

Then you should write two more functions: one to get data from a URL, and one to handle the data that comes back.

function getResponce(url){
	http.open("GET", url, true);
	http.send(null);
}

http.onreadystatechange = function (){
	if (http.status == "200"){
		// do what do you want with http.responseText
	}
}

All you need to do then is call getResponce function with a URL you want to get responce from, and put that responce wherever you want it to be in the state change function.

Note: The most powerful thing about this approach is that the URL you send to the server can contain variables through its query string.

Finally, using the code above, you can easily send a request to server_page.php on your server, and include the current value of, for example, a input control for a username on a login form. The server_page.php script checks whether that username is already in use, and then returns either 'true' or 'false' as its only result. All you would then need to do is check whether http.responseText was true or false, and change the page accordingly.

 View Full Story.

1 Comment |Add your comment.

raj said:

Best Article !

Posted at April 23, 2008 11:41:51 am

Your Comment ...

  Name (required)

  Email (required, hidden)

  Website