Animated GIF stops when using AJAX

[ToddWW]

I have a chunk of javascript that changes the opacity of the web page, positions an animated GIF in the middle of the screen, then fires an XMLHttpRequest to the server to collect data. When the XMLHttpRequest object gets to the Send method, the animation stops until the object gets a response from the server. It's mostly cosmetic but annoying because it looks like the browser is frozen for that 1-2 second period.

// CHANGE OPACITY AND TURN ON ANIMATED GIF
var v2 = document.getElementById("mainDiv");
v2.style.opacity = "0.3";
var v2 = document.getElementById("loaderDiv");
v2.style.display = "block";		
		
// SMALL DELAY TO ALLOW ABOVE CODE TO TAKE AFFECT
// WINDOW DIMS AND ANIMATED GIF STARTS SPINNING
window.setTimeout(function() {

        // GOTO THE SERVER AND GET DATA
	var objHttp = new XMLHttpRequest();
	var objDate = new Date();
	var urlRef = "mobile_expanded.asp?siteId=" + siteId + "&uUrl=" + objDate.getTime();
	objHttp.open("GET",urlRef,false);
	objHttp.send("");
	var strResponse = objHttp.responseText;
	
        //PLACE DATA IN WEB PAGE
        v1.innerHTML = strResponse;
	v1.style.display = "block";
		
	//UNDO OPACITY AND TURN OFF ANIMATED GIF.
        var v2 = document.getElementById("mainDiv");
	v2.style.opacity = "1.0";
	var v2 = document.getElementById("loaderDiv");
	v2.style.display = "none";

},1000);

 

[BillyRayPreachersSon]

>> Animated GIF stops when using AJAX

You're not using AJAX... you're using SJAX, due to the third parameter in your .open call being false (see here for more).

To quote that page (bolding is mine):

The third parameter, a boolean value indicating whether or not the request will be asynchronous, is not a required parameter by the W3C draft. The default value of this parameter should be assumed to be true by a W3C conforming user agent if it is not provided. An asynchronous request ("true") will not wait on a server response before continuing on with the execution of the current script. It will instead invoke the onreadystatechange event listener of the XMLHttpRequest object throughout the various stages of the request. A synchronous request ("false") however will block execution of the current script until the request has been completed, thus not invoking the onreadystatechange event listener.

It's likely that as well as blocking script executing, the browser is being "tied up" in general, leading to the loss of animation in the GIF. So, have you tried using an asynchronous request instead?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

[blue]@[/blue] Twitter:

http://twitter.com/SleepyDrunkDan

 

[BillyRayPreachersSon]

Incidentally, for help with AJAX requests, try forum1600, and for help with JavaScript in general, try forum216.

Dan