Navigate to another page after sending a long XMLHttpRequest

Question

I have an XMLHttpRequest that insert a lot of data to a MySQL database and takes 5-10 seconds. Here's The code of the request:

function sendRequest(url, params, divToChange)
{
   // code for IE7+, Firefox, Chrome, Opera, Safari
   if (window.XMLHttpRequest)
   {
       var httpRequest = new XMLHttpRequest();
   }      
   else // code for IE6, IE5
   {
       var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
   }

   // Stage 3 - open the request and prepare variables for the PHP method being  
      activated on server side//
   httpRequest.open("POST", url, true); 

   //Set request headers for POST command//
   httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   httpRequest.setRequestHeader("Content-length", params.length);
   httpRequest.setRequestHeader("Connection", "close");

   httpRequest.onreadystatechange=function()
   {
       if(httpRequest.readyState==3)
       {     
           document.getElementById(divToChange).innerHTML='please wait';
       }
       if(httpRequest.readyState==4 && httpRequest.status==200)
       {
           document.getElementById(divToChange).innerHTML=httpRequest.responseText;
       }
   }

   httpRequest.send(params); // Stage 4 - sending the request to the server//

   //end when the server will responde we will execute the        
   "document.getElementById("txtHint").innerHTML=xmlhttp.responseText;" //

}

//Calling the request with this function//
function createEventList() 
{   

   var url = "grid-update_event_list.php";
   var params = "firstLoad=1";

   //Create the httpRequest and send it to the server//
   sendRequest(url,params, "eventsList");  
}

And this is defined in my html to get the responses text:

<p>Events List Status: <b id='eventsList'>  </b></p>

I cant understand 2 behaviors in my browser:

1- The "please wait" text never shows on the browser. When I've added an alert(httpRequest.readyState) to test what's happening, I got popup with "3" as expected, but I've seen that immediately after readyState==3 it goes to readyState==4. It seems like they happen simultaneously. I do see the text returned in the httpRequest.responseText; of readyState==4.

2- I cant navigate to another page after sending the request, The current page is responsive (I can change comboboxes) but when I try to navigate to another link the browser waits to readyState==4 and only then It continues to the link. I cant understand that either, because the request defined as asynchronous = true.

Am I doing something wrong that causing these 2 behaviors ? thanks.

Answer 1

1.- you need to understand the readystates of an ajax call. There are 5 different ready states. For more information look at this link:

ReadyStates

so you could use a different readystate ( i would use 1 or 2) to display the dialog at the beginning of the request. Otherwise just change the div BEFORE you send the httpRequest.

2.- Even if ajax calls are asyncronous, they are sequential. That is, if you send a request, you cannot send another request until you have received the response of that request. Changing pages is another request/response cycle, so you won't be able to change page until you have received the response of the first request.

Hope this helps...