Skip to content

Comunicar JSP y jQuery

15 marzo 2009

Como sabéis, jQuery es un framework de javascript, que nos va a permitir interactuar con los elementos HTML de una manera muy cómoda y simplificando mucho nuestro trabajo.

Además jQuery, tiene una implementación propia de la tecnología AJAX, lo que nos va a servir para que la comunicación entre JSP y jQuery sea mucho más atractiva.

Comunicar JSP con jQuery, no nos supone ningún problema, es una acción directa. (Ahora explicaremos cómo) El problema viene a la hora de tratar de comunicar jQuery con JSP. La explicación es muy sencilla y reside en la diferencia sutil pero tremendamente importante, que hay entre estas dos tecnologías.

jQuery es una tecnología que se ejecuta en el lado del cliente, en su navegador (recordad, al fin y al cabo, es javascript) y por tanto cualquier variable que definamos con jQuery va a pertenecer al ámbito del cliente y nuestro servidor no tiene porqué conocerla. Sin embargo, cualquier código que escribamos en JSP, se va a ejecutar en el lado del servidor.

Por tanto, cuando el cliente solicite nuestra página JSP, nuestro contenedor (Tomcat, JBoss,..) compilará el código JSP que nosotros hayamos incluido en la página, creará el código HTML correspondiente y lo enviará al cliente.

–Vale muy bien, ya me sé la teoría, pero entonces: ¿Cómo hago para comunicar mi código jQuery con mi código JSP para insertar el valor de una variable que tengo en jQuery?

La respuesta es sencilla. Tendremos que recurrir a peticiones tipo GET o tipo POST. Es la única forma que tiene el cliente de comunicarse con nuestro servidor. (Que es dónde “reside” el código JSP) Y para hacer estas peticiones utilizaremos la ayuda de AJAX, que nos viene genial para nuestro propósito. Y así aprovechamos más funciones de jQuery, que, ya que tenemos que enlazarlo en nuestra página y consumir ancho de banda del cliente, pues vamos a darle uso, no??

Veamos en primer lugar lo que necesitamos:

  1. Página principal JSP que será la que vea el cliente cuando se conecte a nuestra aplicación: index.jsp (por ejemplo)
  2. Página JSP que será la encargada de recibir la petición AJAX de index.jsp, procesar la petición y devolver los valores correspondientes: resultado.jsp (mismamente)
  3. Framework de jQuery. Ya está disponible la versión 1.3, yo para este ejemplo he usado la 1.2.6, sí lo sé, debería actualizarme, peeeero…. algún día lo haré 😉

Pasemos al ejemplo. Es tremendamente sencillo, es lo más sencillo que se me ha ocurrido, para que quede bien reflejado el comportamiento de toda la aplicación.

El ejemplo consiste en lo siguiente: Cuando nos conectemos a la aplicación, recibiremos un saludo. Si le indicamos nuestro nombre mediante una query string, nos saludará con nuestro nombre y sino nos saludará como invitados.

Esta funcionalidad la implementaremos comunicando JSP con jQuery.

Luego tendremos una caja de texto en la que insertaremos nuestro apellido y un botón de enviar. Cuando pulsemos el botón enviar, capturaremos mediante jQuery el apellido escrito en la caja de texto y se lo pasaremos a la JSP mediante una petición de tipo POST usando AJAX. Esta petición la derivaremos a nuestra página resultado.jsp que nos devolverá el apellido convertido todo a mayúsculas.

Simple no???

De esta forma probamos los dos tipos de comunicación de los que hablaba: JSP –> jQuery    y    jQuery –> JSP

ajax1

Antes de pulsar Enviar. QueryString:
?user=rekkeb (directamente en la URL)

Tras pulsar el botón enviar

Tras pulsar el botón enviar

NOTA: En la página resultado.jsp, podemos realizar el tratamiento de los datos que necesitemos o incluso realizar una conexión con una base de datos si nos interesa. El objetivo de este ejemplo es simplificar al máximo la funcionalidad para que se entienda bien.

Vamos a ver el código de la página index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <script type="text/JavaScript" src="javascripts/jquery.js"></script>
   <script type="text/JavaScript">
     $(document).ready(function(){
       <%if (request.getParameter("user") != null){
         String nick = "\""+request.getParameter("user").toString()+"\"";%>
         $("span#nombre").text("Hola "+<%=nick%>);//Comunicación JSP - jQuery
       <%}else{%>
         $("span#nombre").text("Hola Invitado");
       <%}%>

       $("#send").click(function(){
         var apellido = $("#apellido").val();
         $.ajax({ //Comunicación jQuery hacia JSP
           type: "POST",
           url: "resultado.jsp",
           data: "apellido="+apellido,
           success: function(msg){
               $("span#ap").text(msg);
           },
           error: function(xml,msg){
               $("span#ap").text(" Error");
           }
        });                                            
     });
  });
 </script>
 <title>Pagina de Indice</title>
</head> <body>
  <p> <span id="nombre"></span><span id="ap"></span></p>
  <div> <label>Apellido: </label> <input type="text" id="apellido" name="apellido" maxlength="10"/>
    <input id="send"type="button" value="Enviar"/>
  </div> </body> </html> 

Como siempre todo el código que usemos de jQuery, lo meteremos entre $document.ready(function(){…}); Para que esté disponible una vez que se haya cargado nuestro árbol DOM.

Dentro de $document.ready, tenemos 2 partes: La primera que es la que comunica JSP –> jQuery, que lo único que hace es comprobar si hemos pasado un parámetro mediante query string llamado user y asignarle el valor al componente HTML.

Y una segunda parte que es la que se encarga de comunicar jQuery –> JSP mediante una petición AJAX. Así de paso vemos lo simple que es realizar peticiones AJAX haciendo uso de jQuery. Simplemente, indicamos el tipo de petición, la url que recibirá la petición, los datos que pasaremos por parámetro y configuramos las acciones que realizaremos cuando la petición se haya completado y hayamos obtenido una respuesta.

NOTA: Como vemos los datos de jQuery, se pasan como parámetros de la request, por tanto, como habréis supuesto, no es necesario usar AJAX para realizar esta comunicación, pero su uso hará mucho más dinámica y atractiva nuestra aplicación.

Hay muchas más opciones configurables en una petición AJAX, para ello os invito a visitar su web y profundizar un poco más. jQuery

La página resultado.jsp que procesa la petición, es mucho más sencilla:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%
    if (request.getParameter("apellido")!=null){
        out.print(((String)request.getParameter("apellido")).toUpperCase());
    }
%>

En esta ocasión no nos hace falta definirnos una estructura de página HTML completa, ya que esta JSP sólo la vamos a utilizar para devolver un resultado. Simplemente devolvemos el apellido que nos llega como parámetro en la request, convertido todo a mayúscula.

Y ya está todo listo. Cuando el usuario pulse el botón de enviar, la página añadirá su apellido escrito en mayúsculas sin necesidad de recargar toda la página.

Por supuesto esta funcionalidad puede conseguirse de miles de formas mucho más simple que la que he contado aquí. Pero creo que para explicar como conectar bidireccionalmente jQuery y JSP sirve bastante bien.

Más Info

Hay un par de libros de consulta que vienen genial a la hora de aprender a utilizar jQuery y JSP para sacarle el mayor partido posible:

Cualquier duda, sugerencia, comentario, mejora… será bien recibida.

Anuncios
22 comentarios leave one →
  1. The Neko permalink
    24 septiembre 2009 02:42

    Gran tutorial… me gusta como es tan sencillo fusionar 2 lenguajes de una forma tan simple y elegante…

    • rekkeb permalink*
      24 septiembre 2009 08:51

      Gracias The Neko. El tutorial es muy muy sencillo. Sin entrar en situaciones complejas. Pero creo que muestra el potencial que puede conseguirse con ambos lenguajes. Además el hecho de disponer de jQuery, puede dotar a nuestra aplicación web de interesantes mejoras…

  2. Dan Joas permalink
    22 abril 2010 19:14

    bien explicado justo necesita este tema.

  3. 5 mayo 2010 12:10

    bueno no veo por que alguien llego a mi pagina desde acá, pero bueno, estoy recorrdando y escribiendo un pequeño pero practico tutorial de jsp, donde se explica todo desde el comienzo y paso paso, si te interesa pasate por Ingenio DS

  4. Hozher permalink
    1 diciembre 2010 22:09

    Hola rekkeb,
    Muchas garcias por el aporte.

    Estoy intentando implementar una solución de este tipo y tengo una duda.

    ¿Será posible que teniendo un JBEAN que es creado con una clase X, por medio de jQuery
    ejecute un metodo X.metodo(), me establezca las propiedades de la Clase y posteriormente, dichas propiedades las asigne a objetos HTML. Te comento esto por que lo que trato de hacer es lo siguiente.

    Tengo un formulario para Insersión/Actualización de Clientes FrmCliente.jsp.
    Cuando quiero Insertar Un Cliente, Llamo a un JSP InsCliente.jsp que crea un JBEAN a partir de la clase Cliente, este JSP, establece con Request las propiedades de la clase Cliente y posteriormente ejecuta el metodo Cliente.Inserta.
    Mi idea es que el mismo FrmCliente.jsp haga por medio de jqry->jsp una consulta para Actualizar los datos de un cliente, es decir que al seleccionar de un option el id del cliente, realize un post para que por medio del JBEAN creado ejecute el Cliente.Consulta(), este metodo establece las porpiedades del JBEAN y con jquery tome dichas propiedades del JBEAN y las ponga en las cajas de texto.

    Todo esto con el fin de que el Formulario tenga la doble funcionalidad.

    Espero me puedas dar una orientación en el Tema.

    Salu2

    • rekkeb permalink*
      10 diciembre 2010 00:31

      Hola Hozner, disculpa la tardanza en contestar, pero estos días de puente he estado un poco desconectado.

      Lo que planteas tiene mucha lógica. De hecho en los proyectos que he hecho con JSP, mis formularios leían los datos de una base de datos y los mostraban para que el cliente pudiera modificarlos o actualizarlos y posteriormente insertarlos nuevamente en la BD. Esta opción es un poco más sencilla que la que tu propones ya que hay menos intermediarios. Te la planteo como una posibilidad.

      Tal y como lo planteas, sería necesario que asignaras un evento al ‘option’ del que seleccionas el id del usuario, para que este a su vez realizara una petición AJAX y obtuviera los datos del JBEAN. Con jQuery puedes saber qué elemento ‘option’ de un ‘select’ está seleccionado haciendo uso de la función ‘$(“#idElem”).find(“option:selected”).val()’.
      La idea que se me ocurre sería la siguiente: (a ver si consigo explicarla de forma clara)
      Dentro de FrmCliente.jsp, añades un evento al Select que contiene los Id, de manera que cada vez que cambie, se haga una llamada AJAX al JSP que va a obtener los datos del JBEAN.
      Esa JSP será la encargada de obtener los datos y devolverlos en un formato de cadena (String), por ejemplo.
      En la zona de ‘success’ de la llamada AJAX de FrmCliente.jsp, simplemente tendrías que procesar esa cadena con Javascript (o jQuery) y asignar cada valor a una caja de texto del formulario. Por ejemplo, mediante: $(“#idCajaTexto1”).val(“aqui una cadena”);

      No estoy seguro de si mi respuesta te aclara las dudas. Si necesitas cualquier cosa, ya sabes donde encontrarme 😉

  5. luis permalink
    23 febrero 2011 22:55

    buen tuto,, bueno eso es pa cuando mandas de una pagina ah otra,, pero mi pregunta es,,, si es para la misma pagina como haces? saludo

    • rekkeb permalink*
      29 agosto 2011 18:33

      Para la misma página realmente no necesitarias AJAX. La opción de elegir AJAX es para evitar que tu página se recargue por completo, de tal forma que una petición AJAX sólo devuleva un pequeño fragmento de código HTML que puedas insertar sin problemas en algún contenedor de tu página sin necesidad de recargar todo.
      Por supuesto también puedes hacer llamadas AJAX sobre tu misma página, aunque el código de ésta iba a quedar menos elegante ya que tendrías que tener un ‘if’ que defina qué elementos pintar cuando tengas un parámetro concreto (ya que no te interesaría pintar la página entera) y un ‘else’ para pintar toda la página cuando no llegue un parámetro concreto (puede ser al entrar por primera vez a la página o al presionar F5)…

      Personalmente veo un poco más engorrosa esta opción y más clara la opción de separar el código.

  6. joaquin permalink
    7 julio 2011 18:12

    No entiendo cuando se utiliza request.getParameter(“user”) para que salga esto $(“span#nombre”).text(“Hola “+), alguien me podria explicar por favor

    de antemano gracias..

    • Juan Itto permalink
      29 agosto 2011 08:00

      En realidad no le veo ninguna funcionalidad tampoco el programa no tiene un parametro user quizas funcionaria usando request.getParameter(“apellido”) pero el if esta dentro de $(doucment).ready no cuando se de click entonces no hay ninguna respuesta de lado del servidor por lo tanto en el programa que se muestra actualmente siempre entrara en el else

      • rekkeb permalink*
        29 agosto 2011 18:13

        En realidad, este ejemplo está pensado para que la query string inicial se escriba a mano en la URL. Si os fijáis en las imágenes de ejemplo se da esta condición por supuesta.
        De esta forma a la hora de llamar a vuestra página index.jsp, tendríais que hacerlo con:
        index.jsp?user=Miusuario
        Es un ejemplo muy simple que no pretende ir mas allá de un ejemplo extremadamente sencillo. 😉

  7. Sad permalink
    7 septiembre 2011 01:48

    Buenas Tardes colega recomendarias usar una aplicacion con jquery me refiero al tema de seguridad

    • rekkeb permalink*
      17 octubre 2011 22:27

      La verdad es que la seguridad es un tema siempre importante. jQuery no proporciona ningún mecanismo nativo para añadir seguridad a tu sistema. Todo recae del lado del desarrollador.
      Aun así recuerda una cosa: jQuery es una librería javascript y cualquier navegador tiene la opción de inhabilitar javascript, por tanto no es en absoluto recomendable ni es una buena práctica, dejar toda tu seguridad en manos de jQuery o cualquier otra librería de javascript como Prototype.

      Saludos!

  8. enrique permalink
    14 octubre 2011 07:06

    Hola, un placer leer tu post, solo tengo una duda, porqué no colocas en en un ? sin action claro, no lo ví en ninguna parte y no sé si sea una forma muy elegante.

    • rekkeb permalink*
      17 octubre 2011 22:28

      Hola enrique, no he conseguido entender tu comentario… puedes replantearlo?

  9. Alexis permalink
    25 septiembre 2012 22:55

    Creo que el tuto me funcionara para lo que quiero… Aprovecho de saludarte!

    Tengo un formulario en jsp. donde en un combobox tengo los rut de una base de datos. cuando elijo un rut y hago click en el boton buscar necesito que se me cargen los demas campos de mi tabla (nombre, apellido etc.) obviamente sin que se me recargue pagina. para posteriormente modificar esos campos y apretar otro boton y con eso modificarlos.

    ocupo jsp y servlet.

    espero tu respuesta muchas gracias!!!!!!!!!!

  10. Luis permalink
    6 mayo 2014 21:51

    Hola buen dia.

    Muchas gracias por el tutorial pero me surgio una duda, lo que pasa es que no quiero escribir el codigo todo el tiempo pero al parecer los archivos .js no reconocen los
    ¿Me prodrias decir cuales son los archivos que soportan tal cosa?

    • Luis permalink
      7 mayo 2014 23:14

      Jejeje no salio en el comentario a lo que me referia, una disculpa, lo que no se reconoce son los scriptlets.

      • rekkeb permalink*
        11 mayo 2014 19:28

        Hola Luis, la verdad es que no entiendo muy bien tu pregunta. ¿Podrías detallarme qué intentas conseguir exactamente?

        Gracias!

  11. ricardo permalink
    4 junio 2014 21:52

    Que tal rekkeb…

    Antes que nada, muchas gracias por este gran ejemplo.

    Veras, ando queriendo implementar algo parecido en un proyecto, con la diferencia de que el código javascript, esta en un archivo externo .js, en el cual de manera dinamica estoy generando un array de strings, ya que estoy implementando un drag and drop, y por lo tanto en el array estaran los elementos seleccionados.
    ¿es posible enviar el array de strings al jsp con este ejemplo? o existe otra forma.

    nuevamente gracias por el ejemplo y espero tu respuesta.

    • rekkeb permalink*
      8 junio 2014 13:06

      Hola ricardo,

      Puedes enviar un Array de Strings a tu servidor sin problema. De hecho podrías enviar el array de String en formato JSON.
      Lo que debes tener en cuenta es que necesitas en un Backend “algo” que esté escuchando y sepa interpretar la información que le estás mandando.
      Si utilizas Spring MVC, lo ideal sería que tuvieras un @Controller escuchando tus peticiones, que sepa procesar la información en JSON y que posteriormente sepa enviarle esa información a tu vista en JSP para que ésta la represente como más te convenga 😉

      Un saludo!

  12. antonio permalink
    16 octubre 2017 19:06

    No sirve, es una perdida de tiempo

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: