This small program demonstrates how you can refresh portions of a web page using AJAX techniques.
This code consists of 4 files:
Here are source code listings for the 4 files:
ajax.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET",url,false);
// Do not send null for ActiveX
xmlhttp.send();
}
document.getElementById('test').innerHTML=xmlhttp.responseText;
}
</script>
<title>MIS 4530 Ajax Sample</title>
</head>
<body>
<div id="test">
<h2>Let AJAX change this text</h2>
</div>
<button type="button" onclick="loadXMLDoc('test1.txt')">Message
1</button>
<button type="button" onclick="loadXMLDoc('test2.txt')">Message
2</button>
<button type="button" onclick="loadXMLDoc('test3.txt')">Original</button>
</body>
</html>
test1.txt
<p>There are several reasons you might want to use
AJAX:</p>
<ul>
<li>Reduce the amount of data flowing from the server to the
client</li>
<li>Speed up the web page</li>
<li>Make the application act more like a local app than a web page</li>
<li>Allow filtering at the client end to prevent corrupted data from
being
sent to the server</li>
</ul>
test2.txt
<p>Most good web developers
have many things in their toolboxes, including JavaScript, php,
mysql, xml, and html. These tools all lead to robust, interactive
web pages and add to the capability of the developer to to design
flexible, artistic, and useful web pages.</p>
test3.txt
<h2>Let AJAX change this text</h2>