Javascript 如何在ajax请求运行时取消请求并清除信息？

这是我的一段代码。默认情况下，“ajax\u info\u box”是隐藏的，通过单击“按钮”，“ajax\u info\u box”显示并发送请求，可能需要大约5秒钟的时间才能得到结果。如何通过单击“取消”取消并清除请求？如有任何帮助，将不胜感激

   $('.ajax_info_box').hide()
   $('.button').click(function() {
   $('.ajax_info_box').show()
    var xhr =  $.ajax({
        type: "POST",
        url: 
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
          do something here

    });
    $('.cancel').click(function () {
       suppose to kill the request here
       $('.ajax_info_box').hide()
    }); 
});

---

xhr有一个中止方法

xhr.abort()

---

此处的更多信息

即使您中止请求…服务器端处理仍将继续执行此方法似乎不适用于我，因为我使用的是jquery 1.4.4。

   $('.ajax_info_box').hide()
   $('.button').click(function() {
   $('.ajax_info_box').show()
    var xhr =  $.ajax({
        type: "POST",
        url: 
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
          do something here

    });
    $('.cancel').click(function () {
       xhr.abort();
       $('.ajax_info_box').hide()
    }); 
});