Question

大家好！我在开发一个小的webapp时遇到了问题。目标是从服务器上的说明文件夹中搜索文件中的特定单词。

为此，我使用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;

我的问题是，使用此代码，所有结果都会在目标表中的一个时间内打印出来。我希望每次在算法中找到一个文件时，结果会逐一显示。

我试图在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";
}
};

但它没有改变任何东西。有人有想法吗？如何逐个发送每个创建的文件？我是否在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");
}

要更完整，整个脚本代码：

<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;
}

}

感谢您的帮助，托马斯。

Answer 1

我尝试设置一个工作演示，但没有结果。我也在搜索为什么我找不到“睡眠”function的方法，并在1000毫秒之后重新执行或者你想要的任何东西。已经找到了答案，但我认为这并不是你所期望的那样：

睡眠功能会杀死浏览器，也可能会杀死机器。   Javascript是单线程的，因此浏览器会在此时阻塞   执行，循环本身将占用大量的CPU。我有   听说过一些实际上正确睡眠的图书馆   异步方式，但我现在不记得这个名字了。


这是一个非常糟糕的主意。 JavaScript是单线程的，所以那时   for循环运行没有别的可以执行（js计时器，浏览器   事件，甚至大多数浏览器中的UI）。试着睡5个或更多   几秒钟，浏览器甚至会警告用户脚本是   慢慢地跑。

只需使用setTimeout。

还在 Native Javascript 中谈到睡眠功能。它似乎就像一个框架或类似的东西。您可以下载并自行尝试。我不能说这个，因为我从未测试过，这正是我在互联网上发现的。

我很抱歉给你带来坏消息。

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

1 个答案: