如何使用Javascript/AJAX和javaservlet逐步设置我的HTML表？

大家好！我在开发一个小网络应用程序时遇到了一个问题。 目标是从服务器上的stating文件夹中搜索文件中的特定单词

为此，我使用java.io.File和BufferReader实现了一个递归算法。 当我得到结果时，我使用jsp文件中的脚本将它们放在一个表中：

// Posting founded files in a table.
var files = response.getElementsByTagName("file");
// -> Creating the results table.
var table = "<table width=\"100%\">\n";

for (var i = 0, c = files.length; i < c; i++) {
// -> Building the number of apparence in each file.
var nb = files[i].getAttribute("nb");
var nbSentence = "";
if (nb == 1) { nbSentence = nb + " time in this file."; }
else { nbSentence = nb + " times in this file."; }

// Building and filling the table. 
if (i % 2 == 0) { table += "<tr class=\"pair\"><td><a href=" + files[i].firstChild.nodeValue + " target=\"_blank\" >"
                + files[i].getAttribute("name") + "</a></td><td>" + nbSentence + "</td></tr>\n"; }
else { table += "<tr class=\"impair\"><td><a href=" + files[i].firstChild.nodeValue + " target=\"_blank\" >"
                + files[i].getAttribute("name") + "</a></td><td>" + nbSentence + "</td></tr>\n"; }
}
table += "</table>\n";
// -> To end the procedure, we had the table to the right div.
document.getElementById("files").innerHTML = table;

//将创建的文件过帐到表中。
var files=response.getElementsByTagName（“文件”）；
//->创建结果表。
var table=“\n”；
for（var i=0，c=files.length；i在每个文件中构建外观的数量。
var nb=files[i].getAttribute（“nb”）；
var-nbstation=“”；
如果（nb==1）{nbstation=nb+“此文件中的时间。”；}
else{NBSENTION=nb+“此文件中的次数。”；}
//构建和填充表格。
如果（i%2==0）{table+=''+nbstatement+'\n”}
else{table+=“”+NBSENTION+“\n”；}
}
表+=“\n”；
//->为了结束这个过程，我们把表格放在右边的div。
document.getElementById（“文件”）.innerHTML=表格；

我的问题是，使用这段代码，所有结果都在目标表的一个tim中打印。我想看到的结果提交一个接一个，每次一个文件是在算法中找到

我已尝试在onreadystatestage函数中将readystate更改为“3”：

xhr.onreadystatechange = function() {
if (xhr.readyState >= 3 && (xhr.status == 200 || xhr.status == 0)) {
    callback(xhr.responseXML);
    document.getElementById("loader").style.display = "none";
    document.getElementById("btn").value = "Search";
} else if (xhr.readyState < 3) {
    document.getElementById("loader").style.display = "inline";
    document.getElementById("btn").value = "Cancel";
}
};

xhr.onreadystatechange=function（）{
如果（xhr.readyState>=3&&（xhr.status==200 | | xhr.status==0））{
回调（xhr.responseXML）；
document.getElementById（“加载器”）.style.display=“无”；
document.getElementById（“btn”）.value=“搜索”；
}否则如果（xhr.readyState<3）{
document.getElementById（“loader”）.style.display=“inline”；
document.getElementById（“btn”）.value=“取消”；
}
};

但这并没有改变任何事情。 有人有主意吗？如何逐个发送所有创建的文件？我没有在servlet类中完成它吗

servlet类中的for指令：

// If the input word name isn't empty, the algorithm is launched.
if (null != wordToSearch && !"".equals(wordToSearch))
{
lstFiles.clear();
searching(new File(contextPath), wordToSearch);

int n = lstFiles.size();
// Priting a message that indicate how many files have been found with the word to search.
emptyFieldMessage = n + " files has been found containing the word '" + wordToSearch + "'!";
output.append("<message>").append(emptyFieldMessage).append("</message>\n");
output.append("<lstFiles>\n");
// Then, files list with :
// - File path in "name" parameter,
// - Number of apparence of the word in "nb" parameter,
// - Formatted path as the value.
for(int i = 0; i < n; i++)
{
    output.append("<file name=\"" + lstFiles.get(i) + "\" nb=\"" + lstNbApparence.get(i) + "\" >").append(lstFilesPath.get(i)).append("</file>\n");
}
output.append("</lstFiles>\n");
}

//如果输入的单词名不是空的，则启动算法。
if（null！=wordToSearch&！“.equals（wordToSearch））
{
lstFiles.clear（）；
搜索（新文件（contextPath）、wordToSearch）；
int n=lstFiles.size（）；
//撬动一条消息，指示已找到多少个包含要搜索的单词的文件。
emptyFieldMessage=n+“已找到包含单词“+”wordToSearch+“！”的文件；
output.append（“”）.append（emptyFieldMessage.append（“\n”）；
output.append（“\n”）；
//然后，文件列表包含：
//-名称参数中的文件路径，
//-单词在“nb”参数中的出现次数，
//-将路径格式化为值。
对于（int i=0；i

更为完整的是，整个脚本代码：

<script>
// Creating xhr variable.
var xhr = null;

// Creating the "Search" button function.
function request(callback) {

   // "Cancel" button case.
   if (xhr && xhr.readyState != 0)
   {
       xhr.abort();
   }
   // "Search" button case.
   else
   {
       // Calling the good function from external file.
       xhr = getXMLHttpRequest();

       // Callback and loading icon management.
       xhr.onreadystatechange = function() {
        if (xhr.readyState >= 3 && (xhr.status == 200 || xhr.status == 0)) {
            callback(xhr.responseXML);
            document.getElementById("loader").style.display = "none";
            document.getElementById("btn").value = "Search";
        } else if (xhr.readyState < 3) {
            document.getElementById("loader").style.display = "inline";
            document.getElementById("btn").value = "Cancel";
        }
      };

      // Calling the Servlet in charge of the recursion algorithm.
      var input = encodeURIComponent(document.getElementById("wordName").value);
      xhr.open("GET", "/webApp_Search_Merge/ActionServlet?wordName=" + input, true);
      xhr.send(null);
      }
}

// Creating the reponse function.
function readData(response) {

if (null != response)
{
    // Posting the message include in the XML file sending back by the Servlet.
    var message = response.getElementsByTagName("message");
    document.getElementById("message").innerHTML = message[0].firstChild.nodeValue;

    // Posting founded files in a table.
    var files = response.getElementsByTagName("file");
    // -> Creating the results table.
    var table = "<table width=\"100%\">\n";

    for (var i = 0, c = files.length; i < c; i++) {
        // -> Building the number of apparence in each file.
        var nb = files[i].getAttribute("nb");
        var nbSentence = "";
        if (nb == 1) { nbSentence = nb + " time in this file."; }
        else { nbSentence = nb + " times in this file."; }

        // Building and filling the table. 
        if (i % 2 == 0) { table += "<tr class=\"pair\"><td><a href=" + files[i].firstChild.nodeValue + " target=\"_blank\" >"
            + files[i].getAttribute("name") + "</a></td><td>" + nbSentence + "</td></tr>\n"; }
        else { table += "<tr class=\"impair\"><td><a href=" + files[i].firstChild.nodeValue + " target=\"_blank\" >"
            + files[i].getAttribute("name") + "</a></td><td>" + nbSentence + "</td></tr>\n"; }
    }
    table += "</table>\n";
    // -> To end the procedure, we had the table to the right div.
    document.getElementById("files").innerHTML = table;
}

//创建xhr变量。
var xhr=null；
//创建“搜索”按钮功能。
函数请求（回调）{
//“取消”按钮盒。
如果（xhr&&xhr.readyState！=0）
{
xhr.abort（）；
}
//“搜索”按钮盒。
其他的
{
//从外部文件调用good函数。
xhr=getXMLHttpRequest（）；
//回调和加载图标管理。
xhr.onreadystatechange=函数（）{
如果（xhr.readyState>=3&&（xhr.status==200 | | xhr.status==0））{
回调（xhr.responseXML）；
document.getElementById（“加载器”）.style.display=“无”；
document.getElementById（“btn”）.value=“搜索”；
}否则如果（xhr.readyState<3）{
document.getElementById（“loader”）.style.display=“inline”；
document.getElementById（“btn”）.value=“取消”；
}
};
//调用负责递归算法的Servlet。
var input=encodeURIComponent（document.getElementById（“wordName”）.value）；
xhr.open（“GET”，“/webApp\u Search\u Merge/ActionServlet？wordName=“+input，true”）；
xhr.send（空）；
}
}
//创建响应函数。
函数读取数据（响应）{
if（null！=响应）
{
//在Servlet发回的XML文件中发布包含的消息。
var message=response.getElementsByTagName（“消息”）；
document.getElementById（“message”）.innerHTML=message[0].firstChild.nodeValue；
//将创建的文件过帐到表中。
var files=response.getElementsByTagName（“文件”）；
//->创建结果表。
var table=“\n”；
for（var i=0，c=files.length；i在每个文件中构建外观的数量。
var nb=files[i].getAttribute（“nb”）；
var-nbstation=“”；
如果（nb==1）{nbstation=nb+“此文件中的时间。”；}
else{NBSENTION=nb+“此文件中的次数。”；}
//构建和填充表格。
如果（i%2==0）{table+=''+nbstatement+'\n”}
else{table+=“”+NBSENTION+“\n”；}
}
表+=“\n”；
//->为了结束这个过程，我们把表格放在右边的div。
document.getElementById（“文件”）.innerHTML=表格；
}

}

---

提前感谢您的帮助，Thomas。

我尝试设置一个工作演示，但没有结果。我还在寻找为什么我找不到“休眠”函数的方法，并在1000毫秒后重新执行。已经找到了答案，但我认为这并不是你所期望的：

睡眠功能将杀死浏览器，甚至可能杀死机器。 Javascript是单线程的，因此在执行此操作时浏览器将阻塞 执行，循环本身将占用大量CPU。我已经 听说过一些图书馆在一个特定的环境中确实可以正常睡眠 异步方式，但我现在记不起名字了

---

这是一个非常糟糕的主意。JavaScript是单线程的，所以 for循环正在运行，其他任何东西都无法执行（js计时器、浏览器 事件，甚至大多数浏览器中的UI）。试着睡5天或更长时间 秒和浏览器w