Showing Loading Div for SJAX Requests

JavaScript
1

In my current project, I am using SJAX (i.e. synchronous AJAX) requests instead of pure AJAX requests in several places for better usability. One place is on the “unload” event, where the XMLHttpRequest must be synchronous in order for the program to work.

Anyway, when there is latency on the server, especially in peak traffic hours, it can be confusing to the user to see a frozen page for a couple of seconds while the SJAX request loads. As such, it would be beneficial to have a “loading” div reveal itself while the loading is taking place.

Here is the concept I currently have in place:

document.getElementById("sjaxsubmitting").style.display = "block";

// Start Request

reqobj.open("POST", "myfile.php", false);
reqobj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
if(navigator.userAgent.indexOf("Firefox/3")!=-1){
	reqobj.sendAsBinary(data);
}else{
	reqobj.send(data);
}

// Finish Request

document.getElementById("sjaxsubmitting").style.display = "none";

This works as expected in Firefox and Opera, although Opera is a little sluggish at first. However, Safari and Chrome continue to show the frozen screen without displaying the loading div, despite this code. I have not yet tested IE. Oddly enough, when I put a quick alert like “alert(‘hi there!’);” before “Start Request” and after the display activating script, the loading div will appear in WebKit and will remain in sight for the duration of the request.

What could I change to make WebKit display the div in the same way Firefox does?

2

If you set the sjaxsubmitting element to be visible (without actually doing the request) does it show up?

It could be that the browser screen hasn’t been repainted by the time it gets to doing the request. Reading about the alert() thingy, it seems that’s probably the problem. Not sure how you’d tackle that though. Maybe calling the sjax request after a small timeout (say, 100ms) might help.