数组迭代的AJAX进度条？答案

【问题标题】：AJAX progress bar on array iteration?数组迭代的AJAX进度条？
【发布时间】：2014-02-14 14:08:57
【问题描述】：

我对 AJAX 不太熟悉，但我确信我正在尝试做的事情是可能的。

基本上我有一个带有文本区域的表单，当表单被提交时，文本区域被制成一个数组，每个新行都是一个值。简单的东西，现在我的 php 对每个数组值执行数据库查询。也很简单。

现在，由于操作需要一段时间，我想使用 jquery 将其转换为 AJAX 调用，并且对于数组上的每次迭代，我希望它在我的主页上显示结果并显示进度条。

因此，如果我的文本区域包含 20,000 个姓名的列表，并且查询是获取这些人的年龄，则 ajax 调用会将文本区域拆分为一个数组并迭代该数组。对于每次迭代，它应该执行查询并将结果发送到我的主页。所以在我的主页上，我会看到一个随时间增长的列表。

我希望我已经解释得足够好，我只需要关于从哪里开始/研究什么的建议。任何示例将不胜感激。

谢谢！

【问题讨论】：

A simple fiddle that might help.

标签： javascript php jquery ajax arrays

【解决方案1】：

由于 ajax 只是对数据的请求，因此您无法轻松创建可靠的加载栏。

但是，如果您按照问题中的建议执行大量请求，“顺便说一句，这不是最好的主意”。

您可以执行以下代码。同样它非常基本，但会给您的用户一个粗略的想法。我在此处为您提供了一个小提琴http://jsfiddle.net/6dgAF/ 这是一个基本示例，但应该给您一个起点。

function Status(data)
{
    this.data = data;
    this.size = this.data.length;
    this.current = 0;
    this.bar = $("#bar");
    //Get width of each step of load
    this.step = (this.bar.width() / this.size) ;
    for(var i =0; i < this.size; i++){
     this.getData(this.data[i]);   
    }

}
Status.prototype.getData = function(string){
    //run your ajax here on each string and on success do this

    //$.get( "ajax/test.html", function( string ) {
         //this.current++;
          //this.updateBar();
        //});
    this.current++;
    this.updateBar();
}
Status.prototype.updateBar = function(){
    //updates the bar with the current count * step width;
    $("span",this.bar).width(this.step*this.current);
}

//Init object and put in dummy data
var status = new Status(new Array("string1","string2","string3","string4","string5","string6","string7","string8","string9","string10"));

【讨论】：

【解决方案2】：

AJAX 请求只不过是从您的服务器请求数据，就像任何 HTML 页面一样。唯一的区别是您使用 Javascript，并且不会将数据作为 HTML 页面提供给浏览器，而是以某种方式在您的页面上使用数据。

一种可能的方式来做你想做的事情如下：

设置刷新率的间隔，调用函数getData
在getData 中，您执行一个AJAX 请求，该请求从服务器请求一条数据，表示当前状态。您可能希望确保服务器只返回增量更新，以避免发送大量数据
使用首页上的数据，以友好的方式向用户显示。

要记住的主要事情是服务器必须保存它的当前状态（它通过查询收集的数据），它必须在发生 AJAX 请求时返回。

【讨论】：

【解决方案3】：

你想要的叫做 XHR2 - 我个人使用的是 dojo （这里是dojo/request/xhr）

不过 jQuery 也应该可以，搜索 jQuery XHR2 progress ...

【讨论】：