How to abort ajax request

Question

In my below code if input search vale is empty and as well as search keyword is same means if entered 'abc' got the result again clicked need to abort the ajax request, I had written in beforesend method but browser throwing error "Cannot read property 'abort' of undefined"

Ajax code:

    function makeRequest()
    {
    var searchText='';
        var popupRequest = $.ajax({
            url:"cnc/cncstorelocator",
            type:'GET',
            cache:false,
            data: {searchCriteria : $('#cnc-searchcriteria').val()},
            dataType: 'json',
            beforeSend: function(){               
  if(searchText == '' && searchText == searchData) {
                      popupRequest.abort();
                    }
                },
            success : function(cncStoreLocatorData)
            {
                 var store=null;
                for (var i = 0; i < cncStoreLocatorData.length; i++) {
                  var loc = cncStoreLocatorData[i];
                 store = $('<div/>').addClass('pane');
                  var store_hours = loc.hrsOfOperation;
                 var str1 =  $('<p/>').addClass('stores-timing');
                 var store_timings=null;
                  for (var j = 0; j < store_hours.length; j++) {
                         var storetime = store_hours[j];
                        store_timings = str1.append($('<span/>').html('<strong>' + storetime.days_short));
                        store_timings.appendTo(store);
                     }
                  $("#cncstorepane").append(store);
                  searchText=searchData;
                   }
            },
            error: function(cncStoreLocatorData) {
                    alert("can't make req");
                }

          });

    }

Answer 1

    var xhr = $.ajax({
    type: "POST",
    url: "XXX.php",
    data: "name=marry&location=London",
    success: function(msg){
       alert( "The Data Saved: " + msg );
    }
});

//kill the request
xhr.abort()

Answer 2

var xhr = null;
function makeRequest()
    {
    if( xhr != null ) {
            xhr.abort();
            xhr = null;
        }
    var searchText='';
        xhr = $.ajax({
            url:"cnc/cncstorelocator",
            type:'GET',
            cache:false,
            data: {searchCriteria : $('#cnc-searchcriteria').val()},
            dataType: 'json',
            beforeSend: function(){               
            if(searchText == '' && searchText == searchData) {
                      xhr.abort();
                    }
                },
            success : function(cncStoreLocatorData)
            {
                var store=null;
                for (var i = 0; i < cncStoreLocatorData.length; i++) {
                 var loc = cncStoreLocatorData[i];
                 store = $('<div/>').addClass('pane');
                 var store_hours = loc.hrsOfOperation;
                 var str1 =  $('<p/>').addClass('stores-timing');
                 var store_timings=null;
                 for (var j = 0; j < store_hours.length; j++) {
                    var storetime = store_hours[j];
                 store_timings = str1.append($('<span/>').html('<strong>' + storetime.days_short));
                        store_timings.appendTo(store);
                     }
                  $("#cncstorepane").append(store);
                  searchText=searchData;
                   }
            },
            error: function(cncStoreLocatorData) {
                    alert("can't make req");
                }

          });

Define a variable and give your ajax the same alias. Then, everytime the function is being made, you check if (in this example XHR) is null or not. If it is not, you abort() it and give it null value again.