The AJAX application above contains one div section and one button.
The div section will be used to display information returned from a server. The button calls a function named loadXMLDoc(), if it is clicked:
<html>
<body>
<div id=”myDiv”><h2>Let AJAX change this text</h2></div>
<button type=”button” onclick=”loadXMLDoc()”>Change Content</button>
</body>
</html>
Next, add a <script> tag to the page’s head section. The script section contains the loadXMLDoc() function:
<head>
<script type=”text/javascript”>
function loadXMLDoc()
{
…. AJAX script goes here …
}
</script>
</head>
<html><head><script type=”text/javascript”>function loadXMLDoc(){if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); }xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText; } }xmlhttp.open(“GET”,”ajax_info.txt”,true);xmlhttp.send();}</script></head><body>
<div id=”myDiv”><h2>Let AJAX change this text</h2></div><button type=”button” onclick=”loadXMLDoc()”>Change Content</button>
</body></html>
