Aborting previous ajax request

jQuery, 2016-01-15 22:17:14 UTC

Aborting previous ajax request often occure when creating an autocomplete search box. In other case, occure when you want to cancel uploading a file to the server.

I wan to show you how to do that.

First, let see what is ajax do when you fire an ajax;

var lol = $.ajax({
    url: '/api/v1/search?q=something'
});

 

When you open up your developer console, you can see like this;

 '

Now We know that ajax has an abort method. We can use it to cancel previous ajax call.

Then now I will show you a complete sample about aborting search autocomplete request;

 

function inputChange() {
    var theRequest = null; 
        theRequest = $.ajax({
            url: '/api/v1/search?q='+$('#search_input').val(),
            beforeSend: function() {
                if(theRequest != null) {
                    theRequest.abort();
                }
            },
            success: function(response) {
                // response here
            }
        });

Easy right? :)


Share: