Skip to Content


You (Level 0)
0% Complete
Last Badge Earned
None

For now, let's discuss what an AJAX XMLHttpRequest Object is. It is an object that we use in AJAX that allows us to talk to a server behind the users back. This object is the sole reason we are allowed to make updates into the user's page without forcing them to reload the entire page. An HTTP Request is actually sent out by your browser each time you type a website, which is then sent to a server that finally sends you back the web page. Of course, this happens right before your eyes and you know what it is doing. The XMLHttpRequest is very much like that, but it is very sneaky. The XML is simply a reference to the data structure that is being returned. Now, we can vent about Internet Explorer. Don't get me wrong. I love Microsoft, but I absolutely hate the tyranny it has on developers. I will vent my anger more as we move through this tutorial.

Let's make an XMLHttpRequest:

Example var xmlhttp;
if (window.XMLHttpRequest)
{ // works with IE7+, Chrome, Firefox, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ // works with IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

It is the else statement that annoys me about Internet Explorer. However, you can see that they now have jumped on the bandwagon and started using XMLHttpRequest. Now, we can start sending requests to the server.

To GET Or To POST?

I won't go into much detail here, but GET is usually the best because it is faster. However, you might want to use POST when you are transferring a very large amount of data. GET actually has a limit to the maximum allowed size for a url.

We will only deal with the GET

Example //PHP File <?php
echo $_GET['sampleVar'];
?>
//end PHP File
//HTML File
<script type="text/javascript">
function doGET()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() //This part is actually executed last
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) // Was the request processed successfully?
{
document.getElementById("sampleDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajaxTest2.php?sampleVar=" + Math.random());
xmlhttp.send();
}
</script>
<button type="button1" onclick="doGET()">GET</button>
<div id="sampleDiv">Nothing is here</div>

Obviously, call the function doGet() by clicking our button1. In that function, we have the standard setting up of our xmlhttp variable, creating the actual XMLHttpRequest. Next, we skip over the xmlhttp.onreadystatechange=function().

When then prepare to send our request with xmlhttp.open("GET","ajaxTest2.php?sampleVar=" + Math.random(),true);. Let's break this down a little bit. The "GET" is the request type. The ajaxTest2.php is the url that we are going to talk with. After the separating ?, we have a variable, sampleVar that is equal, =, to our Math.random(). The Math.random() simply generates a random number between 1 and 0. We use this so that our changed page won't be cached by the browser. Finally, we send the request with xmlhttp.send();.

Eventually, the xmlhttp.onreadystatechange=function() will fire when the request returns with data. In that function, we set our sampleDiv's content equal to our returned data, xmlhttp.responseText, which in this case is whatever our Math.random() is. As you can see, every time you click the button the Math.random() variable is sent to the PHP file that spits out the variable's value into the sampleDiv container.

Your code will execute in this window.



Let's explore some more tutorials or topics!

Previous Tutorial Next Tutorial


If you enjoyed this resource, support me by sharing this page with others.

Comment on

No comments yet... Be the first!