我希望实现以下功能:
第一个 AJAX 请求启动将数据导入到 MS SQL 数据库的过程。数据库中有一个包含有关导入的一些数据的表(总记录数、处理记录数、开始时间等)。在导入期间,表中的数据会不断更新。
第二个 AJAX 请求应该每 5 秒从表中获取更新后的数据,并以某种通知形式显示在页面上。
我面临的问题是:第一个请求开始后,需要几分钟才能执行完。同时,第二个请求每隔 5 秒钟被调用一次,但所有请求都要等到第一个请求完成后才会执行,它们都排队并具有“挂起”状态。我无法弄清楚问题所在。看起来我无法在第一个请求的 TTFB 期间启动第二个 AJAX 请求。
我还尝试使用 jQuery.when() 和 jQuery.then(),但我不知道如何在 jQuery.when() 中使用间隔进行 AJAX 调用。有没有办法实现我想要的功能?
这是我的代码,RunImport 函数在导入按钮单击时调用:
第二个 AJAX 请求应该每 5 秒从表中获取更新后的数据,并以某种通知形式显示在页面上。
我面临的问题是:第一个请求开始后,需要几分钟才能执行完。同时,第二个请求每隔 5 秒钟被调用一次,但所有请求都要等到第一个请求完成后才会执行,它们都排队并具有“挂起”状态。我无法弄清楚问题所在。看起来我无法在第一个请求的 TTFB 期间启动第二个 AJAX 请求。
我还尝试使用 jQuery.when() 和 jQuery.then(),但我不知道如何在 jQuery.when() 中使用间隔进行 AJAX 调用。有没有办法实现我想要的功能?
这是我的代码,RunImport 函数在导入按钮单击时调用:
var resultCheck, resultRun, intervalId = 0;
$(document).ready(function () {
CheckActiveImports();
});
function CheckActiveImports() {
var jqXHR = $.ajax({
url: "exhaust.aspx/GetRunningImports",
async:true,
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function(){
$('#output').html("Checking for running imports...");
},
success: OnCheckSuccess,
failure: function (result) {
resultCheck = "Failure: " + result.responseText;
},
error: function (result) {
resultCheck = "Error: " + result.responseText;
},
complete: function () {
$('#output').html(resultCheck);
}
});
return jqXHR;
}
function OnCheckSuccess(result)
{
var data = result.d; //JSON.parse(result).d;
if (data.length) {
var res = "";
for (var x in data) {
var format = 'Job running: ' + data[x].JobType + '. ' + data[x].Counter + ' of ' + data[x].Total + ' records processed<br /> \
Speed: ' + data[x].Speed + ' records per minute. \
Estimated time of completion: ' + data[x].EstTime + '.';
res += format;
}
resultCheck = res;
}
else {
resultCheck = 'Currently there are no jobs running.';
}
}
function RunImport()
{
intervalId = window.setInterval(CheckActiveImports, 5000);
RunImportAjax();
}
function RunImportDeferred() {
var RunImportXHR = RunImportAjax(),
CheckImportXHR = CheckActiveImports();
$.when(RunImportXHR, CheckImportXHR).then(function () {
$('#output').html(resultCheck);
$('#output2').html(resultRun);
});
}
function RunImportAjax() {
var jqXHR = $.ajax({
url: "exhaust.aspx/RunImport",
async:true,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$('#output2').html("Running import...");
},
success: function (result) {
window.clearInterval(intervalId);
var data = result.d;
if (data.length) {
var res = "";
for (var x in data) {
var format = 'Job finished: ' + data[x].JobType + '. ' + data[x].Counter + ' records processed.<br />';
res += format;
}
resultRun = res;
}
},
failure: function (result) {
resultRun = "Failure: " + result.responseText;
},
error: function (result) {
resultRun = "Error: " + result.responseText;
},
complete: function () {
$('#output2').html(resultRun);
}
});
return jqXHR;
}