AJAX Example 3- Asynchronous Communication using AJAX

//Program demonstrating Asynchronous Communication using AJAX

Ajax3.html


<html>
<head>
<title>Ajax 3</title>

<script type="text/javascript">

		var xmlhttp=false;

		if(window.XMLHttpRequest)
		{
			xmlhttp=new XMLHttpRequest();
		}
		else if(window.ActiveXObject)
		{
			xmlhttp=new ActiveXObject("Microsoft.XMLHttp");
		}

		function loadData(){

			 if(xmlhttp){
				xmlhttp.open("GET","ajax_info.txt",true);
				xmlhttp.onreadystatechange=function(){
				if (xmlhttp.readyState==4 && xmlhttp.status==200)
				{
					document.getElementById("Div1").innerHTML=xmlhttp.responseText;
				}
			  }
			xmlhttp.send();
		}//if

	  }//function end
</script>
</head>

<body>

<button type="button" onclick="loadData()">Change Content</button>

<div id="Div1">
<h2>Welcome to the world of AJAX</h2>
</div>

</body>

</html>

ajax_info.txt

AJAX= Asynchronous JavaScript and XML Allows for asynchronous communication between a browser (client) and server.
Does not mandate that the end user must wait for processing a request.
Can be used as an alternative to HTML forms in certain situations.

An asynchronous request is sent to the server and the contents of ajax_info.txt are sent to the client.

Screenshot of the o/p

This slideshow requires JavaScript.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s