无法使用 JavaScript 显示 XML 文件？答案

【问题标题】：Can't show a XML file with JavaScript?无法使用 JavaScript 显示 XML 文件？
【发布时间】：2015-05-19 14:15:05
【问题描述】：

我无法显示我的 XML response 文件，我正在使用 servlet 和 AJAX。当我点击提交按钮时，它没有显示我想要的内容。

这些是我的文件：

index.jsp

<form action="AjaxServlet" method="post">
   Nombre:
   <input type="text" name="nombre" id="nombre"/>
   <button type="submit" id="enviar" onclick="doCompletion();">
       Enviar a Servlet
   </button>
</form>
<br>
<div id="objetivo">
</div>

这是我的：ajax.js

var req;
var isIE;
function doCompletion() {
    //var url = "autocomplete?action=complete&id=";
    var nom = document.getElementById("nombre");
    var url = "AjaxServlet?nombre=" + escape(nom.value);
    req = initRequest();
    req.open("GET", url, true);
    req.onreadystatechange = callback;
    req.send(null);
}

function initRequest(){
    if (window.XMLHttpRequest) {
        if (navigator.userAgent.indexOf('MSIE') !== -1) {
            isIE = true;
        }
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        isIE = true;
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function callback() {
    if (req.readyState === 4) {
        if (req.status === 200) {
            myFuncion(req.responseXML);
        }
    }
}

function myFuncion(responseXML) {
    if (responseXML === null) {
        return false;
    } else {
        var personas = responseXML.getElementsByTagName("personas")[0];
        var objetivo = document.getElementById("objetivo");
        var p = document.createElement("p");
        for(count = 0; count < personas.childNodes.length; count++) {
            var persona = personas.childNodes[count];
            //var persona = personas.getElementsByTagName("persona")[0];
            p.appendChild(persona.childNodes[0].nodeValue);
        }
        objetivo.appendChild(p);
    }
}

这是我的 Servlet

protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
    response.setContentType("text/xml");
    response.setHeader("Cache-Control", "no-cache");

    String nombre = request.getParameter("nombre");

    Date date = new Date();
    DateFormat hourFormat = new SimpleDateFormat("HH:mm:ss");

    StringBuilder sb = new StringBuilder("");

    sb.append("<personas>");
    sb.append("<persona>");
    //sb.append(nombre).append(", son las: ").append(hourFormat.format(date));
    sb.append("Hola");
    sb.append("</persona>");
    sb.append("</personas>");

    response.getWriter().write(sb.toString());
}

这就是屏幕上显示的内容，我不知道为什么：

【问题讨论】：

你希望它显示什么？
索引文件标签<p>上的文字Hola。

标签： java javascript ajax servlets

【解决方案1】：

您需要做的是更改表单代码，因为当您点击按钮时，会执行表单的操作，而不是按钮的 onclick 事件。改成这样：

<form>
    Nombre:
    <input type="text" name="nombre" id="nombre"/>
    <button type="submit" id="enviar" onclick="doCompletion();">Enviar a Servlet</button>
</form>

或者更改按钮代码：

<form action="AjaxServlet" method="post">
    Nombre:
    <input type="text" name="nombre" id="nombre"/>
    <button id="enviar" onclick="doCompletion();">Enviar a Servlet</button>
</form>

更新：

我使用一些 jQuery 在一个工作示例中模拟了您的应用程序（我还对您的 javascript 做了一些修改）：

index.jsp：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

        <script>
            function doCompletion()
            {
                $.ajax({
                    type: 'POST',
                    url: 'AjaxServlet',
                    data: {
                        nombre: $('#nombre').val()
                    },
                    beforeSend: function () {
                    },
                    success: function (data) {
                        myFuncion(data);
                    },
                    error: function () {
                        alert('error');
                    }
                });
            }
            function myFuncion(responseXML)
            {
                var personas = responseXML.getElementsByTagName("personas")[0];
                var objetivo = document.getElementById("objetivo");
                var p = document.createElement("p");
                for(count = 0; count < personas.childNodes.length; count++)
                { 
                    var persona = personas.childNodes[count];
                    p.appendChild(persona);
                }
                objetivo.appendChild(p);
            }
        </script>
    </head>
    <body>
        Nombre:<input type="text" name="nombre" id="nombre"/>
        <button id="enviar" onclick="doCompletion();">Enviar a Servlet</button>
        <br>
        <div id="objetivo">
        </div>
    </body>
</html>

web.xml：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <servlet>
        <servlet-name>AjaxServlet</servlet-name>
        <servlet-class>AjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>AjaxServlet</servlet-name>
        <url-pattern>/AjaxServlet</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
</web-app>

小服务程序：

public class AjaxServlet extends HttpServlet {
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");

        String nombre = request.getParameter("nombre");

        Date date = new Date();
        DateFormat hourFormat = new SimpleDateFormat("HH:mm:ss");

        StringBuilder sb = new StringBuilder("");

        sb.append("<personas>");
        sb.append("<persona>");
        //sb.append(nombre).append(", son las: ").append(hourFormat.format(date));
        sb.append("["+hourFormat.format(date)+"] Hola "+nombre);
        sb.append("</persona>");
        sb.append("</personas>");

        response.getWriter().write(sb.toString());
    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }
}

输出：

享受:)

【讨论】：

你到底想完成什么？
我只是想使用 AJAX 在屏幕上显示一些文本。当他这样做时，我会制作一个动态表格。
你的第一个错误就是我上面解释的。其余的错误都在您的 javascript 代码中。我模拟了你的答案，你的 ajax 脚本看起来很乱，不能胜任。如果我是你，我会选择 jQuery#Ajax...