Introduction
AJAX can be very confusing due to the mix of technologies involved. I created a set of documented examples to walk through a few aspects of the technology with increasing complexity. There is a reason why javascript libraries became a standard, but before we go there we need to know the basics first.
Example Code
The code below is simplified on several aspects:
- A primitive browser check
The base of Ajax is the XMLHttpRequest (XHR) object. This object is created differently, depending on the browser vendor. We do not bother with exploring all possibilities in the example. Later we will use a library to handle it.
- An Ajax function with statically defined parameters
It makes sense to provide data source and update target through function parameters.
- A text file as the servers data provider
Although Ajax typically calls a server-side program such as PHP, CGI or similar to get the data on demand, here we simply pick up a text file. This will reduce the chance of failures and places to troubleshoot.
- The response data is only a String
The last X in Ajax stands for XML, but here we just operate with strings
The combination of HTML, Javascript and function and remote call parameters will raise the complexity soon enough.
<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(){
if(ajaxRequest) {
// (1) Hardcode the data provider
ajaxRequest.open("GET", "ajaxtest1.txt", true);
// (2) Hardcode the update target
var ajaxTarget = document.getElementById('update');
// (3) create the event handler
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
ajaxTarget.innerHTML = ajaxRequest.responseText;
}
}
// (4) call the send() command to execute
ajaxRequest.send(null);
}
}
//-->
</script>
</head>
<body>
<h1>Ajax Test Example 1</h1>
<p>We are going to replace the string below
with a message received from the server on-demand.</p>
<p id="update">This line exists before making the Ajax call.</p>
<form>
<input type="button" value="Call Ajax" onClick="ajaxCall();" />
</form>
</body>
</html>On the server side, we prepare a file called ajaxtest1.txt in the same directory as our Ajax page:
# cat ajaxtest1.txt This line was saved inside the servers file ajaxtest1.txt.
Live Example Below
Ajax Test Example 1
We are going to replace the string below with a message received from the server on-demand.
This line exists before making the Ajax call
Coming Up Next
In example 2 on the next page, we add function arguments to set the data provider and the update target; and we improve the event handler's error detection.