0

我在使用 ajax 附加div的内容时遇到问题。来自 servlet 的响应打印两次。

这是两个页面的代码。

演示.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>

DemoServlet

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的最终内容是：

这是静态文本。

这是动态文本。

这是动态文本。

我无法理解为什么动态文本要打印两次。

提前致谢。

4

1 回答 1

1

我怀疑onreadystatechange被多次调用，其中不止一个正在携带响应。请参阅XMLHttpRequest 中不同的就绪状态是什么意思，以及如何使用它们？ 在您的处理程序中放置一个断点以进行检查。

您可能想要添加一个检查响应是否完整：

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