XMLHttpRequest() with onreadystatechange function (Async=true)


As mentioned in Pre XMLHttpRequest AJAX the XMLHttpRequest object was initially implemented by Microsoft in 1999 as an ActiveX object in Internet Explorer. However it was adopted as a standard javascript browser object. HTML5 added a onload event to this object. Before HTML5 and with IE8 today, the onreadystatechange event must have a listener to determine when the data has been loaded.

Data received by XMLHttpRequest() can be of any type; XML, HTML, and text are normally used. Binary data can be downloaded but in straight javascript binary data is more complicated.

XMLHttpRequest() was created for getting data from the same domain that the web page was downloaded from. Cross domain data sharing has security issues; It can be done but the host which is sharing the data must have special headers in the HTTP response to allow it.

<script>
var xmlHttp = new XMLHttpRequest(); /* current usage */
function getReady() {
/* this event fires more than once. .readyState will change 4 times.
 0 = uninitialized
 1 = loading
 2 = loaded
 3 = interactive
 4 = complete
*/
 if (xmlHttp.readyState == 4) 
 document.getElementById("answer").value = xmlHttp.responseText;
 }
}
function getAnswer(method) {
 var d = new Date();
 var n = d.getTime(); /* pre emptive prevent get request caching */
 var a = document.getElementById("a").value;
 var b = document.getElementById("b").value;
 xmlHttp.open(
    "GET", 
    "/domath2.php?a="+a+"&b="+b+"&n"+ Math.random(),
    true); 
 /* The last value means Async=true 
    so we need to listen to onreadystatechange */
 xmlHttp.onreadystatechange = getReady;
 xmlHttp.send(/* post data goes here */); 
}
</script>
<br/><input type="text" id="a">
<br/><input type="text" id="b">
<br/><input type="button" value="Add" onclick="getAnswer('add');">
<br/><input type="text" id="answer">
<span id="collection"></span>

current usage of XMLHttpRequest() does not use an ActiveX object; In this example a global xmlHttp is being created to allow any function to interact with the object instead of using closure type functions.

The HTML calls getAnswer function which sets up and sends the request to the server. Because this example is a get request a random number is being added to the end of the request to prevent browser caching.

<?php 
$a = $_GET["a"];
$b = $_GET["b"];
echo $a+$b;
?>

The onreadystatechange event fires for each condition of the request. The finial condition is that the data from the PHP has completely loaded. In this case the result is a number in text format.

In this example we are still communicating with the server via get requests; The security concerns of get requests are that the data sent to the server appears in the log files. This will be addressed as we look at using jquery.ajax.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: