Pre XMLHttpRequest AJAX


The XMLHttpRequest object was initially implemented by Microsoft in 1999 as an ActiveX object in Internet Explorer. Methods to communicate with a web server from a web page prior to json may be called by some old school; However,  jsonp or padded json used today for cross site data sharing is very similar to old school methods.

The object here is to send data to the web server and get data that will be used on the webpage.  The data may come from a MySQL database but for this example, to keep it simple, the server will only be adding two numbers in PHP, then sending the response back as padded data. JSONP responses are padded data, but the data is complicated.

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

<script>
function callbackfunction(answer) {
 document.getElementById("answer").value = answer;
}
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;
 var caller = document.createElement("script");
 caller.setAttribute( 'src', 
"domath.php?callback=callbackfunction&a="+a+"&b="+b+"&nocache="+n );
 document.getElementById("collection").appendChild( caller ); 
 /* script will not load until it is added to the document */
 /* appendChild is supported in browsers newer than IE 5.5 
but not in earlier browswers */
} </script>

A script element is being created to be added to the document and the src is being set to include the form data as a standard get request. Because get requests often get cached a unique nocache value, current time in milliseconds, is added to the request to prevent caching. callback= is added to the URL, which is a standard practice for JSONP.

The PHP “domath.php” does the math and returns it as a padded function call.

<?php
$callback = $_GET["callback"];
$a = $_GET["a"];
$b = $_GET["b"];
$result = $a+$b;
echo $callback."(".$result.");";
?>

On the web page the script is neither downloaded or ran until it is added to the webpage. The browser sees the following script.

callbackfunction(3);

A function call with an argument to a function, which exists in the webpage, and runs that function when the script has downloaded. The function call provides the equivalent of a onload event.

It should be noted that while you can wrap data in a script tag, which is not script or padded, you can not download a script which is not a runnable script. Data wrapped in a script tag must be part of the HTML document. More on that in a later post. Using downloaded scripts to communicate between the client browser and host computer must be padded either as a function call or as a var assignment. Function call padding provides the onload event call which is missing from pre HTML5 browsers, IE8, for the script element.

There are two security concerns about JSONP called via a get method. One is that the data being sent to the server is exposed in log files, and the second is the location of the shared data must be trust worthy. Post method requires using XMLHttpRequest, which will be covered in another post.

About these ads

One response

  1. […] mentioned in Pre XMLHttpRequest AJAX the XMLHttpRequest object was initially implemented by Microsoft in 1999 as an ActiveX object in […]

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: