如何在jQuery.get()中添加进度条

Question

能否通过进度条来测量jQuery.get()方法的进度？

- Omar

---

没有我所知道的，这是不可能的。 - Arun P Johny

Answer 1

在当前版本的jQuery中，这不是开箱即用的功能，但只需付出一点努力仍然可以实现。

您应该监听XMLHttpRequest的progress事件，jQuery提供了访问此事件的方法。以下是来自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属性的作用。

- Alex Shesterov

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应用程序模型，它使用服务器端推送，在此模型中，客户端无需发出请求即可向客户端发送数据。

- DGS

---

怎么做呢？如果你可以将服务器正在执行的过程分解成可以依次调用的函数，那么这可以在大多数技术上完成。这对于检索图像之类的事情可能不起作用，除非进行一些工作，但是如果您需要从数据库返回结果列表，则可以限制数据库中的结果并每次返回100个结果，而不是整个结果集，例如100000个。 - DGS

好的，你打算如何确定哪个用户下载了哪个文件？会话吗？PHP使用会话锁定，以便会话文件一次只能被一个请求使用。 - user1600124

每次只会有一个请求。当一个请求结束时，下一个请求就开始了。 - DGS

啊，我明白了。是我理解你的解决方案有误。 - user1600124

这是一个糟糕的解决方案，XHR进度事件存在的原因就在于此。 - Michael Bates

这可能不是最优雅的解决方案，但正如Alex在他的回答中所说，旧版浏览器中不存在进度事件。从外观上看，这包括IE8和9。 - DGS