0

ajax を使用してdivのコンテンツを追加するときに問題に直面しています。サーブレットからの応答が 2 回印刷されます。

両方のページのコードを次に示します。

デモ.jsp

<html>
<head>
    <script>
        function run()
        {
            var content = document.getElementById("output");
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                    content.innerHTML += xhr.responseText;
                }
                xhr.open("POST", "demo", true);
                xhr.send(null);
        }

    </script>
</head>
<body>
    <input type="submit" value="Add Content" onclick="run();"/>
    <div id="output">This is Static Text.</span><br>
    </div>
</body>

デモサーブレット

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(urlPatterns = {"/demo"})
public class Demo extends HttpServlet {

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            /* TODO output your page here. You may use following sample code. */
            out.println("This is Dynamic Text<br>");
        } finally {            
            out.close();
        }
    }
}

出力divの最終的な内容は次のとおりです。

これは静的テキストです。

これが動的テキストです。

これが動的テキストです。

ダイナミック テキストが 2 回印刷される理由がわかりません。

前もって感謝します。

4

1 に答える 1

1

onreadystatechange複数回呼び出されていると思われますが、そのうちの複数が応答を運んでいます。XMLHttpRequest のさまざまな readystates の意味と、それらをどのように使用できますか? を参照してください。 ハンドラにブレークポイントを設定して確認します。

おそらく、応答が完了したことを確認するチェックを追加する必要があります。

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        content.innerHTML += xhr.responseText;
    }
}
于 2013-05-08T19:41:38.867 に答える