How can you load multiple pieces of content into separate divs, much like frames but avoiding the javascript race condition.
This was adapted from
http://codesnippets.joyent.com/posts/show/602
The problem with the above snippet was that you could only make one ajax call at a time as the javascript used the global variable XMLHttpRequest.
With help from http://www.the-art-of-web.com/javascript/ajax-race-condition/
I changed the ajax snippet to be object based and now you can load as many divs simultaneously on the sam page at once. However http requests are usually restricted to 2 per server but it's useful if your page grabs bits from several severs. I got round the cross domain problem with a simple php proxy script which i'll add soon.
function AjaxRequest() {
var req;
this.ahah = function (url, target) {
document.getElementById(target).innerHTML = ' Fetching data...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() { ahahDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}
var ahahDone = function (url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
}
}
}
this.load = function (url, target) {
this.ahah(url,target);
return false;
}
} //end of class
This also has to go in the head of the document
function callAjax(url, target) {
var req = new AjaxRequest();
req.load(url, target);
return true;
}
Call code with the name of the external file you would like loaded into the div and the id of the div you want to put the content into
File 1
Add new comment