如何在jQuery.get（）中有一个进度条

Question

是否可以有一个测量jQuery.get（）进度的进度条？

Answer 1

在当前版本的jQuery中，这不是开箱即用的，但仍然可以轻松完成。

您应该监听jQuery允许您访问的XMLHttpRequest的progress事件。 Dave Bond博客的一个例子：

$.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
  }
});

这里是关于XMLHttpRequest的progress事件的文档的链接。

您可能还想查看jquery.ajax-progress插件以避免自己动手。

---

笔记：

• 某些旧版浏览器可能不支持progress事件。

• 要计算下载进度，您必须知道要下载的资源的大小，即服务器必须发送Content-length HTTP标头。 如果未知大小，则无法计算进度。 这就是progress事件的lengthComputable属性。

Answer 2

如果您能够将服务器正在处理的任务划分为多个处理块，您可以使服务器响应调用另一个$.get()并以此方式更新进度条。

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);
    }
}

否则，你将不得不研究像Comet这样的Web应用程序模型，它使用服务器端推送，客户端不必发出请求，以便将数据发送到客户端