AJAX Tutorial: In this post, We try to use Ajax in our simple application. First time, We will build simple ajax library. Then, we write page to load the ajax library. This is very basic application. You can still extend it for more complex web.
Ok, for this practice, we need 3 file (I create within www/test/ajax directory):
- ajax.js -> as ajax library
- test.php -> as main page
- home.html -> will be loaded as content
First, write below line codes within ajax.js
function callAJAX(url, pageElement, callMessage) {
document.getElementById(pageElement).innerHTML = callMessage;
try {
req = new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
/* some versions IE */
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
/* some versions IE */
} catch (E) {
req = false;
}
}
}
req.onreadystatechange = function() {responseAJAX(pageElement);};
req.open("GET",url,true);
req.send(null);
}
function responseAJAX(pageElement) {
var output = '';
if(req.readyState == 4) {
if(req.status == 200) {
output = req.responseText;
document.getElementById(pageElement).innerHTML = output;
}
}
}
then, we create test.php, enter following codes:
<html>
<head>
<SCRIPT language="JavaScript" SRC="ajax.js"></SCRIPT>
</head>
<body onload="callAJAX('home.html','displaydiv')">
<table>
<tr>
<td id="displaydiv"></td>
</tr>
</table>
</body>
</html>
last, we create home.html, enter following line code:
front page test
Now, point your browser to http://localhost/test/ajax/test.php, you will get like this:
Next posting, we will discuss how to create load pages from links.
