If you are looking for our Reason Tutorial site, you can visit us at Reason Experts.com. Hydlide.nl is being used as a development blog for reasonexperts.com
Devblog related to projects hydlide is working on
This blog is made by Hydlide and is there to keep you up to date with the latest developments on the sites hydlide.nl and reasonexperts.com (a propellerhead reason 6 tutorial site)
XMLHttpRequest Javascript and Ajax
Posted on 12 Jan 2012XMLHttpRequest is a method to implement ajax calls inside a web application. Where AJAX stands for Asynchronous JavaScript and XML. Meaning, it allows the web application developer to perform multiple requests to a webserver and add dynamic content for the user interface.
There have been hundreds, if not thousand different books, websites, blogs and what not discussing the use, implementation etc on how to handle a single AJAX call. The problem here however which I am facing right now, is that I would like to send multiple ajax requests simultanious. Since, as the word 'Asynchronous' would imply... it should request a request during some other request. And here is where AJAX starts to fail in its 'default' state.
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
this is a default method on how to perform an AJAX driven page. The idea here is to create an object which is called "xmlhttp". This is in javascript a veriable. And the idea is that this veriable contains the current XMLHttpRequest we are currently using.
Now, here is where things get a bit problematic. Since, eventually if two different calls are being thrown at the same time, it would mean (if the same function is being used), the veriable of xmlhttp would get over written.
The solution would be, in this case, to use a non-asyncronized mode. Meaning, every call waits until it is completed. However, this kind of beats the purpose of using an asyncronized method to begin with.
To solve the whole issue at hand, I have been writing my own xmlhttprequest handler, and this one works kind of similar as a technique which is being used in for instance google maps.
function init_http_handler(do_method,do_url,do_params,do_function,do_div)
{
var cur_object;
try
{
// Firefox, Opera 8.0+, Safari
cur_object=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
cur_object=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
cur_object=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlhttp_array[xmlhttp_array.length] = cur_object;
cur_object.onreadystatechange=function()
{
if(cur_object.readyState==4)
{
xml_object= xmlhttp_array.length-1 ;
function_name = do_function + "(" + xml_object + ", '"+do_div + "')";
eval(function_name);
}
}
if(do_params!=null && do_params!='')
{
do_url = do_url + "?"+ do_params
}
cur_object.open(do_method,do_url, true);
cur_object.send(null)
}
Eventually it might look siilar as the previous version, since in this case a object called "cur_object" is being created and this one sends out the request. However, the main difference between the original and this one is that the veriable is being stacked inside an array called xmlhttp_array. Meaning: everytime a request is being send, the request itself gets stored inside an array. Every element within the array contains its own unique XMLHTTPRequest object. Thus we can send out 100 requests at the same time if needed.