Question

I’m appending an animated gif which is a loading bar. The gif is defined earlier in the code and I then just do the following..

document.getElementById("loading").style.display = "inline";
//some if statements.
do_ajax(params);

The ajax call looks something like…

    var uri = getURL(params);
    var xhr = new XMLHttpRequest();
    xhr.open("POST",uri,false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
    xhr.send(null);

to show the loading gif. I then perform some checks (if statements) followed by an AJAX request. However, the gif freezes while all this code is executing and only begins to ‘move’ once the code has finished executing. Why is this? How do I fix this issue?

I’m using Chrome 11

Answer 1

You are using synchronous XHR. This will lock the browser whilst waiting for the request to finish. Obviously, it causes a serious UI issue.

Try asynchronous. Set open()‘s 3rd parameter to true. You also need to assign the readystatechange event and listen for success.

Further Reading.