Как звонить продолжает Ajax запросов в фоновом режиме, не мешая интерфейсной странице

Question

Я хочу разработать страницу отчета с продолжением ajax запросов, которая получает наборы записей для каждого вызова, чтобы завершить весь отчет, т. Е. Я хочу отобразить 1000 записей о студентах и ​​получить целые 1000 записей. делает больше время загрузки, которое необходимо избегать. поэтому я только что создал все oop из ajax запросов, которые выбирают 100 записей для каждого запроса. В этом случае браузер удерживает до отображения 1000 записей ... Я хочу избежать этого, я хочу выполнить ajax запросы в фоновом режиме, и он не должен мешать или удерживать браузер, чтобы увидеть первые 100 записей ..

   while( loop until the whole records retrived ){
    $.ajax({
    url: "/erp/reports/json/student_report/",
    type: "POST",
    dataType: "json",
    data: {class_id : id},
    success: function (json) { // retrieve 100 records  } 
    });
  }

Или скажите мне, что я подошел неправильно, можно ли добиться этого, используя реакцию, возможно?

заранее спасибо

Answer 1

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

function  clickedOrder() {
    orderPageIndex = 0;
    orderCnt = 0;
    importOrder();
}

function importOrder() {
    orderPageIndex++;

    $.ajax({
        type: 'POST',
        url: './order.php',
        async: false,
        data: {pageIndex: orderPageIndex, orderCount: orderCnt},
        success: function (result) {
            console.log(result);
            if (result.indexOf("OK") == 0 || result.indexOf("Zero") == 0) {
                alert("imported successfully");
            } else if (result.indexOf("ERROR") == 0) {
                alert("Import Failed" + result);
            } else if (result.indexOf("Order")==0) {
                var strCnt = result.substring(result.indexOf(":") + 1);
                orderCnt += strCnt*1;
                startOrderTimer();
            } else {
                alert("Import Failed" + result);
            }
        },
        error:function(error){
            alert(error);
        }
    });
}

function startOrderTimer () {
    setTimeout(stopOrderTimer,100);
}

function stopOrderTimer () {
    importOrder();
}

Answer 2

Это обеспечит вызов следующего ajax запроса сразу после завершения первого.

function fetchRecords(id){
     $.ajax({
        url: "/erp/reports/json/student_report/",
        type: "POST",
        dataType: "json",
        data: {class_id : id},
        success: function (json) {
        // retrieve 100 records 
        // DO WHAT EVER YOU WANNA DO HERE
         if(! the whole records retrived )
           fetchRecords(id)
        } 
      });
    }