Ajax is a term describing the situation where scripts running inside a browser fetch data from a server and update the current page, asynchronously, without a full page refresh.
The technology has been around a long time, but only got named in 2005. It stands for Asynchronous JavaScript And XML.
Let's make a page in which we fetch a text file from a server in response to clicking on a link and display that text inside the page, without a refresh.
<html>
<head>
<title>A First Ajax Example</title>
<script>
function createXMLHttpRequest() {
try {return new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {}
try {return new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {}
try {return new XMLHttpRequest();} catch(e) {}
alert("XMLHttpRequest not supported");
return null;
}
function fetch(url, id) {
var xmlhttp = createXMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(id).innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open('GET', url);
xmlhttp.send(null);
}
</script>
</head>
<body>
<p>Click <a href="javascript:fetch('configuration.txt', 'x')">here</a>
to contact the server and load content without refreshing the page.</p>
<pre id="x" style="border:1px solid black;"></pre>
<p>The End.</p>
</body>
</html>
This time let's connect the client to a real web server generating dynamic content, and let's generate XML and parse it (trivially!) in JavaScript.
TODO