So you’re interested in AJAX? AJAX is a powerful addition to JavaScript for browser-to-server intercommunication. We will demonstrate a simple script that sends a GET or POST request to a form handling script on a server, then the server script will return a response to the browser XMLHttpRequest JavaScript object.
A brief technical explanation of AJAX
AJAX is a client/server system. It is a standard that is compatible with all versions of IE browsers, Mozilla/Firefox browsers, the Opera browser and some others. Any browsers that were released in the last few years will work. It uses a JavaScript object commonly referred to as the XMLHttpRequest object within the client-browser HTML page, though there are some variations of this object in MS Internet Explorer browsers. We will demonstrate a simple script that is compatible with all browsers. You use this XMLHttpRequest object to simply send a GET or POST request to a Form handling script on a server, then the server script returns a response to the browser XMLHttpRequest JavaScript object. This text response can be plain text, HTML text with all tags and images or an XML-structured document.
In Part 2 we will cover XML document usage, but here we will cover plain text and full HTML text and images dynamically downloaded using the XMLHttpRequest object. Because the server only needs a script which can handle standard form requests, those being GET or POST, you can thus use Microsoft IIS server, Apache server with PHP or Perl, and Tomcat or any Java-based server. Our examples are of course PHP-based, and have been tested on a Linux Apache/PHP-based server with various browsers.
AJAX Example client #1
To get started, we will provide you with the full text listing of our client JavaScript/DHTML page, and we will be assuming you know something about JavaScript and HTML. This HTML page will make a GET request to a PHP server script named “getajax.php”. That server script will then return a response in HTML which includes image links so the client browser can then use JavaScript to update certain elements of the page, dynamically showing the formatted HTML and images, and no refreshing of the client page will occur–that is the beauty of AJAX.
In the following HTML example, note the important factors of AJAX:
- The function getXHTTP() creates an XMLHttpRequest object for any browser, and returns that object.
- The var http = getXHTTP(); statement puts the XMLHttpRequest object into the http variable.
- The function doHttpRequest() uses the http variable with the http.open method and the http.send method to do the data request to the PHP server script located at http://www.jdcampbell.com/ajax/getajax.php.
- Also, the function doHttpRequest() contains the statement http.onreadystatechange = getHttpRes; which specifies the getHttpRes function as the handler function for the requested data, and this handler function is automatically called when the data is received from the PHP server script.
Here is the full HTML listing including all required JavaScript functions:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Advanced AJAX Part 1</title>
<script language="javascript" type="text/javascript">
function doHttpRequest() { // This function does the AJAX request
var c = document.getElementById("code").value;
http.open("GET", "http://www.jdcampbell.com/ajax/getajax.php", true);
http.onreadystatechange = getHttpRes;
http.send(null);
}
function getHttpRes() {
if (http.readyState == 4) {
res = http.responseText; // These following lines get the response and update the page
document.getElementById('txt1').value = res;
document.getElementById('div1').innerHTML = res;
document.getElementById('cell1').innerHTML = res;
}
}
function getXHTTP() {
var xhttp;
try { // The following "try" blocks get the XMLHTTP object for various browsers
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
// This block handles Mozilla/Firefox browsers...
try {
xhttp = new XMLHttpRequest();
} catch (e3) {
xhttp = false;
}
}
}
return xhttp; // Return the XMLHTTP object
}
var http = getXHTTP(); // This executes when the page first loads.
</script>
</head>
<body>
<form action="post">
Enter code: <input type="text" size="5" name="code" id="code" onblur="doHttpRequest();" /> <input type="button" value="Press" name="btn">
<br><br><br>
Return data...
<textarea id="txt1" name="txt1" rows="5" cols="60" style="width: 100%">empty</textarea>
</form>
<div id="div1">Some text.</div>
<br>
<table width=100% border=1 cellspacing=0>
<tr><td id="cell1">cell1</td><td>cell2</td><tr>
</table>
</body>
</html>
The above code references a PHP server script at http://www.jdcampbell.com/ajax/getajax.php
(the getajax.php script is live on the web). So you could actually copy the above client #1 script to your computer, run it, and it will work and do an AJAX dynamic download and update of your browser page. However, if you have access to any PHP-based Web server you can put the getajax.php script on your server and edit it to return any DHTML data you wish to be dynamically displayed in your AJAX client browser page. The HTML/text returned by the server script should not include the
(the getajax.php script is live on the web). So you could actually copy the above client #1 script to your computer, run it, and it will work and do an AJAX dynamic download and update of your browser page. However, if you have access to any PHP-based Web server you can put the getajax.php script on your server and edit it to return any DHTML data you wish to be dynamically displayed in your AJAX client browser page. The HTML/text returned by the server script should not include the
and and tags.
AJAX client #1 described
When this page first loads the script, line var http = getXHTTP() is executed. This creates a newly created XMLHttpRequest object for use by this AJAX client in the various JavaScript functions. Then it makes a call to doHttpRequest() when the user changes focus (that is the onblur event) from the Input text box named “code”; this onblur event of the “code” textbox is what initiates the AJAX request process by calling the doHttpRequest() function. At this point, the client HTML page has no changes. When the XMLHttpRequest object receives a response from the server PHP script, the function getHttpRes() is automatically called, which updates the specific client HTML page elements with the data returned by the PHP server script. These are the lines which update the HTML client page elements:
document.getElementById('txt1').value = res;
document.getElementById('div1').innerHTML = res;
document.getElementById('cell1').innerHTML = res;
