title: How to set my HTML Table progressively with Javascript/AJAX and Java Servlet?
body: <p>Hy everyone! I've got a problem developping a little webapp.
  The goal is to search for a specific word in files from a stating folder on the server.</p>
  
  <p>To do that, I've implemented a recursive algorithm using java.io.File and a BufferReader.
  When I get the results, I had them in a table using a script in my jsp file :</p>
  
  <pre><code>// Posting founded files in a table.
  var files = response.getElementsByTagName("file");
  // -&gt; Creating the results table.
  var table = "&lt;table width=\"100%\"&gt;\n";
  
  for (var i = 0, c = files.length; i &lt; c; i++) {
  // -&gt; 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 += "&lt;tr class=\"pair\"&gt;&lt;td&gt;&lt;a href=" + files[i].firstChild.nodeValue + " target=\"_blank\" &gt;"
                  + files[i].getAttribute("name") + "&lt;/a&gt;&lt;/td&gt;&lt;td&gt;" + nbSentence + "&lt;/td&gt;&lt;/tr&gt;\n"; }
  else { table += "&lt;tr class=\"impair\"&gt;&lt;td&gt;&lt;a href=" + files[i].firstChild.nodeValue + " target=\"_blank\" &gt;"
                  + files[i].getAttribute("name") + "&lt;/a&gt;&lt;/td&gt;&lt;td&gt;" + nbSentence + "&lt;/td&gt;&lt;/tr&gt;\n"; }
  }
  table += "&lt;/table&gt;\n";
  // -&gt; To end the procedure, we had the table to the right div.
  document.getElementById("files").innerHTML = table;
  </code></pre>
  
  <p>My problem is that with this code, all of the results are printed in one tim in the target table. I would like to see the results comming one by one, everytime a file is found in the algorithm.</p>
  
  <p>I've tried to change the readystate to "3" in the onreadystatestage function :</p>
  
  <pre><code>xhr.onreadystatechange = function() {
  if (xhr.readyState &gt;= 3 &amp;&amp; (xhr.status == 200 || xhr.status == 0)) {
      callback(xhr.responseXML);
      document.getElementById("loader").style.display = "none";
      document.getElementById("btn").value = "Search";
  } else if (xhr.readyState &lt; 3) {
      document.getElementById("loader").style.display = "inline";
      document.getElementById("btn").value = "Cancel";
  }
  };
  </code></pre>
  
  <p>But it doesn't change anything.
  Does somebody have an idea? How can I send every founded file one by one ? Do I have t do it in the servlet class ?</p>
  
  <p>The for instruction in the servlet class :</p>
  
  <pre><code>// If the input word name isn't empty, the algorithm is launched.
  if (null != wordToSearch &amp;&amp; !"".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("&lt;message&gt;").append(emptyFieldMessage).append("&lt;/message&gt;\n");
  output.append("&lt;lstFiles&gt;\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 &lt; n; i++)
  {
      output.append("&lt;file name=\"" + lstFiles.get(i) + "\" nb=\"" + lstNbApparence.get(i) + "\" &gt;").append(lstFilesPath.get(i)).append("&lt;/file&gt;\n");
  }
  output.append("&lt;/lstFiles&gt;\n");
  }
  </code></pre>
  
  <p>To be more complet, the whole script code :</p>
  
  <pre><code>&lt;script&gt;
  // Creating xhr variable.
  var xhr = null;
  
  // Creating the "Search" button function.
  function request(callback) {
  
     // "Cancel" button case.
     if (xhr &amp;&amp; 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 &gt;= 3 &amp;&amp; (xhr.status == 200 || xhr.status == 0)) {
              callback(xhr.responseXML);
              document.getElementById("loader").style.display = "none";
              document.getElementById("btn").value = "Search";
          } else if (xhr.readyState &lt; 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");
      // -&gt; Creating the results table.
      var table = "&lt;table width=\"100%\"&gt;\n";
  
      for (var i = 0, c = files.length; i &lt; c; i++) {
          // -&gt; 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 += "&lt;tr class=\"pair\"&gt;&lt;td&gt;&lt;a href=" + files[i].firstChild.nodeValue + " target=\"_blank\" &gt;"
              + files[i].getAttribute("name") + "&lt;/a&gt;&lt;/td&gt;&lt;td&gt;" + nbSentence + "&lt;/td&gt;&lt;/tr&gt;\n"; }
          else { table += "&lt;tr class=\"impair\"&gt;&lt;td&gt;&lt;a href=" + files[i].firstChild.nodeValue + " target=\"_blank\" &gt;"
              + files[i].getAttribute("name") + "&lt;/a&gt;&lt;/td&gt;&lt;td&gt;" + nbSentence + "&lt;/td&gt;&lt;/tr&gt;\n"; }
      }
      table += "&lt;/table&gt;\n";
      // -&gt; To end the procedure, we had the table to the right div.
      document.getElementById("files").innerHTML = table;
  }
  </code></pre>
  
  <p>}
     </p>
  
  <p>Thanks by advance for your help, Thomas.</p>