Ajax - XMLHttpRequest Object

In the Previous Lesson you learned how to create an XMLHttpRequest object based on the type of web browser being used. This lesson will show you how to use your object to communicate directly with the server!

Ajax - onreadystatechange Property

Before we even think about sending data to the server, we must first write a function that will be able to receive information. This function will be used to catch the data that is returned by the server.
The XMLHttpRequest object has a special property called onreadystatechange. onreadystatechange stores the function that will process the response from the server. The following code defines an empty function and sets the onreadystatechange property at the same time!
We will be filling this function in throughout the lesson, as you learn more about the XMLHttpRequest object.

Javascript Code:

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
 // We still need to write some code here
}

This property, onreadystatechange, stores a function. As the name sort of implies, every time the "ready state" changes this function will be executed. What is this "ready state" and is it any use to us?

Ajax - readyState Property

The XMLHttpRequest object has another property called readyState. This is where the status of our server's response is stored. The response can be processing, downloading or completed. Each time the readyState changes then our onreadystatechange function executes.
The only readyState that we are going to care about in this lesson is when our response is complete and we can get our hands on that information. So let's add an If Statement to our function to check if the response is complete.
Note: When the property readyState is 4 that means the response is complete and we can get our data.

Javascript Code:

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
 if(ajaxRequest.readyState == 4){
  // Get the data from the server's response
 }
}

Now that we know how to check if the response is complete, we can access the property that stores the server's response, responseText.

Ajax - responseText Property

For simple Ajax applications, like this tutorial describes, you can retrieve the server's response by using the responseText property. Using a little bit of Javascript and HTML forms we can change our text box to equal responseText.
In case you forgot, this tutorial is using Ajax to set an HTML text box to the server's time. The HTML input we want to change is the "time" text box. Here's a little refresher on how to access form inputs with Javascript:

• document.FormName.InputName.value

Our form's name is "myForm" and the text box is "time". Below is the code that will set our "time" text box to the server's time.

Javascript Code:

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
 if(ajaxRequest.readyState == 4){
  document.myForm.time.value = ajaxRequest.responseText;
 }
}

Phew! That was a lot of new things we had to use to get our server's response, but now we can rest easy knowing we are ready to send off a request to the server. Using Ajax, we can now ask our server for some data!

Ajax - Sending a Request for Information

Now that our onreadystatechange property has a proper response-handling function, we can send our request. Sending a request is comprised of two steps:

1. Specify the URL of server-side script that will be used in our Ajax application.
2. Use the send function to send off the request.

Our simple PHP script, that we have yet to write, will be called "serverTime.php", so we can already do step 1. The URL is set using the open method, which takes three arguments. The second argument is the important one, as it is the URL of our PHP script.
Assuming that the HTML and PHP files are in the same directory, the code would be:

Javascript Code:

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
 if(ajaxRequest.readyState == 4){
  document.myForm.time.value = ajaxRequest.responseText;
 }
}
ajaxRequest.open("GET", "serverTime.php", true);

With all of our Javascript setup work complete, we can then use the send method to send our request to the server.

Javascript Code:

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
 if(ajaxRequest.readyState == 4){
  document.myForm.time.value = ajaxRequest.responseText;
 }
}
ajaxRequest.open("GET", "serverTime.php", true);
ajaxRequest.send(null); 

Ajax - Finishing up "order.html"

Before we plug in our freshly written Javascript code into the "order.html" file, we need some way for the visitor to run our Ajax function. It might be kinda cool if our Ajax did its magic while the user was doing something on our webpage, so let's have our function run after the user enters their name.
Using the onChange attribute, we can make it so our function is called whenever the user makes a change to the "username" text box.

Javascript Code:

<input type='text' onChange="ajaxFunction();" name='username' /> <br />

OK, now we are ready to completely update our "order.html" file to be 100% Ajax ready.

order.html Updated Code:

<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
 var ajaxRequest;  // The variable that makes Ajax possible!
 
 try{
  // Opera 8.0+, Firefox, Safari
  ajaxRequest = new XMLHttpRequest();
 } catch (e){
  // Internet Explorer Browsers
  try{
   ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try{
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (e){
    // Something went wrong
    alert("Your browser broke!");
    return false;
   }
  }
 }
 // Create a function that will receive data sent from the server
 ajaxRequest.onreadystatechange = function(){
  if(ajaxRequest.readyState == 4){
   document.myForm.time.value = ajaxRequest.responseText;
  }
 }
 ajaxRequest.open("GET", "serverTime.php", true);
 ajaxRequest.send(null); 
}

//-->
</script>



<form name='myForm'>
Name: <input type='text' onChange="ajaxFunction();" name='username' /> <br />
Time: <input type='text' name='time' />
</form>
</body>
</html>

Ajax - Final Step

There were a lot of key steps covered in this lesson, so don't worry if you have to go back and read a few sections more than once. When you're ready you can move on to the final step of making our Ajax complete: writing the "serverTime.php" script.

Posted in: AJAX