Introduction
AJAX can be very confusing due to the mix of technologies involved. I created a set of documented examples, for the previous example 1 see the page before.
Example Code
In updating our example, we add function arguments to set the data provider and the update target; and we improve the event handler's error detection.
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
// First create an Ajax request, depending on the browser.
// This is a simple and incomplete demo example, later we
// use jQuery to take care of cross-browser compatibility.
var ajaxRequest = null;
// For Opera 8.0+, Firefox or Safari
if (window.XMLHttpRequest) {
ajaxRequest = new XMLHttpRequest();
}
// For older Internet Explorer Browsers
else if (window.ActiveXObject) {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
// Raise alert for problems
else {
alert("Error in page: could not create AJAX request.");
}
// The Ajax function is going to:
// (1) define the data provider (URL),
// (2) define the update target,
// (3) the event handler for moving data from provider to target,
// (4) call the send() command
function ajaxCall(url, Id){
if(ajaxRequest) {
// (1) Hardcode the data provider
ajaxRequest.open("GET", url, true);
// (2) Hardcode the update target
var ajaxTarget = document.getElementById(Id);
// (3) create the event handler
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4) {
if(ajaxRequest.status == 200) {
ajaxTarget.innerHTML = ajaxRequest.responseText;
}
else {
ajaxTarget.innerHTML = "Error: "+ajaxRequest.status
+" = "+ajaxRequest.statusText;
}
}
}
// (4) call the send() command to execute
ajaxRequest.send(null);
}
}
//-->
</script>
</head>
<body>
<h1>Ajax Test Example 2</h1>
<p>We are going to add our Ajax-retrieved data to the table below, data content
and destination fields are depending on the Ajax call parameters. The URL for Msg 3
has no object on the server, validating the error handling of our Ajax call function.</p>
<form>
<table border="1">
<tr>
<th>Ajax Call</th><th>Field A</th><th>Ajax Call</th><th>Field B</th>
</tr><tr>
<td><input type="button" value="Msg 1 -> Field A" onClick="ajaxCall('ajaxtest1.txt', 'field-a');" /></td>
<td rowspan="3" id="field-a" width="200px"> </td>
<td><input type="button" value="Msg 1 -> Field B" onClick="ajaxCall('ajaxtest1.txt', 'field-b');" /></td>
<td rowspan="3" id="field-b" width="200px"> </td>
</tr><tr>
<td><input type="button" value="Msg 2 -> Field A" onClick="ajaxCall('ajaxtest2.txt', 'field-a');" /></td>
<td><input type="button" value="Msg 2 -> Field B" onClick="ajaxCall('ajaxtest2.txt', 'field-b');" /></td>
</tr><tr>
<td><input type="button" value="Msg 3 -> Field A" onClick="ajaxCall('ajaxtest3.txt', 'field-a');" /></td>
<td><input type="button" value="Msg 3 -> Field B" onClick="ajaxCall('ajaxtest3.txt', 'field-b');" /></td>
</tr>
</table>
</form>
</body>
</html>On the server side, we prepare a file called ajaxtest1.txt and ajaxtest2.txt in the same directory as our Ajax page. The referenced file ajaxtest3.txt is missing on purpose to demonstrate our error handling.
# cat ajaxtest1.txt This line was saved inside the servers file ajaxtest1.txt. # cat ajaxtest2.txt This line comes from the servers file <font color="red">ajaxtest2.txt</font>, and has <b>HTML</b> tags in it.
Live Example Below
Ajax Test Example 2
We are going to add our Ajax-retrieved data to the table below, data content and destination fields are depending on the Ajax call parameters. The URL for Msg 3 has no object on the server, validating the error handling of our Ajax call function.
Coming Up Next
In example 3 on the next page, we add arguments to the Ajax request itself. They need to be processed on the server side to create different response as a result of a users choice. We will replace our text file with a CGI program.