Question

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

以下是这两个页面的代码。

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

这是静态文本。

这是动态文字。

我无法理解动态文本打印两次的原因。

提前致谢。

Answer 1

我怀疑onreadystatechange被多次调用，其中不止一个正在进行响应。请参阅What do the different readystates in XMLHttpRequest mean, and how can I use them?在您的处理程序中设置断点以进行检查。

您可能想要添加一个检查，表明响应已完成：

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        content.innerHTML += xhr.responseText;
    }
}

来自servlet的Ajax响应正在打印两次

1 个答案: