Làm cách nào để có thanh tiến trình trong jQuery.get()

Question

có thể có thanh tiến trình đo tiến trình jQuery.get() không?

Answer 1

này không được đưa ra ngoài hộp trong phiên bản hiện tại của jQuery, nhưng vẫn có thể với ít nỗ lực.

Bạn nên nghe sự kiện progress của số XMLHttpRequest mà jQuery cung cấp cho bạn quyền truy cập. Ví dụ: from Dave Bond's blog:

$.ajax(
{ 
    type: 'POST', // 'POST' here so that _upload_ progress _also_ makes sense; 
       // Change to 'GET' if you need. 
    url: "/", data: {}, 
    beforeSend: function(XMLHttpRequest) 
    { 
    //Upload progress 
    XMLHttpRequest.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with upload progress 
     } 
    }, false); 

    //Download progress 
    XMLHttpRequest.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with download progress 
     } 
    }, false); 
    }, 

    success: function(data){ 
    // successful completion handler 
    } 
}); 

Đây là liên kết đến docs on XMLHttpRequest's progress event.

Bạn cũng có thể muốn xem một số jquery.ajax-progress plugin để tránh tự mình thực hiện.

---

Ghi chú:

• Một số trình duyệt cũ có thể không hỗ trợ các sự kiện progress.

• Để tính tiến độ tải xuống, bạn phải biết kích thước tài nguyên cần tải xuống, tức là máy chủ phải gửi tiêu đề HTTP Content-length. Nếu không biết kích thước, thì không thể tính tiến độ. Đây là nội dung của thuộc tính lengthComputable của sự kiện progress.

Answer 2

Nếu bạn có thể chia công việc mà máy chủ xử lý thành các khối xử lý, bạn có thể thực hiện cuộc gọi phản hồi của máy chủ khác $.get() và cập nhật thanh tiến trình theo cách đó.

function get_chunk(chunk_number, max_chunks){ 
    $.get('eg.php?chunk=' + chunk_number, function(){ 
     chunk_number++; 
     if(chunk_number < max_chunks){ 
      get_chunk(chunk_number, max_chunks) 
     } 
     update_status_bar(chunk_number, max_chunks); 
    } 
} 

Nếu không, bạn sẽ phải nhìn vào một mô hình ứng dụng web như Comet trong đó sử dụng phía máy chủ đẩy hợp khách hàng không phải thực hiện một yêu cầu để cho dữ liệu được gửi cho khách hàng