The fetched message will appear here.
<script type="text/javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID) {
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
<style type="text/CSS">
<!--
.code { color: red; }
.back { background-color: yellow; }
-->
</style>
</head>
<body>
<H1>An Ajax example</H1>
<form>
<input type="button" value="Fetch First message" onclick="getData('message1.txt', 'targetDiv')">
<input type="button" value="Fetch Second message" onclick="getData('message2.txt', 'targetDiv')">
<input type="button" value="Fetch Third message" onclick="getData('message3.txt', 'targetDiv')">
</form>