Индикатор выполнения AJAX на итерации массива?

Question

Я не слишком знаком с AJAX, но я уверен, что я пытаюсь сделать это возможно.

В принципе, у меня есть форма с текстовой областью, когда форма отправлена, текстовая область превращается в массив с каждой новой строкой, являющейся значением. Простой материал, теперь мой php выполняет запрос базы данных по каждому значению массива. Также просто.

Теперь, когда операция занимает некоторое время, я хочу сделать ее вызовом AJAX с помощью jquery, и для каждой итерации в массиве я хочу, чтобы он возвращал результат на мою главную страницу, а также отображал индикатор выполнения.

Так что, если моя текстовая область содержит список из 20 000 имен, а запрос - выбор возраста этих людей, вызов ajax будет разбивать текстовое поле на массив и перебирать массив. Для каждой итерации он должен выполнить запрос и отправить результат на мою главную страницу. Поэтому на моей главной странице я увижу список, который растет с течением времени.

Надеюсь, я объяснил это достаточно хорошо, мне просто нужен совет о том, с чего начать/что исследовать. Будем очень благодарны за любые примеры.

Спасибо!

Answer 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")); 

Answer 2

Запрос AJAX - это не что иное, как запрос данных с вашего сервера, как и любая HTML-страница. Единственное различие заключается в том, что вы используете Javascript и не загружаете данные в свой браузер в качестве HTML-страницы, а используете данные как-то на вашей странице.

Один из возможных способов сделать, что вы хотите следующее:

• Установите интервал с частотой обновления, которая вызывает функцию getData
• В getData вы выполняете запрос AJAX, который запрашивает кусок данных с сервера, который представляет текущее состояние. Возможно, вам захочется убедиться, что сервер возвращает только инкрементные обновления, чтобы избежать отправки больших объемов данных.
• Используйте данные на своей главной странице, открыв их дружественным образом.

Главное, чтобы помнить, что сервер должен сохранить текущее состояние (данные, которые он собрал с запросами), которые он должен вернуть в случае запроса AJAX.

Answer 3

То, что вы хотите, называется XHR2 - лично я использую додзё (додзё/запрос/XHR здесь)

Однако это должно быть возможно с JQuery, а также, поиск прогресса JQuery XHR2. ..