显示加载百分比


PHP - Displaying percentage loaded

我一直在搜索和操纵一些xhr ajax的东西,但我仍然没有找到任何解决方案。

我所拥有的是在jQuery的AJAX中加载的内容。我要做的是显示一个百分比加载器。我已经设置了beforeSend加载图标,但由于我有很多数据(文本),我的客户认为它卡住了…

我已经尝试过这个,这个,但它只显示百分比当一切都已经加载(所以它显示100%),但这是因为客户端-服务器之间的通信不是持久的我猜。

是否有一种方法来做到这一点使用PHP和jQuery ?如果没有,我该怎么做呢?

下面是我的代码:

$.ajax({
    url: ajax_var.url,
    type: 'POST',
    data: dataString,
    beforeSend: function() {
        $("#loader").html("<i class='loading icon'></i> Loading...");
    },
    success: function(data) {
        $("#loaded_data").html(data);
    },
    error: function(e) {
        console.log(e);
    }
});

谢谢

简短的回答是:不。长的答案是——是的,但前提是你做了大量的工作,并且你了解幕后发生的事情。

AJAX在HTTP上工作,我们知道HTTP是无状态协议。这意味着一旦你要了什么,你就会得到它。不管它的大小。你不会以这样一种方式得到响应,你可以计算有多少数据(服务器必须告诉content-length是什么)。

换句话说,无论响应是1个字符还是1TB的数据,都是一样的。您请求它,直到它返回—您不能与数据交互。这就是为什么你不能显示任何形式的单个请求的进度条,这就是为什么它只在100%加载时才出现。你可以显示加载图标,并在所有东西到达后删除它,就是这样。

这个问题的解决方案在于执行多个请求。这个工作流的一个例子是:

  • 向服务器询问内容的长度
  • 分块内容。如果要传输的文本长度为10KB,则将内容分成10个块
  • 向服务器请求每个数据块
  • 每一块内容代表10%
  • 当块到达时,以相同的百分比增加加载器
  • 一旦数据到达,将其合并并显示给用户

(注意- 10KB的例子作为一个例子来解释这个原理,这绝不是任何形式的建议,将10KB的数据块分成10个请求,每个请求1kb)。

这种方法的缺点是,当然,你通过发出多个请求来强调服务器,并且你依赖于客户端将数据"组装"成有意义的东西。

还有其他的方法,但是如果你需要AJAX和普通的jQuery -你没有太多的选择。