Tag Archives: Ajax

AJAX Example 4- Asynchronous Communication with XML using AJAX

//Program demonstrating asynchronous communication with an XML File using AJAX

Ajax4XML.html


<html>
<head>
<title>Ajax4 XML Example</title>
<script type="text/javascript">

var xmlhttp;

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

function loadXMLDoc()
{
	var txt,first,i;

	if(xmlhttp){
	xmlhttp.open("GET","employee_data.xml",true);
	xmlhttp.onreadystatechange=function() {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
		var xmlDoc=xmlhttp.responseXML;
		txt="";
		first=xmlDoc.getElementsByTagName("first");
		for (i=0;i<first.length;i++) {
		  txt=txt + first[i].childNodes[0].nodeValue + "<br />";
		 }
		document.getElementById("myDiv").innerHTML=txt;
		}
	  }

	  xmlhttp.send(null);
	}
}//function end
</script>
</head>

<body>

<h2>Employee Data</h2>
<div id="myDiv"></div>
<br />
<button type="button" onclick="loadXMLDoc()">Get Employee Names</button>

</body>
</html>

employee_data.xml

<?xml version="1.0" encoding="UTF-8"?>

<employees>
	<employee position="manager">
		<name>
			<first>Meenakshi</first>
			<last>Das</last>
		</name>
		<age>31</age>
	</employee>
	<employee position="developer">
		<name>
			<first>Dia</first>
			<last>Agarwal</last>
		</name>
		<age>25</age>
	</employee>
	<employee position="developer">
		<name>
			<first>Natalie</first>
			<last>Abraham</last>
		</name>
		<age>23</age>
	</employee>
	<employee position="engineer">
		<name>
			<first>Kim</first>
			<last>Gentile</last>
		</name>
		<age>22</age>
	</employee>
	<employee position="accountant">
		<name>
			<first>Ankita</first>
			<last>Adhikary</last>
		</name>
		<age>25</age>
	</employee>
	<employee position="developer">
		<name>
			<first>Priya</first>
			<last>Kapoor</last>
		</name>
		<age>32</age>
	</employee>
</employees>

Snapshot of the o/p

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.

AJAX Example 2- Synchronous Communication using AJAX

//Program demonstrating Synchronous Communication using AJAX

Ajax2.html


<html>
<head>
<title>Ajax2</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",false);
			xmlhttp.send();
			document.getElementById("Div1").innerHTML=xmlhttp.responseText;
		 }

		}
</script>
</head>

<body>

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

</div>

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

</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.

When the button is clicked then the request is sent synchronously to the server and the contents of ajax_info.txt are sent to the client.

Screenshot of the o/p

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.