Canceled AJAX request slows subsequent navigation

Question

On my application when user requests a report a jquery AJAX (using .load() ) call is made to a file that does a lot of number crunching and mySQL requests. it generally takes 5-6 seconds to load and .ajaxStart() and .ajaxStop() are employed to display a loading gif during the load.

The issue:

If a user clicks the 'generate report' button and then changes their mind and attempts to navigate to another page the application hangs, and doesn't navigate to the new page for 5-6 seconds. I can tell from the removal of the loading gif that .ajaxStop() fires immediately when attempting to navigate to a new page, but it appears that the ajax request is finishing before the browser loads the next page.

Is this normal behavior? Any suggestions on how fix/restructure this?

Answer 1

I believe .ajaxStop() only cancels an ajax request if the beforeSend callback returns false. In this case, the call has not been initiated and the server has not received a request. Once the request has been sent to the server, the page no long has control over the request until it returns. The .ajaxStop() request fires when navigating away from the page because the last ajax call made, if any completed successfully and therefore terminates execution.

The ajaxStop event is also triggered if the last outstanding Ajax request is cancelled by returning false within the beforeSend callback function.

Above is an excerpt from the jquery api website for the .ajaxStop() command. It would appear that once the call has been made and the request has been sent your server is completing the call even though the user is navigating to a different page. If its that big of a call, it may cause the delay you're experiencing.

Hope this helps.