This javascript lags the entire browser! Any ideas?

[XGhozt]

Hey guys,

The following javascript is for an IPB modification. The modification is for a shoutcast radio. The script I'm posting here is the part that reloads the content without reloading the page. This way the information such as who's djing and how many listeners stays updated without reloading page.

Now, when this script is applied, the entire browser lags on page load for about 2 seconds to the point where you can't do anything in the browser until it loaded.

Now, what I had in mind was to implement a loading sequence. So instead of just loading the javscript instantly, it displays a loading image or text simply saying "loading" while it grabs the content.

Problem is that I don't know how to do this.

Here is the script:

function createRequestObject() { 
    var ro; 
    var browser = navigator.appName; 
    if(browser == "Microsoft Internet Explorer"){ 
        ro = new ActiveXObject("Microsoft.XMLHTTP"); 
    }else{ 
        ro = new XMLHttpRequest(); 
    } 
    return ro; 
} 

var http = createRequestObject();
var http2 = createRequestObject();

function sndReq() { 
    http.open('get', 'index.php?act=radio&view=globalbar');
	http.setRequestHeader( "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT" );
    http.onreadystatechange = handleResponse; 
    http.send(null); 
	setTimeout("sndReq()", 20000); 
} 

function handleResponse() { 
    if(http.readyState == 4){ 
        var response = http.responseText; 
        if (response != responseold || responsecheck != 1) { 
            var responsecheck = 1;
			document.getElementsByName("global").innerHTML = http.responseText;
            document.getElementsByName("shoutwall").innerHTML = http.responseText;
            var responseold = response; 
        } 
    } 
}

sndReq();

function sndReq2() { 
    http2.open('get', 'index.php?act=radio&view=radio_panel');
	http2.setRequestHeader( "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT" );
    http2.onreadystatechange = handleResponse2; 
    http2.send(null); 
    setTimeout("sndReq()", 30000); 
} 

function handleResponse2() { 
    if(http2.readyState == 4){ 
        var response = http2.responseText; 
        if (response != responseold || responsecheck != 1) { 
            var responsecheck = 1;
			document.getElementsByName("panel").innerHTML = http2.responseText;
            var responseold = response; 
        } 
    } 
}


sndReq2();

function stoperror(){
    return true
}
window.onerror=stoperror

As you can see, it refreshes "index.php?act=radio&view=globalbar" every so often (60000). I just need to make it load that in the background and not just strait loading it on the fly and lagging the browser.

Any solutions?

Edit: I would like to add that this problem is mainly on firefox. The other browsers seem to handle it okay, but it's still not as fast as it loads without the script applied.

[???]

This probably wont help much, but in sndReq you probably only need send(null). Also though, I though the null part was for the paramiters. Insted of having index.php?blah=blah, you have send(something). Whatever. I'm not very experienced in this.

[XGhozt]

I lol'ed. Me either, that's why I'm posting. ^_~

[XGhozt]

..bump

[Twey]

function sndReq() { 
    http.open('get', 'index.php?act=radio&view=globalbar', true);
    http.setRequestHeader( "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
    http.onreadystatechange = handleResponse; 
    http.send(null);
    setTimeout(sndReq, 20000); 
}

Also though, I though the null part was for the paramiters. Insted of having index.php?blah=blah, you have send(something).

Only for POST.