Reputation: 6086
I have a web application, in which I'm making an AJAX call to fetch some data. The data can vary from a 100 Kb to 1 Mbs. Also, this call take a lot of time, since I need to do a lot of processing at the back-end.
I'm running into 2 basic issues:
1) It takes a lot of time, so I need to show some status of the AJAX call to the end-user, so that they don't get frustrated. I was thinking if there was a way to make an AJAX call after some interval to check the progress of the initial AJAX call, or may be something you can suggest?
2) When the data is received, it sometimes even hangs the browser tab for like a minute or two, because I'm painting the page through JavaScript. Would there be a way to stop or reduce this hanging time?
Any advice would be really helpful. Thanks.
Upvotes: 0
Views: 296
Reputation: 6086
Okay, I got a way through. I was able to check the progress without actually painting any iFrame. I simply created a session variable and keep on updating its value at the server side. I set a timeout function to trigger every sec, and checked the session variable's value by making an AJAX call. I know it's creating some extra load on the server, but I don't know any other way by now. Any more suggestions are welcomed.
Upvotes: 0
Reputation: 2554
AJAX provides status events on the client side, however in your case i dont think that will hold good as you want to send the progress to the end user, i would rather suggest you to trick it by doing an ajax call using an iframe which will constantly flush the progress from server to the client.
If the data is huge and you start painting its obvious that your browser will hang, i would suggest you to refine your painting mechanism to use setTimeout / setInterval, also if you follow step 1 you can start working with the flushed data from the server without waiting for the complete data till end
EDIT - How to show progress via iframe
lets say you have main.aspx where you have your whole content and doing an ajax call
You also have a info.aspx which will give you data from the server.
your info.aspx contains 6 steps and you want to inform the user for every single step.
//Step 1 - do some thing
Response.Write("<script>progress = '10'; progressText = 'Completed step 1'; ");
Response.Write(" updateProgress(); </script>");
Response.Flush();
//Step 2 - do some thing
Response.Write("<script>progress = '30'; progressText = 'Completed step 2'; ");
Response.Write(" updateProgress(); </script>");
Response.Flush();
in the above case we are updating the progress and progressText variable and calling updateProgress()
javascript, the updateProgress will look like
function updateProgress()
{
//update parent window/container on the progress which will show an visual indicator of the progress
}
the updateProgress() function is flushed in the beginning
Upvotes: 1