Question

I’m using jQuery ajax to give the user some visual validation feedback. I have a textbox with the name of the product, as the user types(keyup) my ajax function checks the server if the product already exists, if it does I show the not available div and etc.. you get the point.

It works fine as is, but obviously if you begin to type by the time you are done there is going to be a lot of requests wasted and/or queued up. Is there a javascript or jquery command that I can put inside of my keyup function that will cancel all previous requests that haven’t finished yet?

Does this even seem like a problem? Or is this typically how ajax in this fashion is done?

(Note: I’m developing on my local machine so each and every ajax request takes min. 1 sec. Regardless even though it will be faster on the web I would like to know the best way to handle this.)

Here is ajax function and how the success function is set up:

function groupValidation(a,b) {
$.ajax({
    type: "POST",
    url: "/WebService_VehicleDisplay.asmx/groupValidation",
    data: "{groupId:'" + a + "',name:'" + b + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        var response = msg.d;
        if (response == true) {
            $("#avail").hide();
            $("#notAvail").show();    
        } else {
            $("#avail").show();
            $("#notAvail").hide();
        }   
    }
});

}

Answer 1

You can keep a reference to the previous XMLHttpRequest (which $.ajax() returns) and abort it, like this:

var xhr;                       //variable in a higher scope we can reference
function groupValidation(a,b) {
  if(xhr != null) xhr.abort(); //cancel previous request
  xhr = $.ajax({               //starting a request, keep a reference
    type: "POST",
    url: "/WebService_VehicleDisplay.asmx/groupValidation",
    data: "{groupId:'" + a + "',name:'" + b + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        xhr = null;            //clear it out, we finished, nothing to abort
        var response = msg.d;
        if (response == true) {
            $("#avail").hide();
            $("#notAvail").show();    
        } else {
            $("#avail").show();
            $("#notAvail").hide();
        }   
    }
  });
}