Newest Visitor Badge Earned!
Click to create an account and start competing today!
After Hours Programming
Show Tutorials


You (Level 0)
0/25
Last Badge Earned
Newest Visitor

AJAX XMLHttpRequest Object Tutorial

JavaScript XMLHttpRequest Object

The JavaScript XMLHttpRequest Object tutorial explains how to create and use an AJAX XMLHttpRequest Object.

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.

Try testing your code with the code simulator!

Let's move on to some more tutorials or the next section!



Previous Tutorial

Ajax Introduction

Next Tutorial

JSON Introduction







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

Stumbleupon Facebook Twitter GooglePlus Reddit Delicious Digg


Comment or Suggestion?

Comments are a way to tell me about corrections or suggestions, what you thought about the resource, or providing additional information. Help feed the discussion!


Yes




Comments on JavaScript XMLHttpRequest Object

No comments yet... Be the first!