Basically, AJAX lets us get the content from an external page without reloading! It's especially useful when you need to get information from a serverside script (e.g. A php page that gets information from a database), and you don't want the page reloading all the time.
So how do you use AJAX? Let's make an example.
Make a new html document. Let's call it ajaxexample.htm.
Make it look something like this:
CODE
<html>
<head>
<title>AJAX Example</title>
</head>
<body>
<a href="#" onClick="doAjax();">Click here!</a><br><br>
<span id="ajaxspan"></span>
</body>
</html>
<head>
<title>AJAX Example</title>
</head>
<body>
<a href="#" onClick="doAjax();">Click here!</a><br><br>
<span id="ajaxspan"></span>
</body>
</html>
Note this line:
<a href="#" onClick="doAjax();">Click here!</a>
We make the href parameter "#", because just plain "" would cause the page to reload when we clicked the link, and not putting the href parameter at all would mean the link wouldn't be coloured/underlined. This doesn't matter all that much, but it makes a nicer effect that just clicking on text.
This line:
<span id="ajaxspan"></span>
Will be used when we actually make the script, which we're doing now!
Place this in the head tags of your page:
CODE
<script language="JavaScript" type="Text/JavaScript">
function GetXmlHttpObject()
{
var objXMLHttp = null;
if (window.XMLHttpRequest)
{
objXMLHttp = new XMLHttpRequest(); //Checks if the XMLHttpRequest variable should be used
}
else if (window.ActiveXObject)
{
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); //Checks if Microsoft.XMLHTTP should be used (For IE)
}
return objXMLHttp;
}
function doAjax()
{
xmlHttp = GetXmlHttpObject(); //Set the xmlHttp variable
url = 'ajaxpage.php'; //Set the url variable to ajaxpage.php. We'll make this page later
xmlHttp.open('GET', url, true); //Tell the client what page we want, and how to get it
xmlHttp.onreadystatechange = updateSpan; //Tell the client what function to do when the state of xmlHttp changes
xmlHttp.send(null); //Sends the request
document.getElementById('ajaxspan').innerHTML = 'Loading...'; //Sets the text inside the "ajaxspan" element to "Loading...", so the user knows it's doing something!
}
function updateSpan()
{
if (xmlHttp.readyState==4) //If xmlHttp's state is 4 (the page is loaded)
{
document.getElementById('ajaxspan').innerHTML = xmlHttp.responseText; //sets the "ajaxspan" element to whatever was on the page
}
}
</script>
function GetXmlHttpObject()
{
var objXMLHttp = null;
if (window.XMLHttpRequest)
{
objXMLHttp = new XMLHttpRequest(); //Checks if the XMLHttpRequest variable should be used
}
else if (window.ActiveXObject)
{
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); //Checks if Microsoft.XMLHTTP should be used (For IE)
}
return objXMLHttp;
}
function doAjax()
{
xmlHttp = GetXmlHttpObject(); //Set the xmlHttp variable
url = 'ajaxpage.php'; //Set the url variable to ajaxpage.php. We'll make this page later
xmlHttp.open('GET', url, true); //Tell the client what page we want, and how to get it
xmlHttp.onreadystatechange = updateSpan; //Tell the client what function to do when the state of xmlHttp changes
xmlHttp.send(null); //Sends the request
document.getElementById('ajaxspan').innerHTML = 'Loading...'; //Sets the text inside the "ajaxspan" element to "Loading...", so the user knows it's doing something!
}
function updateSpan()
{
if (xmlHttp.readyState==4) //If xmlHttp's state is 4 (the page is loaded)
{
document.getElementById('ajaxspan').innerHTML = xmlHttp.responseText; //sets the "ajaxspan" element to whatever was on the page
}
}
</script>
Big bit of code, isn't it!
Basically, it sets the xmlHttp variable to whatever's the best Ajax XmlHttp variable for the browser, then it tells the client to load the page "ajaxpage.php", and puts "Loading..." onto the page while it loads, then when it loads, it replaces the loading text with whatever's on the page!
Now for the final bit, ajaxpage.php. You can do this however you want, here's a simple example that just shows "Hello world!"
CODE
<?php
echo 'Hello, world!';
?>
echo 'Hello, world!';
?>
Simple, huh?
Your final ajaxexample.htm page should look like this:
CODE
<html>
<head>
<title>AJAX Example</title>
<script language="JavaScript" type="Text/JavaScript">
function GetXmlHttpObject()
{
var objXMLHttp = null;
if (window.XMLHttpRequest)
{
objXMLHttp = new XMLHttpRequest(); //Checks if the XMLHttpRequest variable should be used
}
else if (window.ActiveXObject)
{
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); //Checks if Microsoft.XMLHTTP should be used (For IE)
}
return objXMLHttp;
}
function doAjax()
{
xmlHttp = GetXmlHttpObject(); //Set the xmlHttp variable
url = 'ajaxpage.php'; //Set the url variable to ajaxpage.php. We'll make this page later
xmlHttp.open('GET', url, true); //Tell the client what page we want, and how to get it
xmlHttp.onreadystatechange = updateSpan; //Tell the client what function to do when the state of xmlHttp changes
xmlHttp.send(null); //Sends the request
document.getElementById('ajaxspan').innerHTML = 'Loading...'; //Sets the text inside the "ajaxspan" element to "Loading...", so the user knows it's doing something!
}
function updateSpan()
{
if (xmlHttp.readyState==4) //If xmlHttp's state is 4 (the page is loaded)
{
document.getElementById('ajaxspan').innerHTML = xmlHttp.responseText; //sets the "ajaxspan" element to whatever was on the page
}
}
</script>
</head>
<body>
<a href="#" onClick="doAjax();">Click here!</a><br><br>
<span id="ajaxspan"></span>
</body>
</html>
<head>
<title>AJAX Example</title>
<script language="JavaScript" type="Text/JavaScript">
function GetXmlHttpObject()
{
var objXMLHttp = null;
if (window.XMLHttpRequest)
{
objXMLHttp = new XMLHttpRequest(); //Checks if the XMLHttpRequest variable should be used
}
else if (window.ActiveXObject)
{
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); //Checks if Microsoft.XMLHTTP should be used (For IE)
}
return objXMLHttp;
}
function doAjax()
{
xmlHttp = GetXmlHttpObject(); //Set the xmlHttp variable
url = 'ajaxpage.php'; //Set the url variable to ajaxpage.php. We'll make this page later
xmlHttp.open('GET', url, true); //Tell the client what page we want, and how to get it
xmlHttp.onreadystatechange = updateSpan; //Tell the client what function to do when the state of xmlHttp changes
xmlHttp.send(null); //Sends the request
document.getElementById('ajaxspan').innerHTML = 'Loading...'; //Sets the text inside the "ajaxspan" element to "Loading...", so the user knows it's doing something!
}
function updateSpan()
{
if (xmlHttp.readyState==4) //If xmlHttp's state is 4 (the page is loaded)
{
document.getElementById('ajaxspan').innerHTML = xmlHttp.responseText; //sets the "ajaxspan" element to whatever was on the page
}
}
</script>
</head>
<body>
<a href="#" onClick="doAjax();">Click here!</a><br><br>
<span id="ajaxspan"></span>
</body>
</html>
And if it all goes well, when you click the "Click here!" link, the text "loading..." should appear, then once it's loaded, "Hello world!"
It should be easy to fiddle around and modify it to suit your needs. I hope you learned a little about AJAX!
