Ayuda en la programación, respuestas a preguntas / Java / ¿Cómo usar Servlets y Ajax? - Java, Ajax, JSP, servlets

¿Cómo usar Servlets y Ajax? - Java, Ajax, JSP, servlets

Soy muy nuevo en aplicaciones web y Servlets y tengo la siguiente pregunta:

Cada vez que imprimo algo dentro del servlet y lo llamo por el navegador web, devuelve una nueva página que contiene ese texto. ¿Hay alguna manera de imprimir el texto en la página actual usando Ajax?

Respuestas

500 por respuesta № 1

De hecho, la palabra clave es "ajax": JavaScript asíncrono y XML. Sin embargo, los últimos años es más que frecuente JavaScript asíncrono y JSON. Básicamente, permite que JS ejecute una solicitud HTTP asincrónica y actualice el árbol DOM de HTML en función de los datos de respuesta.

Ya que es bastante un tedioso trabajar para que funcione en todos los navegadores(especialmente Internet Explorer versus otros), hay muchas bibliotecas de JavaScript que simplifican esto en funciones individuales y cubre la mayor cantidad posible de errores / peculiaridades específicas del navegador, como jQuery, Prototipo, Mootools. Como jQuery es más popular en estos días, lo usaré en los ejemplos a continuación.

Crear un /some.jsp como a continuación (nota: el código no espera que el archivo JSP se coloque en una subcarpeta; si lo hace, modifique la URL del servlet en consecuencia):

<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 4112686</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).on("click", "#somebutton", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseText) {   // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response text...
$("#somediv").text(responseText);           // Locate HTML DOM element with ID "somediv" and set its text content with the response text.
});
});
</script>
</head>
<body>
<button id="somebutton">press here</button>
<div id="somediv"></div>
</body>
</html>

Crear un servlet con un doGet() método que se ve así:

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String text = "some text";

response.setContentType("text/plain");  // Set content type of the response so that jQuery knows what it can expect.
response.setCharacterEncoding("utf-8"); // You want world domination, huh?
response.getWriter().write(text);       // Write response body.
}

Asigne este servlet en un patrón de URL de /someservlet o /someservlet/* como se muestra a continuación (obviamente, el patrón de URL es libre de elegir, pero necesitaría modificar el someservlet URL en ejemplos de código JS en todos los lugares en consecuencia):

@WebServlet("/someservlet/*")
public class SomeServlet extends HttpServlet {
// ...
}

O bien, cuando todavía no se encuentra en un contenedor compatible con Servlet 3.0 (Tomcat 7, Glassfish 3, JBoss AS 6, etc. o más reciente), luego mapeelo en web.xml a la antigua usanza (ver también nuestra página wiki de Servlets)

<servlet>
<servlet-name>someservlet</servlet-name>
<servlet-class>com.example.SomeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>someservlet</servlet-name>
<url-pattern>/someservlet/*</url-pattern>
</servlet-mapping>

Ahora abra el http://localhost:8080/context/test.jsp en el navegador y presione el botón. Verá que el contenido del div se actualiza con la respuesta del servlet.

Volviendo `List<String>` como JSON

Con JSON en lugar de texto sin formato como formato de respuesta, puedeincluso dar algunos pasos más allá. Permite más dinámica. Primero, le gustaría tener una herramienta para convertir entre objetos Java y cadenas JSON. También hay muchos de ellos (vea la parte inferior de esta página para una visión general). Mi favorito personal es Google Gson. Descargue y coloque su archivo JAR en /WEB-INF/lib carpeta de su aplicación web.

Aquí hay un ejemplo que muestra List<String> como <ul><li>. El servlet:

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<String> list = new ArrayList<>();
list.add("item1");
list.add("item2");
list.add("item3");
String json = new Gson().toJson(list);

response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
response.getWriter().write(json);
}

El código JS:

$(document).on("click", "#somebutton", function() {  // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseJson) {    // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
var $ul = $("<ul>").appendTo($("#somediv")); // Create HTML <ul> element and append it to HTML DOM element with ID "somediv".
$.each(responseJson, function(index, item) { // Iterate over the JSON array.
$("<li>").text(item).appendTo($ul);      // Create HTML <li> element, set its text content with currently iterated item and append it to the <ul>.
});
});
});

Tenga en cuenta que jQuery analiza automáticamente la respuesta como JSON y le proporciona directamente un objeto JSON (responseJson) como argumento de función cuando establece el tipo de contenido de respuesta en application/json. Si olvida configurarlo o confía en un valor predeterminado de text/plain o text/html, entonces el responseJson el argumento no le daría un objeto JSON, sino una cadena de vainilla simple y necesitaría jugar manualmente con JSON.parse() luego, lo que es totalmente innecesario si configura el tipo de contenido en primer lugar.

Volviendo `Map<String, String>` como JSON

Aquí hay otro ejemplo que muestra Map<String, String> como <option>:

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Map<String, String> options = new LinkedHashMap<>();
options.put("value1", "label1");
options.put("value2", "label2");
options.put("value3", "label3");
String json = new Gson().toJson(options);

response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
response.getWriter().write(json);
}

Y el JSP:

$(document).on("click", "#somebutton", function() {               // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseJson) {                 // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
var $select = $("#someselect");                           // Locate HTML DOM element with ID "someselect".
$select.find("option").remove();                          // Find all child elements with tag name "option" and remove them (just to prevent duplicate options when button is pressed again).
$.each(responseJson, function(key, value) {               // Iterate over the JSON object.
$("<option>").val(key).text(value).appendTo($select); // Create HTML <option> element, set its value with currently iterated key and its text content with currently iterated item and finally append it to the <select>.
});
});
});

con

<select id="someselect"></select>

Volviendo `List<Entity>` como JSON

Aquí hay un ejemplo que muestra List<Product> en un <table> donde el Product la clase tiene las propiedades Long id, String name y BigDecimal price. El servlet:

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Product> products = someProductService.list();
String json = new Gson().toJson(products);

response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
response.getWriter().write(json);
}

El código JS:

$(document).on("click", "#somebutton", function() {        // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseJson) {          // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
var $table = $("<table>").appendTo($("#somediv")); // Create HTML <table> element and append it to HTML DOM element with ID "somediv".
$.each(responseJson, function(index, product) {    // Iterate over the JSON array.
$("<tr>").appendTo($table)                     // Create HTML <tr> element, set its text content with currently iterated item and append it to the <table>.
.append($("<td>").text(product.id))        // Create HTML <td> element, set its text content with id of currently iterated product and append it to the <tr>.
.append($("<td>").text(product.name))      // Create HTML <td> element, set its text content with name of currently iterated product and append it to the <tr>.
.append($("<td>").text(product.price));    // Create HTML <td> element, set its text content with price of currently iterated product and append it to the <tr>.
});
});
});

Volviendo `List<Entity>` como XML

Aquí hay un ejemplo que efectivamente hace lo mismocomo ejemplo anterior, pero luego con XML en lugar de JSON. Cuando use JSP como generador de salida XML, verá que es menos tedioso codificar la tabla y todo. JSTL es mucho más útil de esta manera, ya que puede usarlo para iterar sobre los resultados y realizar el formateo de datos del lado del servidor. El servlet:

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Product> products = someProductService.list();

request.setAttribute("products", products);
request.getRequestDispatcher("/WEB-INF/xml/products.jsp").forward(request, response);
}

El código JSP (nota: si pones el <table> en un <jsp:include>, puede ser reutilizable en otro lugar en una respuesta que no sea ajax):

<?xml version="1.0" encoding="utf-8"?>
<%@page contentType="application/xml" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<data>
<table>
<c:forEach items="${products}" var="product">
<tr>
<td>${product.id}</td>
<td><c:out value="${product.name}" /></td>
<td><fmt:formatNumber value="${product.price}" type="currency" currencyCode="USD" /></td>
</tr>
</c:forEach>
</table>
</data>

El código JS:

$(document).on("click", "#somebutton", function() {             // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
$.get("someservlet", function(responseXml) {                // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response XML...
$("#somediv").html($(responseXml).find("data").html()); // Parse XML, find <data> element and append its HTML to HTML DOM element with ID "somediv".
});
});

Probablemente ya se dará cuenta de por qué XML es tan importantemás potente que JSON para el propósito particular de actualizar un documento HTML usando Ajax. JSON es divertido, pero después de todo, generalmente solo es útil para los llamados "servicios web públicos". Marcos MVC como JSF usa XML debajo de las cubiertas para su magia ajax.

Ajaxificar un formulario existente

Puedes usar jQuery $.serialize() para ajaxificar fácilmente los formularios POST existentes sinjugueteando con la recopilación y el paso de los parámetros de entrada del formulario individual. Asumiendo un formulario existente que funciona perfectamente bien sin JavaScript / jQuery (y así se degrada con gracia cuando el usuario final tiene JavaScript deshabilitado):

<form id="someform" action="someservlet" method="post">
<input type="text" name="foo" />
<input type="text" name="bar" />
<input type="text" name="baz" />
<input type="submit" name="submit" value="Submit" />
</form>

Puede mejorarlo progresivamente con ajax de la siguiente manera:

$(document).on("submit", "#someform", function(event) {
var $form = $(this);

$.post($form.attr("action"), $form.serialize(), function(response) {
// ...
});

event.preventDefault(); // Important! Prevents submitting the form.
});

En el servlet puede distinguir entre solicitudes normales y solicitudes ajax como se muestra a continuación:

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String foo = request.getParameter("foo");
String bar = request.getParameter("bar");
String baz = request.getParameter("baz");

boolean ajax = "XMLHttpRequest".equals(request.getHeader("X-Requested-With"));

// ...

if (ajax) {
// Handle ajax (JSON or XML) response.
} else {
// Handle regular (JSP) response.
}
}

los plugin jQuery Form hace menos o más lo mismo que el ejemplo anterior de jQuery, pero tiene soporte transparente adicional para multipart/form-data formularios según lo requerido por la carga de archivos.

Envío manual de parámetros de solicitud al servlet

Si no tiene un formulario, pero solo desea interactuar con el servlet "en segundo plano" mediante el cual desea PUBLICAR algunos datos, puede usar jQuery $.param() para convertir fácilmente un objeto JSON en una cadena de consulta codificada en URL.

var params = {
foo: "fooValue",
bar: "barValue",
baz: "bazValue"
};

$.post("someservlet", $.param(params), function(response) {
// ...
});

Lo mismo doPost() método como se muestra aquí arriba puede ser reutilizado. Tenga en cuenta que la sintaxis anterior también funciona con $.get() en jQuery y doGet() en servlet

Envío manual de objetos JSON al servlet

Sin embargo, si tiene la intención de enviar el objeto JSON como un todo en lugar de como parámetros de solicitud individuales por alguna razón, entonces necesitaría serializarlo en una cadena usando JSON.stringify() (no forma parte de jQuery) e indique a jQuery que establezca el tipo de contenido de la solicitud en application/json en lugar de (predeterminado) application/x-www-form-urlencoded. Esto no se puede hacer a través de $.post() función de conveniencia, pero debe hacerse a través de $.ajax() como a continuación.

var data = {
foo: "fooValue",
bar: "barValue",
baz: "bazValue"
};

$.ajax({
type: "POST",
url: "someservlet",
contentType: "application/json", // NOT dataType!
data: JSON.stringify(data),
success: function(response) {
// ...
}
});

Tenga en cuenta que muchos entrantes se mezclan contentType con dataType. los contentType representa el tipo de solicitud cuerpo. los dataType representa el tipo (esperado) de respuesta body, que generalmente es innecesario ya que jQuery ya lo detecta automáticamente en función de las respuestas Content-Type encabezamiento.

Luego, para procesar el objeto JSON en elservlet que no se envía como parámetros de solicitud individuales, sino como una cadena JSON completa de la manera anterior, solo necesita analizar manualmente el cuerpo de la solicitud usando una herramienta JSON en lugar de usar getParameter() La forma habitual. A saber, los servlets no son compatibles application/json solicitudes formateadas, pero solo application/x-www-form-urlencoded o multipart/form-data solicitudes formateadas Gson también admite el análisis de una cadena JSON en un objeto JSON.

JsonObject data = new Gson().fromJson(request.getReader(), JsonObject.class);
String foo = data.get("foo").getAsString();
String bar = data.get("bar").getAsString();
String baz = data.get("baz").getAsString();
// ...

Tenga en cuenta que todo esto es más torpe que simplemente usar $.param(). Normalmente, quieres usar JSON.stringify() solo si el servicio objetivo es p. un servicio JAX-RS (RESTful) que por alguna razón solo es capaz de consumir cadenas JSON y no parámetros de solicitud regulares.

Enviar una redirección desde servlet

Es importante darse cuenta y comprender que cualquier sendRedirect() y forward() la llamada del servlet en una solicitud ajax solo reenviaría o redirigiría la solicitud ajax en sí y no el documento / ventana principal donde se originó la solicitud ajax. JavaScript / jQuery en ese caso solo recuperaría la respuesta redirigida / reenviada como responseText variable en la función de devolución de llamada. Si representa una página HTML completa y no una respuesta XML o JSON específica de ajax, entonces todo lo que puede hacer es reemplazar el documento actual con ella.

document.open();
document.write(responseText);
document.close();

Tenga en cuenta que esto no cambia la URL como usuario finalve en la barra de direcciones del navegador. Por lo tanto, hay problemas con la posibilidad de marcar. Por lo tanto, es mucho mejor devolver una "instrucción" para que JavaScript / jQuery realice una redirección en lugar de devolver todo el contenido de la página redirigida. P.ej. devolviendo un booleano o una URL.

String redirectURL = "http://example.com";

Map<String, String> data = new HashMap<>();
data.put("redirect", redirectURL);
String json = new Gson().toJson(data);

response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
response.getWriter().write(json);

function(responseJson) {
if (responseJson.redirect) {
window.location = responseJson.redirect;
return;
}

// ...
}

Ver también:

12 para la respuesta № 2

La forma correcta de actualizar la página que se muestra actualmente en el navegador del usuario (sin volver a cargarla) es tener algún código ejecutándose en el navegador para actualizar el DOM de la página.

Ese código es típicamente javascript que esincrustado o vinculado desde la página HTML, de ahí la sugerencia de AJAX. (De hecho, si suponemos que el texto actualizado proviene del servidor a través de una solicitud HTTP, este es el clásico AJAX).

También es posible implementar este tipo deusando un complemento o complemento de navegador, aunque puede ser complicado para un complemento acceder a las estructuras de datos del navegador para actualizar el DOM. (Los complementos de código nativo normalmente escriben en algún marco gráfico que está incrustado en la página).

10 para la respuesta № 3

Te mostraré un ejemplo completo de servlet y cómo llamar a ajax.

Aquí, vamos a crear el ejemplo simple para crear el formulario de inicio de sesión con servlet.

index.html

<form>
Name:<input type="text" name="username"/><br/><br/>
Password:<input type="password" name="userpass"/><br/><br/>
<input type="button" value="login"/>
</form>

Aquí está la muestra ajax

       $.ajax
({
type: "POST",
data: "LoginServlet="+name+"&name="+type+"&pass="+password,
url: url,
success:function(content)
{
$("#center").html(content);
}
});

Código de servlet de LoginServlet: -

    package abc.servlet;

import java.io.File;


public class AuthenticationServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

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

protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {

try{
HttpSession session = request.getSession();
String username = request.getParameter("name");
String password = request.getParameter("pass");

/// Your Code
out.println("sucess / failer")
} catch (Exception ex) {
// System.err.println("Initial SessionFactory creation failed.");
ex.printStackTrace();
System.exit(0);
}
}
}

5 para la respuesta № 4

$.ajax({
type: "POST",
url: "url to hit on servelet",
data:   JSON.stringify(json),
dataType: "json",
success: function(response){
// we have the response
if(response.status == "SUCCESS"){
$("#info").html("Info  has been added to the list successfully.<br>"+
"The  Details are as follws : <br> Name : ");

}else{
$("#info").html("Sorry, there is some thing wrong with the data provided.");
}
},
error: function(e){
alert("Error: " + e);
}
});

5 para la respuesta № 5

Ajax (también AJAX) un acrónimo de AsynchronousJavaScript y XML) es un grupo de técnicas de desarrollo web interrelacionadas que se utilizan en el lado del cliente para crear aplicaciones web asincrónicas. Con Ajax, las aplicaciones web pueden enviar datos a un servidor y recuperarlos de forma asíncrona. A continuación se muestra el código de ejemplo:

Función de script java de la página Jsp para enviar datos al servlet con dos variables firstName y lastName:

function onChangeSubmitCallWebServiceAJAX()
{
createXmlHttpRequest();
var firstName=document.getElementById("firstName").value;
var lastName=document.getElementById("lastName").value;
xmlHttp.open("GET","/AJAXServletCallSample/AjaxServlet?firstName="
+firstName+"&lastName="+lastName,true)
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.send(null);

}

Servlet para leer el envío de datos a jsp en formato xml (también puede usar texto. Solo necesita cambiar el contenido de la respuesta al texto y representar los datos en la función javascript).

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String firstName = request.getParameter("firstName");
String lastName = request.getParameter("lastName");

response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<details>");
response.getWriter().write("<firstName>"+firstName+"</firstName>");
response.getWriter().write("<lastName>"+lastName+"</lastName>");
response.getWriter().write("</details>");
}

3 para la respuesta № 6

Normalmente no puede actualizar una página desde un servlet. El cliente (navegador) tiene que solicitar una actualización. El cliente Eiter carga una página completamente nueva o solicita una actualización de una parte de una página existente. Esta técnica se llama Ajax.

3 para la respuesta № 7

Usando bootstrap multi select

Ajax

function() { $.ajax({
type : "get",
url : "OperatorController",
data : "input=" + $("#province").val(),
success : function(msg) {
var arrayOfObjects = eval(msg);
$("#operators").multiselect("dataprovider",
arrayOfObjects);
// $("#output").append(obj);
},
dataType : "text"
});}
}

En servlet