nhiều hoạt động sử dụng jquery ajax

Question

Tôi muốn thực hiện một hoạt động và đồng thời hiển thị các tiến bộ trong HTML5 và JavaScript. Kể từ khi tôi đang sử dụng trình duyệt IE 8, yếu tố <progress> không được hỗ trợ, cách tiếp cận tôi nghĩ đến là sử dụng một phương pháp jQuery AJAX như thế này:

<div class="progress-bar" role="progressbar" id="id" aria-valuemin="0" aria-valuemax="100"> 
    <span class="sr-only">Complete</span> 
</div> 

$(document).ready(function(){ 
    $("button").click(function(){ 
     $.ajax({ 
      url: "Perform a server side operation", 
      success: function(result){ 
       ProgressBarUpdate(20); 
      } 
     }); 
    }); 
}); 

var ProgressBarUpdate = function(value) { 
    value = value + 10; 
    $("#id").css("width", value +"%"); 
} 

Nhưng vấn đề ở đây là làm thế nào để thực hiện các hoạt động và cập nhật thanh tiến trình đồng thời? Bởi vì sau khi đến success: một phần của yêu cầu AJAX, trực tiếp hiển thị tiến trình 100% không có ý nghĩa. Có cách tiếp cận nào khác có sẵn cho việc này không?

Answer 1

Giả sử các hoạt động đang diễn ra phía máy chủ, tôi biết hai cách tiếp cận.

Polling

này sẽ diễn ra với một ajax khác nhau

setInterval(function(){ 
    $.ajax("checkprogress.url", function(data){ 
     $('.progress-bar').val(data); 
}, 1000); 

Về cơ bản, bạn sẽ thăm dò ý kiến ​​một dịch vụ server-side/script/mã mỗi khoảng thời gian và phản ứng sẽ chứa các tiến bộ hiện tại . Sau đó, bạn sẽ cập nhật thanh tiến trình.

WebSockets

phương pháp khác là sử dụng một khuôn khổ web-socket mà sẽ cho phép bạn đẩy nội dung (thông tin cập nhật tiến bộ) và/hoặc thực hiện một remote procedure call cho khách hàng conected trong thời gian thực.

Hai khuôn khổ như vậy là SignalR và socket.io