Gửi AJAX đến máy chủ trước khi tải

Question

So supposedly starting at Firefox > 4, ràng buộc cửa sổ Đối tượng jQuery đến beforeunload không hoạt động nữa.

Điều tôi muốn làm là gửi một bài đăng AJAX để xóa dữ liệu memcache của máy chủ của tôi.

Khi tôi làm mới tab chỉ mở, tôi có thể thấy rằng sự kiện beforeunload được gọi trong cả firefox và chrome bằng mã sau được minh chứng bằng thông báo console.log, "firefox/NON-firefox delete". Vấn đề là tôi không bao giờ thấy thông báo console.log "memcache delete" chỉ ra rằng máy chủ của tôi không bao giờ thấy yêu cầu $.ajax.

Tôi nhận thấy việc đánh hơi trình duyệt là rất tệ và không có sự khác biệt giữa những gì được bao gồm trong câu lệnh if và else. Tôi chỉ đang hiển thị mã cho những gì tôi đã thử không thành công trong Firefox.

Bất kỳ ai có ý tưởng nào?

$(window).bind('beforeunload', function(){ 
    if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) { 
    console.log('firefox delete'); 
    memcacheDelete(); 
    return null; 
    } 
    else { 
    console.log('NON-firefox delete'); 
    memcacheDelete(); 
    return null; 
    } 
}); 

function memcacheDelete() { 
    $.ajax({ 
     url: "/memcache/delete", 
     type: "post", 
     data:{}, 
     success:function(){ 
      console.log('memcache deleted'); 
     }//success 
    }); //ajax 
} 

Answer 1

Ajax không đồng bộ.

Khi bạn làm mới (hoặc đóng) trình duyệt của mình, beforeunload đang được gọi. Và nó có nghĩa là ngay sau khi beforeunload hoàn tất việc thực thi, trang sẽ làm mới (hoặc đóng).

Khi bạn thực hiện yêu cầu ajax, (vì trình thông dịch javascript không đồng bộ) của nó không chờ sự kiện ajax success được thực hiện và di chuyển xuống hoàn thành việc thực thi beforeunload.

success của ajax được cho là sẽ được gọi sau vài giây, nhưng bạn không thấy nó khi trang đã được làm mới/đóng.

Side lưu ý:

.success() phương pháp được chấp nhận và được thay thế bằng phương pháp .done()

Reference

Answer 2

Chỉ vì hoàn thành, đây là những gì tôi đã làm, nhờ @Jashwant để được hướng dẫn: Tôi nhận thấy rằng this other SO Q&A suggested the same solution. Điều quan trọng là các async:true(false) trong $.ajax cuộc gọi dưới đây:

$(window).bind('beforeunload', function(){ 
    if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) { 
    console.log('firefox delete'); 
    var data={async:false}; 
    memcacheDelete(data); 
    return null; 
    } 
    else { 
    console.log('NON-firefox delete'); 
    var data={async:true}; 
    memcacheDelete(data); 
    return null; 
    } 
}); 

function memcacheDelete(data) { 
    $.ajax({ 
    url: "/memcache/delete", 
    type: "post", 
    data:{}, 
    async:data.async, 
    success:function(){ 
     console.log('memcache deleted'); 
    }//success 
    }); //ajax 
}