AJAX Example 1- Creating XMLHttp Request Object

//AJAX Program demonstrating how to create an XMLHttpRequest object

Ajax1.html


<html>
<head>
<title>Ajax Example 1</title>

<script type="text/javascript">

		var xmlhttp=false;

		if(window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else if(window.ActiveXObject)
		{// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHttp");
		}
		//Now you can start writing HTML as usual, after checking for the presence of the XMLHttpRequest object

		if(xmlhttp)
		{
			document.write("<h1>Hello World from AJAX</h1>");
		}

</script>

</head>

<body>

</body>

</html>

You can double click the the above program to run it just like any other HTML file.

Snapshot of the o/p

Ajax1

AJAX Key Points

AJAX stands for Asynchronous JavaScript And XML.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes.

The keystone of AJAX is the XMLHttpRequest object.

All modern browsers(IE7+, Firefox, Chrome, Safari, and Opera)  support the XMLHttpRequest object (IE5 and IE6 uses an ActiveXObject).

The XMLHttpRequest object is used to exchange data with a server behind the scenes.

 

 Applications without AJAX

Normal Web applications communicate with the server by referring to a new URL

Example: When a form is submitted, it is processed by a server-side program, which gets invoked

AJAX applications

Use an object called as XMLHttpRequest object built into the browser, using JavaScript to communicate with the server

HTML form is not needed to communicate with the server.