CODEWITHSUNDEEP
javajavascriptajaxservlets
Chomboreco
Chomboreco

Reputation: 87

Can't show a XML file with JavaScript?

I can't show my XML response file, I'm using servlets and AJAX. When I click on the submit button, it does not show what I want.

These are my files:

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>

This is my: 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);
    }
}

This is my 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());
}

And this is what shows on the screen, and I don't know why: This is what show on the screen

Upvotes: 1

Views: 69

Answers (1)

MaVRoSCy
MaVRoSCy

Reputation: 17849

What you need to do is change your form code, because when you hit the button the form's action is performed and not the onclick event of the button. Change it like this:

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

Or change the button code:

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

UPDATE:

I have simulated your application in a working example with the use of some jQuery (I also did some modifications on your 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>

Servlet:

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);
    }
}

Output:

Output

Enjoy :)

Upvotes: 2

Related Questions