Kill JQuery AJAX overlapping requests

Question

Hi All,

Is it possible to kill a previous ajax request?

We have tabular data very adjacent to each other. On mouseover event of each data we are making a request to our server using JQuery Ajax object and showing in popup.

But as frequently we move mouse to other tabular contents previous Ajax responses are being displayed inside popups prior exact response being displayed which is meant for that tabular content.

I need when new Ajax request is generated previous request/response should be killed, so that always expected latest response is available inside popup.

I am using JQuery, PHP and Mysql to server the request.

Answer 1

Another option would be not to initiate another request until the first is completed.

Answer 2

check this: http://stackoverflow.com/questions/600494/jquery-automatically-abort-ajaxrequests-on-page-unload

or this:

http://stackoverflow.com/questions/446594/kill-ajax-requests-using-javascript-using-jquery/446626#446626

Answer 3

Yes and no. That is the point of Ajax. To be able to do something asynchronously. What you are wanting to do is to abort a request which destroys the idea of asynchronously. Perhaps what you can do is, if you send another request, set a value somewhere indicating the number of requests, then in the callbacks to your requests, check if the amount of request is higher than 1, if so ignore the response.

Answer 4

Could you create a custom Javascript Sync object which would be shared by the function making subsequent ajax calls? Assign a sequentially generated id as a parameter to the request call going in. Include the same id in response. On firing every request assign a new id, incremented by 1 or whatever logic. If the current id in response is not same as the one in shared object; ignore the response else render the response.

this would cleanly solve the race condition. I am not sure myself if there is a way to kill the request prematurely but it would at least not create rendering problem that you face now.

Answer 5

Check this AJAX Manager plugin. The XmlHttpRequest has an abort() function but jQuery doesn't have a wrapper for it.