Te doy la bienvenida a nuestra web, ahora hallarás la respuesta a lo que estás buscando.

Solución:

De hecho, la palabra clave es “ajax”: JavaScript y XML asíncronos. Sin embargo, los últimos años es más que a menudo JavaScript asincrónico 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.

Dado que es un trabajo bastante tedioso hacer que funcione en todos los navegadores (especialmente Internet Explorer en comparación con otros), hay muchas bibliotecas de JavaScript que simplifican esto en funciones únicas y cubren la mayor cantidad posible de errores / peculiaridades específicas del navegador debajo de las campanas. , como jQuery, Prototype, Mootools. Dado que jQuery es el más popular en estos días, lo usaré en los siguientes ejemplos.

Regreso del ejemplo de Kickoff `String` como texto sin formato

Crear un /some.jsp como a continuación (nota: los fragmentos de código en esta respuesta no esperan que el archivo JSP se coloque en una subcarpeta; si lo hace, modifique la URL del servlet en consecuencia de "someservlet" para "$pageContext.request.contextPath/someservlet"; simplemente se omite de los fragmentos de código por brevedad):



    
        SO question 4112686

Crea 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 su elección, pero debe modificar el someservlet URL en ejemplos de código JS en todos los lugares en consecuencia):

package com.example;

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

O, cuando aún no esté en un contenedor compatible con Servlet 3.0 (Tomcat 7, Glassfish 3, JBoss AS 6, etc. o más reciente), entonces mapeelo en web.xml a la antigua (consulte también nuestra página wiki de Servlets):


    someservlet
    com.example.SomeServlet


    someservlet
    /someservlet/*

Ahora abra 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.

Regresando `List` como JSON

Con JSON en lugar de texto sin formato como formato de respuesta, incluso puede avanzar algunos pasos. 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 (consulte la parte inferior de esta página para obtener una descripció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 como

. El servlet:

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
    List 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 = $("").appendTo($("#somediv")); // Create HTML  element and append it to HTML DOM element with ID "somediv".
        $.each(responseJson, function(index, item)  // Iterate over the JSON array.
            $("").text(item).appendTo($ul);      // Create HTML  element, set its text content with currently iterated item and append it to the .
        );
    );
);

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 simple de vainilla y necesitaría jugar manualmente con JSON.parse() después, lo que es totalmente innecesario si configura el tipo de contenido correctamente en primer lugar.

Regresando `Map` como JSON

Aquí hay otro ejemplo que muestra Map como :

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
    Map 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 la 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.
            $("

Regresando `List` como JSON

Aquí hay un ejemplo que muestra List en un


 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 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 = $("



").appendTo($("#somediv")); // Create HTML 
 element and append it to HTML DOM element with ID "somediv".
        $.each(responseJson, function(index, product)     // Iterate over the JSON array.
            $("").appendTo($table)                     // Create HTML  element, set its text content with currently iterated item and append it to the 
.
                .append($(".
                .append($(".
                .append($(".
        );
    );
);
Regresando List como XML
Aquí hay un ejemplo que efectivamente hace lo mismo que el 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.  De esta manera, JSTL es mucho más útil, 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 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 
").text(product.id))        // Create HTML  element, set its text content with id of currently iterated product and append it to the 
").text(product.name))      // Create HTML  element, set its text content with name of currently iterated product and append it to the 
").text(product.price));    // Create HTML  element, set its text content with price of currently iterated product and append it to the 





 en un , puede ser reutilizable en otro lugar en una respuesta que no sea ajax):




<%@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" %>

    



            
        
                $product.id
                
                
            
        
    



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  element and append its HTML to HTML DOM element with ID "somediv".
    );
);

Probablemente ya se habrá dado cuenta de por qué XML es mucho más poderoso 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”.  Los frameworks MVC como JSF usan XML bajo las sábanas para su magia ajax.
Ajaxificar una forma existente
Puedes usar jQuery $.serialize() para ajaxificar fácilmente los formularios POST existentes sin tener que jugar con la recopilación y el paso de los parámetros de entrada del formulario individual.  Asumiendo un formulario existente que funciona perfectamente sin JavaScript / jQuery (y por lo tanto se degrada con gracia cuando el usuario final tiene JavaScript deshabilitado):

    
    
    
    


Puede mejorarlo progresivamente con ajax como se muestra a continuación:
$(document).on("submit", "#someform", function(event) 
    var $form = $(this);

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

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

Puede en el servlet 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.
    


El complemento jQuery Form hace menos o más lo mismo que el ejemplo de jQuery anterior, pero tiene soporte transparente adicional para multipart/form-data formularios según lo requiera la carga de archivos.
Envío manual de parámetros de solicitud al servlet
Si no tiene un formulario en absoluto, pero solo desea interactuar con el servlet “en segundo plano” mediante el cual le gustaría PUBLICAR algunos datos, entonces 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() El método que se muestra aquí arriba se puede reutilizar.  Tenga en cuenta que la sintaxis anterior también funciona con $.get() en jQuery y doGet() en servlet.
Enviar manualmente un objeto 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 deberá 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 realizarse 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 la respuesta Content-Type encabezamiento.
Luego, para procesar el objeto JSON en el servlet 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() de la forma habitual.  Es decir, los servlets no admiten 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 solo usar $.param().  Normalmente, quieres usar JSON.stringify() solo si el servicio de destino es, por ejemplo, un servicio JAX-RS (RESTful) que, por alguna razón, solo es capaz de consumir cadenas JSON y no parámetros de solicitud regulares.
Envío de 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á o redirigirá la propia solicitud ajax y no el documento / ventana principal donde se originó la solicitud ajax.  JavaScript / jQuery en tal 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 ve el usuario final en la barra de direcciones del navegador.  Por lo tanto, hay problemas con la capacidad de marcadores.  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.  Por ejemplo, devolviendo un booleano o una URL.
String redirectURL = "http://example.com";

Map 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:

Llame a Servlet e invoque el código Java desde JavaScript junto con los parámetros
Acceda a las variables Java / Servlet / JSP / JSTL / EL en JavaScript
¿Cómo cambiar fácilmente entre un sitio web basado en ajax y un sitio web HTML básico?
¿Cómo subir archivos al servidor usando JSP / Servlet y Ajax?


La forma correcta de actualizar la página que se muestra actualmente en el navegador del usuario (sin volver a cargarla) es hacer que algún código que se ejecute en el navegador actualice el DOM de la página.  
Ese código es típicamente javascript que está incrustado o vinculado desde la página HTML, de ahí la sugerencia de AJAX.  (De hecho, si asumimos que el texto actualizado proviene del servidor a través de una solicitud HTTP, esto es AJAX clásico).
También es posible implementar este tipo de cosas usando algún complemento o complemento del navegador, aunque puede ser complicado que un complemento llegue a las estructuras de datos del navegador para actualizar el DOM.  (Los complementos de código nativo normalmente escriben en algún marco de gráficos que está incrustado en la página).

Le mostraré un ejemplo completo de servlet y cómo se llama ajax.
Aquí, vamos a crear un ejemplo simple para crear el formulario de inicio de sesión usando servlet.
index.html
  
   Name:

  
   Password:

  
     
  

Aquí hay una muestra de ajax
       $.ajax
        (
            type: "POST",           
            data: 'LoginServlet='+name+'&name='+type+'&pass='+password,
            url: url,
        success:function(content)
        
                $('#center').html(content);           
                       
        );

LoginServlet Código de servlet: –
    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);
         
    


Sección de Reseñas y Valoraciones
Más adelante puedes encontrar las críticas de otros administradores, tú de igual manera eres capaz mostrar el tuyo si dominas el tema.





¡Haz clic para puntuar esta entrada!
(Votos: 2  Promedio: 4.5)
Tags : Ajax  /  Java  /  Jsp  /  Servlets  / 
Utiliza Nuestro Buscador
Preguntas Relacionadas:
doGet y doPost en Servlets
¿Se puede usar scrapy para extraer contenido dinámico de…
¿Redibujar tablas de datos después de usar ajax para…
Al usar ajax con el formulario django, aparece el error…
¿Debo usar .done () y .fail () para el nuevo código jQuery…
Múltiples botones de envío en el mismo formulario llamando a…
llamada ajax dentro del ejemplo de código ajax
Cuándo usar asíncrono false y asíncrono true en función ajax…
¿Dónde colocar y cómo leer los archivos de recursos de…
ejemplo de código…
Cómo definir el token CSRF en una llamada ajax en Cakephp 3.…
Servlets: setAttribute en HttpServletRequest vs setAttribute…
			
			
            	
		
					
	
		
		
					
	
				

            

                
                                    
		
		Deja una respuesta Cancelar la respuesta
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Nombre * 
Correo electrónico * 
Web 
 Guarda mi nombre, correo electrónico y web en este navegador para la próxima vez que comente.
 



		
			Current ye@r *
			
			
		
		
			Leave this field empty

¿Cómo usar Servlets y Ajax?

Solución:

Regreso del ejemplo de Kickoff `String` como texto sin formato

Regresando `List` como JSON

Regresando `Map` como JSON

Regresando `List` como JSON

Regresando `List` como XML

Ajaxificar una forma existente

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

Enviar manualmente un objeto JSON al servlet

Envío de una redirección desde servlet

Ver también:

Sección de Reseñas y Valoraciones

Utiliza Nuestro Buscador

Preguntas Relacionadas:

").text(product.id)) // Create HTML	element, set its text content with id of currently iterated product and append it to the
").text(product.name)) // Create HTML	element, set its text content with name of currently iterated product and append it to the
").text(product.price)); // Create HTML	element, set its text content with price of currently iterated product and append it to the

Solución:

Regreso del ejemplo de Kickoff String como texto sin formato

Regresando List como JSON

Regresando Map como JSON

Regresando List como JSON

Regresando List como XML

Ajaxificar una forma existente

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

Enviar manualmente un objeto JSON al servlet

Envío de una redirección desde servlet

Ver también:

Sección de Reseñas y Valoraciones

Utiliza Nuestro Buscador

Preguntas Relacionadas:

Regreso del ejemplo de Kickoff `String` como texto sin formato

Regresando `List` como JSON

Regresando `Map` como JSON

Regresando `List` como JSON

Regresando `List` como XML