Ajax Requests during Filtering/Paging and UI Responsiveness

[Frinavale]

Hi,

I am currently working on a feature that allows people to page and filter search results down based on search criteria entered.

To accomplish this I am calling a function called "RefreshSearchR esults" during keyup, click, and change events (for textboxes, checkboxes and select elements). This method uses Ajax to request new search results based on what was provided by the user (whether that be paging or search criteria restrictions).

Sometimes, depending on the data set involved, the server process is slower than the ajax requests which ends up making the search results appear as if they are "locked up" in my browser.

For example, if I start filtering student objects based name and start typing "frinny" an ajax request is sent up to filter on "f" then "fr" then "frin" etc.

If the results didn't return from the "f" and I do a bunch of things that cause ajax requests, my search results section of the page appear as if they are always updating (because I'm showing a "loading" message over them) since the number of requests is taking a while to process.

I was thinking of implementing a solution that prevents ajax requests from being sent if one is already in progress....and if there were any changes between the start of the ajax request to when it finished I would start a new request.

But, I'm not sure if this is the best approach and was hoping to hear back from the JavaScript experts about the best techniques to use to avoid UI lockup like I'm experiencing.

Thanks,

-Frinny

[Rabbit]

What about going with just the most recent request? Can you cancel both the client side request and the server side script?

[Dormilich]

cancelling the AJAX request from JS: XMLHttpRequest. abort().

cancelling the AJAX request from the server: depends whether your server language can manage multiple incoming requests (or rather, can do something with request 1 if a certain condition on request 2 occurs). probably the easiest would be aborting the server process on request 1 and sending a HTTP 206 (no content).

EDIT: besides that, why does your AJAX locks up the UI? asynchronous calls were made esp. to not lock up the script execution.

[Frinavale]

It isn't "locked up" but rather the section that is being updated is constantly stating that it is "loading" while it waits for requests to come back.

I'm going to look into whether or not I can cancel the request server-side and what it would take to do that.

Thanks for the suggestions!

-Frinny

[Dormilich]

It isn't "locked up" but rather the section that is being updated is constantly stating that it is "loading" while it waits for requests to come back.

if you abort from JS, you can just end the "loading" manually.

[Frinavale]

I changed the code so that only one ajax request for filtering/paging is used at a given time.

If the RefreshSearchRe sults is currently processing a request it doesn't make a new ajax request and instead increments a counter for the number of changes made. In the completed event I create a new ajax request if the count is greater than 0; otherwise I hide the "updating" indicator.

It is smoother and there are lest requests sent to the server now (especially if the server takes a while with the result set).

-Frinny