Question

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

Answer 1

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

您应该收听jQuery允许您访问的progress XMLHttpRequest事件。示例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
  }
});

此处指向docs on XMLHttpRequest's progress event。

的链接

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

注意：

某些较旧的浏览器可能不支持progress事件。
要计算下载进度，您必须知道要下载的资源的大小，即服务器必须发送Content-length HTTP标头。如果未知大小，则无法计算进度。这就是lengthComputable事件的progress属性的用途。

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应用程序模型，该模型使用服务器端推送，客户端无需发出请求即可将数据发送到客户端

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

2 个答案: