I will like the js below to be able to display a loading,  indication to alert the user that the page is loading. As I'm not an expert in this field, can you please modify it to function like that. It will be cool if the loading indicator can include a gif animator with filename loading.gif.

I'll deeply appreciate your help. The code of the .js file follows;

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP"
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP"
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?"!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http"==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js"!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript";
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css"!=-1){ //If object is a css file
fileref=document.createElement("link"
fileref.setAttribute("rel", "stylesheet";
fileref.setAttribute("type", "text/css";
fileref.setAttribute("href", file);
}
}
if (fileref!=""{
document.getElementsByTagName("head".item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

Off the top of my head (these days, I don't write ajax code anymore. I simply use a jquery plugin so my brain had been dumbed down quite a bit ):

I blv the "loading" state in ajax is "3" (readyState == 3). So when you are checking for the readystate, if it is 3, you set your loading.gif to display: block. when it is 4, you set it to display: none.

I am pretty sure if you googled for it, you will find perhaps a more elegant solution.

good luck!

Yep, I think what yawa said is correct, ready state 3, make note of this;

0: not initialized.
1: connection established.
2: request received.
3: answer in process.
4: finished.

Other option is to have loading in your div, that is the simplest way, but that is for the first time you loading just have <div id=''>Loading Page</div>

Alot of answers to your question on line, just google it you will find it, or just create to functions in yoru js

function ShowLoading()
{

document.getElementById("Loadmsg".style.display = "block";

}

function CloseLoadingMsg()
{

document.getElementById("Loadmsg".style.display = "none";

}

The first function before this line

var page_request = false

then the function before this line
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http"==-1))

but to be honest I would change it to this
if (request.readyState == 4) {
CloseLoading();
if (request.status == 200 || request.status == 304) {
}

}

And make sure you have the div for theloading page set, hope this helps.

come to think of it, i seem to have forgotten how to use raw ajax like that. I will rather use jQuery or my dhtmlExt library.
But for newbies, i think jquery is better. However if you are tryin to learn ajax, try www.javascriptkit.com - that was where
i started learning ajax

*dhtml:

come to think of it, i seem to have forgotten how to use raw ajax like that. I will rather use jQuery or my dhtmlExt library.
But for newbies, i think jquery is better. However if you are tryin to learn ajax, try www.javascriptkit.com - that was where
i started learning ajax

Yeah you are right, jquery is the easy way out, but I think the raw data gives you more, I use raw ajax so I can manipulate my data. its good if your result can give different conditions. But to behonest, it works better in .net because visual studio provides script for you to use.

i used the raw jscript to build my library which is somewhat easier than jquery.

all these for instance will be:
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http"==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

$.post("result.php?user=43",function(response) {$('#containerid').html(response)},function() {alert("An error occured";});

that is one of the functions in my javascript library, it is similar to the jquery $.ajax which is somewhat more
complicated but more functional with timeouts and all that which i have conveniently ignored.

You need to use libraries to speed up so you dont spend forever on a project. Even with that, i am still way strugglin to
meet up with deadlines. These days i take the easiest way out o my broda, at least till i clear my desk which is rather full at this time