My AJAX Notes

The initial code
We are going to “try” three different ways to make a new XMLHttpRequest object. Every time we fail and get an error, we will catch the error and try the next a different command. This is necessary code for all AJAX applications.

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;
}
}
}

Using the XMLHttpRequest object

We have stored our XMLHttpRequest object in the variable ajaxRequest, and using this object is how we will communicate with the server.

The onreadystatechange property

The onreadystatechange property stores the function that will process the response from a server. The following code defines an empty function and sets the onreadystatechange property at the same time:

ajaxRequest.onreadystatechange = function() {
// code goes here.
}

The readystate property

The XMLHttpRequest object has another property called readyState. This is where the status of our server’s response is stored. Each time the readyState changes, the onreadystatechange function will be executed.

If the readystate is set to 4, then we can collect/process our data. Going back to the function we created earlier:

ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readystate == 4) {
// get data from server response
}
}

The responseText property

The data sent back from the server can be retrieved using the responseText property. For example, if you wanted to change the field in a textbox equal to the response from the server you would use:

ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readystate == 4) {
document.myForm.time.value = ajaxRequest.responseText;
}
}

Sending a request to the server

To send off a request to the server, we use the open() method and the send() method.

The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously. The send() method sends the request off to the server.

If your PHP/ASP script was in the same directory as this Ajax script, your code would look like this:

ajaxRequest.open(“GET”, “time.php”,true);
ajaxRequest.send(null);

Activating AJAX in a form

Let’s say that you wanted the AJAX request to be fired off each time a field was completed in a form. You could use the code below:

<form name=”myForm”>
Name:<input type=”text” onChange=”ajaxFunction();” name=”username” />
Time: <input type=”text” name=”time” />
</form>

Credit goes to: http://www.tizag.com and http://www.w3schools.com