llamando a un servlet java desde javascript

Question

Estoy tratando de crear una aplicación web utilizando el patrón de diseño MVC. Para la parte de GUI me gustaría usar JavaScript. Y para el controlador Java Servlets.

Ahora nunca he trabajado realmente con JavaScript, así que estoy teniendo dificultades para averiguar cómo llamar a Java Servlet desde JavaScript y cómo obtener la respuesta del Servlet.

¿Alguien me puede ayudar?

Answer 1

¿Desea disparar Ajax llamadas al servlet? Para eso necesita el objeto XMLHttpRequest en JavaScript. Aquí hay un ejemplo compatible con Firefox:

<script> 
    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4) { 
      var data = xhr.responseText; 
      alert(data); 
     } 
    } 
    xhr.open('GET', 'myservlet', true); 
    xhr.send(null); 
</script> 

Sin embargo, esto es muy detallado y no es compatible con crossbrowser. Para la mejor forma compatible de crossbrowser de disparar solicitudes ajaxical y atravesar el árbol HTML DOM, recomiendo tomar jQuery. Aquí está una reescritura de los anteriores en jQuery:

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 
    $.get('myservlet', function(data) { 
     alert(data); 
    }); 
</script> 

De cualquier manera, el servlet en el servidor debe ser mapeada en una url-pattern de /myservlet (se puede cambiar esto a su gusto) y tener al menos doGet() implementado y escribir el los datos de 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, puede también utilizar doPost(), pero se debe usar en 'POST'xhr.open() o utilizar en lugar de $.post()$.get() en jQuery.

Luego, para mostrar los datos en la página HTML, necesita manipular el HTML DOM.Por ejemplo, usted tiene un

<div id="data"></div> 

en el HTML en el que desea mostrar los datos de respuesta, entonces puede hacerlo en lugar de alert(data) de la primera ejemplo:

document.getElementById("data").firstChild.nodeValue = data; 

En el jQuery ejemplo, usted podría hacer esto de una manera más concisa y agradable:

$('#data').text(data); 

para ir algunos pasos más allá, que le gustaría tener un formato de datos de fácil acceso para la transferencia de datos más complejas. Los formatos comunes son XML y JSON. El último es el más preferido ya que es más conciso y se puede usar tanto en Java como en JavaScript de una manera muy sencilla. En Java, puede usar Google Gson para convertir objetos de Java completos en JSON y viceversa.

List<Product> products = productDAO.list(); // Product is just a Javabean with properties `id`, `name` and `description`. 
String json = new Gson().toJson(products); 
response.setContentType("application/json"); 
response.setCharacterEncoding("UTF-8"); 
response.getWriter().write(json); 

En JavaScript se puede usar jQuery $.getJSON() de conseguirlo "al instante". Vamos a mostrarlo en un <table>.

$.getJSON('myservlet', function(data) { 
    var table = $('<table>').appendTo($('#data')); 
    $.each(data, function(i, product) { 
     var row = $('<tr>').appendTo(table); 
     $('<td>').text(product.id).appendTo(row); 
     $('<td>').text(product.name).appendTo(row); 
     $('<td>').text(product.description).appendTo(row); 
    }); 
}); 

Ver también:

• Java/JSP/JSF and JavaScript
• JavaScript tutorial
• JSON tutorial
• jQuery tutorials

Answer 2

Lo siento, leo jsp no javascript. Es necesario hacer algo como (tenga en cuenta que esta es una dirección URL relativa y puede ser diferente dependiendo de la dirección URL del documento esta javascript está en):

document.location = 'path/to/servlet'; 

Cuando el servlet-mapping en web.xml se ve algo como esto:

<servlet-mapping> 
    <servlet-name>someServlet</servlet-name> 
    <url-pattern>/path/to/servlet*</url-pattern> 
</servlet-mapping> 

Answer 3

realmente recomiendo que utilice jquery para las llamadas de JavaScript y alguna implementación de JSR311 como jersey para la capa de servicio, lo que delegar a los controladores.

Esto le ayudará con toda la lógica subyacente de manejar las llamadas HTTP y la serialización de sus datos, lo cual es de gran ayuda.

Answer 4

El código aquí se utiliza AJAX para imprimir texto en un documento HTML 5 dinámicamente (código Ajax es similar a la reserva de Internet & 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); 

Servlet código de Java:

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

<div id = "text"></div> 

EDITAR

Escribí la respuesta anterior cuando era nuevo con la programación web. Lo dejo en pie, pero la parte de javascript definitivamente debe estar en jQuery, es 10 veces más fácil que javascript sin formato.

Answer 5

function callServlet() 


{ 
document.getElementById("adminForm").action="./Administrator"; 
document.getElementById("adminForm").method = "GET"; 
document.getElementById("adminForm").submit(); 

}

<button type="submit" onclick="callServlet()" align="center"> Register</button>