Siéntete libre de compartir nuestros post y códigos con otro, danos de tu ayuda para ampliar esta comunidad.
Solución:
Entonces, ¿quieres disparar llamadas Ajax al servlet? Para eso necesitas el XMLHttpRequest objeto en JavaScript. Aquí hay un ejemplo compatible con Firefox:
Sin embargo, esto es muy detallado y no es realmente compatible con todos los navegadores. Para obtener la mejor forma compatible con todos los navegadores de activar solicitudes ajaxical y atravesar el árbol HTML DOM, recomiendo tomar jQuery. Aquí hay una reescritura de lo anterior en jQuery:
De cualquier manera, el Servlet en el servidor debe estar mapeado en un url-pattern de /myservlet (puedes cambiar esto a tu gusto) y tener al menos doGet() implementado y escriba los datos en la respuesta de la siguiente manera:
String data = "Hello World!";
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(data);
esto debería mostrar Hello World! en la alerta de JavaScript.
Por supuesto, también puede utilizar doPost()pero entonces deberías usar 'POST' en xhr.open() o usar $.post() en lugar de $.get() en jQuery.
Luego, para mostrar los datos en la página HTML, debe manipular el DOM HTML. Por ejemplo, tienes un
en el HTML donde le gustaría mostrar los datos de respuesta, puede hacerlo en lugar de alert(data) del 1er ejemplo:
document.getElementById("data").firstChild.nodeValue = data;
En el ejemplo de jQuery, podría hacer esto de una manera más concisa y agradable:
$('#data').text(data);
Para ir más allá, le gustaría tener un formato de datos de fácil acceso para transferir datos más complejos. Los formatos comunes son XML y JSON. Para obtener ejemplos más elaborados sobre ellos, diríjase a ¿Cómo usar Servlets y Ajax?
El código aquí utilizará AJAX para imprimir texto en un documento HTML5 dinámicamente (el código Ajax es similar al libro Internet y WWW (Deitel)):
Código JavaScript:
var asyncRequest;
function start()
try
asyncRequest = new XMLHttpRequest();
asyncRequest.addEventListener("readystatechange", stateChange, false);
asyncRequest.open('GET', '/Test', true); // /Test is url to Servlet!
asyncRequest.send(null);
catch(exception)
alert("Request failed");
function stateChange()
if(asyncRequest.readyState == 4 && asyncRequest.status == 200)
var text = document.getElementById("text"); // text is an id of a
text.innerHTML = asyncRequest.responseText; // div in HTML document
window.addEventListener("load", start(), false);
Código java del servlet:
public class Test extends HttpServlet
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp)
throws IOException
resp.setContentType("text/plain");
resp.getWriter().println("Servlet wrote this! (Test.java)");
documento HTML
EDITAR
Escribí la respuesta anterior cuando era nuevo con la programación web. Lo dejé reposar, pero la parte de javascript definitivamente debería estar en jQuery, es 10 veces más fácil que javascript sin formato.
Comentarios y puntuaciones del artículo
Si te gusta la idea, eres capaz de dejar una noticia acerca de qué te ha impresionado de este post.