AJAX is the new hype in HTML/Javascript, since Google came up with their nifty GMAIL application.
AJAX allows to write web-applications without reloading/refreshing the page on user interaction (e.g.
posting data to a server-side script). The traditional
way of processing HTML forms was to submit them to the server, the server processed the data and
sent a response. The drawback of this method is that the page was reloaded in the browser.
This example demonstrates a simple AJAX javascript for requesting XML data from a server
and displaying the response in a HTML-table. The server-side script is a simple PHP script,
which actually just sends some XML data.
Test the whole hack here:
Table filled with data requested from the server:
xml.html:
<script type="text/javascript" language="javascript">
var http_request = false;
function makeRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url + parameters, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var xmldoc = http_request.responseXML;
var root = xmldoc.getElementsByTagName('root').item(0);
for (var iNode = 0; iNode < root.childNodes.length; iNode++) {
var node = root.childNodes.item(iNode);
for (i = 0; i < node.childNodes.length; i++) {
var sibl = node.childNodes.item(i);
var len = parseInt(sibl.childNodes.length / 2);
var arr = new Array(len);
var cnt = 0;
for (x = 0; x < sibl.childNodes.length; x++) {
var sibl2 = sibl.childNodes.item(x);
var sibl3;
if (sibl2.childNodes.length > 0) {
sibl3 = sibl2.childNodes.item(0);
arr[cnt] = sibl3.data;
cnt++;
}
}
addrow("mytable", arr);
}
}
} else {
alert('There was a problem with the request.');
}
}
}
function do_xml() {
makeRequest('xml.php', '?test=2');
}
function addrow(tablename, arr) {
var tbl = document.getElementById(tablename);
var lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
for (r = 0; r < arr.length; r++) {
var cell = row.insertCell(r);
cell.innerHTML = arr[r];
}
}
</script>
<input type="button" name="button" value="GET XML"
onclick="javascript:do_xml();">
<br><br>
Table filled with data requested from the server:<br>
<table border="1" id="mytable">
</table>
