comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[Tutorial] Peticiones AJAX a Servlets

  • 4 Respuestas
  • 3842 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Gus Garsaky

  • *
  • Underc0der
  • Mensajes: 93
  • Actividad:
    0%
  • Reputación -1
    • Ver Perfil
  • Skype: gus.garsaky
« en: Abril 10, 2015, 10:17:23 am »


SERVLETS Y AJAX


El presente pequeño tutorial, tiene como finalidad mostrar cómo interactuar entre Servlets y javascript, mediante AJAX, tomando como ejemplo un formulario de ingreso.


Se asume que el lector tiene noción de las siguientes tecnologías:

  • Lenguaje de programación Java
  • HTTP
  • Servlets
  • javascript
  • AJAX


Si no se tiene nociones de las mencionadas tecnologías, se puede seguir el tutorial, ya que se explicarán algunos puntos. De todas maneras, el lector debe de investigar cada punto, término, trozo de código o afines que no entienda.

Herramientas necesarias

Para seguir perfectamente éste tutorial, se necesitarán las siguientes herramientas:

  • Eclipse Luna EE: IDE para programación en Java Enterprise Edition. No solo soporta el API estándar de Java, si no que también nos brinda soporte para la API empresarial.
  • NetBeans Java EE. Gran IDE con muy buen soporte para Java Enterprise Edition. Excelente editor de código y muy buen auto completado.
  • GlassFish: Servidor para aplicaciones Java web.
  • org.json.jar: Librería que nos permite transformar un Map o String a JSONObject y viceversa.



Zona de descargas




Notas de aclaración

Dada la simpleza que requiere éste tutorial, NO se empleará un gestor de base de datos. El objetivo del presente documento es mostrar de forma práctica y sencilla, la comunicación entre servlets y AJAX.


CONFIGURACIÓN DE ECLIPSE E INSTALACIÓN DE GLASSFISH


Instalación de GlassFish Tools en Eclipse

Abrimos nuestro Eclipse Luna EE. Si es primer uso, se preguntará dónde desea que sea el espacio de trabajo, por defecto es en la carpeta de usuario pero se puede especificar donde se desea (siempre y cuando tengamos permisos).

Una vez abierto Eclipse, tenemos que instalar GlassFish Tools para poder instalar nuestro servidor GlassFish. Para ésto vamos a la opción Eclipse Marketplace del menú Help y buscamos "glassfish":


Hacemos click en Install. Nos preguntará si aceptamos la licencia, elejimos el radio button "Yes. I accept..." y empezará a instalar GlassFish Tools (Si pregunta algo durante la instalación, dale "Yes"). Al finalizar la instalación nos pedirá reiniciar Eclipse. Aceptamos.

Instalación de GlassFish 4.1

Descomprimimos el zip que nos hemos bajado de la web de GlassFish y lo colocamos en:

Citar
C://Program Files/

De tal modo que la instalación de GlassFish quede así:

Citar
C://Program Files/glassfish/

Abrimos Eclipse y nos dirigimos hacia la opción Preferences del menú Window. Aquí desplegamos el menú Server -> Runtime Environments:


Hacemos click en Add y nos mostrará una ventana con los adaptadores de servidores disponibles. Escogemos GlassFish 4 y hacemos click en Next:


En la siguiente cara, tendremos que especificar la dirección de la instalación de GlassFish y el JDK:


NOTA: Es bien importante que el elemento en "Java development kit" sea el JDK y no el JRE. Si les aparece JRE deben de agregar un nuevo "installed JRE" dentro de Java -> Installed JREs. Para ésto solo basta hacer click en Add y agregar la ruta del JDK de Java.

Por último hacemos click en Next, dejamos todo por defecto y hacemos click en Finish para finalizar. Ya tenemos nuestro IDE listo para empezar a programar.


INSTALAR NETBEANS Y GLASSFISH


Al momento de instalar NetBeans Java EE, GlassFish viene incorporado. También Tomcat, pero pueden elegir no instalarlo sacando el checkbox de Tomcat 8:


Desconectado Gus Garsaky

  • *
  • Underc0der
  • Mensajes: 93
  • Actividad:
    0%
  • Reputación -1
    • Ver Perfil
  • Skype: gus.garsaky
« Respuesta #1 en: Abril 10, 2015, 10:18:56 am »
Primero que nada, necesitamos crear nuestro fichero index.jsp o index.html que contendrá el formulario de ingreso. Éste fichero va dentro del folder webapp, WebContent o WebPages (de acuerdo al IDE):

Código: HTML
  1. <%@page contentType="text/html" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html>
  3. <You are not allowed to view links. Register or Login lang="es">
  4. <You are not allowed to view links. Register or Login>
  5.         <You are not allowed to view links. Register or Login charset="UTF-8">
  6.         <You are not allowed to view links. Register or Login>Identfíquese</You are not allowed to view links. Register or Login>
  7.         <You are not allowed to view links. Register or Login rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  8.         <You are not allowed to view links. Register or Login rel="stylesheet" href="assets/css/login.css"/>
  9. </You are not allowed to view links. Register or Login>
  10. <You are not allowed to view links. Register or Login>
  11.         <You are not allowed to view links. Register or Login id="flogin" class="flogin">
  12.         <section class="left-side">
  13.             <section class="head">
  14.                 LOGIN
  15.             </section>
  16.             <section class="body">
  17.                 <section class="data">
  18.                     <section class="form-group">
  19.                         <You are not allowed to view links. Register or Login>Usuario:</You are not allowed to view links. Register or Login>
  20.                         <section class="input-wrapper">
  21.                             <You are not allowed to view links. Register or Login type="text" id="txt-username" class="txt"/>
  22.                             <You are not allowed to view links. Register or Login class="fa fa-user"></You are not allowed to view links. Register or Login>
  23.                         </section>
  24.                     </section>
  25.                     <section class="form-group">
  26.                         <You are not allowed to view links. Register or Login>Contraseña:</You are not allowed to view links. Register or Login>
  27.                         <section class="input-wrapper">
  28.                             <You are not allowed to view links. Register or Login type="password" id="txt-password" class="txt"/>
  29.                             <You are not allowed to view links. Register or Login class="fa fa-key"></You are not allowed to view links. Register or Login>
  30.                         </section>
  31.                     </section>
  32.                 </section>
  33.                 <section class="help">
  34.                     <You are not allowed to view links. Register or Login href="">¿Olvidaste tu usuario o contraseña?</You are not allowed to view links. Register or Login>
  35.                 </section>
  36.             </section>
  37.         </section>
  38.         <section id="btn-login" class="right-side">
  39.             <You are not allowed to view links. Register or Login class="fa-4x fa fa-arrow-right"></You are not allowed to view links. Register or Login>
  40.             <You are not allowed to view links. Register or Login>IR</You are not allowed to view links. Register or Login>
  41.         </section>
  42.     </You are not allowed to view links. Register or Login>
  43.        
  44.         <!-- javascript files -->
  45.         <You are not allowed to view links. Register or Login src="assets/js/login.js"></You are not allowed to view links. Register or Login>
  46. </You are not allowed to view links. Register or Login>
  47. </You are not allowed to view links. Register or Login>

CSS:

Código: CSS
  1. * {
  2.     margin: 0px;
  3.     padding: 0px;
  4. }
  5. body {
  6.     align-items: center;
  7.     background-color: #f9f9f9;
  8.     display: flex;
  9.     height: 100vh;
  10.     justify-content: center;
  11. }
  12. .flogin {
  13.     display: flex;
  14.     justify-content: space-between;
  15.     width: 400px;
  16. }
  17. .flogin > .left-side {
  18.     background-color: #363636;
  19.     border: 9px solid #dedede;
  20.     border-right: none;
  21.     border-radius: 20px 0px 0px 20px;
  22.     width: 80%;
  23. }
  24. .flogin  > .right-side {
  25.     align-items: center;
  26.     background-color: #34B5D5;
  27.     border: 9px solid #dedede;
  28.     border-left: none;
  29.     border-radius: 0px 20px 20px 0px;
  30.     display: flex;
  31.     flex-flow: column nowrap;
  32.     justify-content: space-between;
  33.     padding: 1.3rem .2rem;
  34.     width: calc(20% - 2*.2rem - 9px);
  35. }
  36. .flogin > .right-side:hover {
  37.     cursor: pointer;
  38. }
  39.  
  40. /*********************
  41.       LEFT SIDE
  42. *********************/
  43. .left-side > .head {
  44.     border-bottom: 2px dashed #ddd;
  45.     color: #eee;
  46.     font-family: "segoe ui";
  47.     margin-bottom: 20px;
  48.     padding: .75rem 1rem;
  49. }
  50. .left-side > .body {
  51.     padding: .8rem 1.35rem;
  52.     width: calc(100% * 2*1.35rem);
  53. }
  54. .body > .data {
  55.     display: flex;
  56.     justify-content: space-between;
  57. }
  58. .form-group {
  59.     width: 45%;
  60. }
  61. .form-group > span {
  62.     color: #ddd;
  63.     display: block;
  64.     font-family: "segoe ui";
  65.     font-size: 10pt;
  66.     margin-bottom: 7px;
  67. }
  68. .form-group > .input-wrapper {
  69.     align-items: center;
  70.     background-color: white;
  71.     border-radius: 5px;
  72.     box-shadow: 0px 2px 5px 1px rgba(0,0,0,.4) inset,
  73.         0px -1px 2px 1px rgba(0,0,0,.25) inset;
  74.     display: flex;
  75.     justify-content: space-between;
  76. }
  77. .input-wrapper > .txt {
  78.     width: 80%;
  79. }
  80. .input-wrapper > i {
  81.     color: gold;
  82.     width: 20%;
  83. }
  84. .txt {
  85.     background-color: transparent;
  86.     border: none;
  87.     border-radius: 5px;
  88.     padding: .4rem .25rem;
  89.     width: calc(80% - 2*.35rem - 2*1px);
  90. }
  91. .txt:focus {
  92.     outline: none;
  93. }
  94. .help {
  95.     display: flex;
  96.     justify-content: flex-end;
  97. }
  98.  
  99. a {
  100.     color: #ddd;
  101.     display: block;
  102.     font-family: "segoe ui";
  103.     font-size: 10pt;
  104.     font-style: italic;
  105.     margin-top: 20px;
  106.     text-align: right;
  107.     text-decoration: none;
  108. }
  109.  
  110. /*****************
  111.     RIGHT SIDE
  112. *****************/
  113. .right-side > i {
  114.     color: #fff;
  115.     display: block;
  116. }
  117. .right-side > span {
  118.     color: #fff;
  119.     display: block;
  120.     font-family: "segoe ui";
  121.     font-size: 16pt;
  122. }

Como ven es código HTML simple, en el cual se construye un formulario. Ahora, escribamos el código javascript que nos permita hacer la llamada AJAX al futuro servlet. Éste fichero va dentro del folder assets/js:

Código: Javascript
  1. document.addEventListener("DOMContentLoaded", init, true);
  2.  
  3. function init() {
  4.         document.querySelector("#btn-login").addEventListener("click", handleLogin, true);
  5.        
  6.         function handleLogin(e) {
  7.                 e.preventDefault();
  8.                 var txtUsername = document.querySelector("#txt-username");
  9.                 var txtPassword = document.querySelector("#txt-password");
  10.                
  11.                 var userdata = '{"username":'+txtUsername.value+',"password":'+txtPassword.value+'}';
  12.                
  13.                 loginByAjax(userdata);
  14.                 resetForm();
  15.         }
  16.        
  17.         function loginByAjax(data) {
  18.                 var request = new XMLHttpRequest();
  19.                 request.open("POST", "LoginController", true);
  20.                 request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  21.                 request.onreadystatechange = function() {
  22.                         // si la respuesta fue exitosa
  23.                         if(request.readyState == 4 && request.status == 200) {
  24.                                 var message = request.responseText;
  25.                                 alert(message);
  26.                         }
  27.                         // si la respuesta trajo error
  28.                         else if(request.readyState == 4 && request.status != 200){
  29.                                 var message = request.responseText;
  30.                                 message = request.responseText;
  31.                                 alert(message);
  32.                         }
  33.                 };
  34.                 request.send("userdata="+data);
  35.         }
  36.        
  37.         function resetForm(form) {
  38.                 var form = document.querySelector("#flogin");
  39.                 var controls = form.querySelectorAll("input, select");
  40.                
  41.                 for(var i=0; i<controls.length; i++) {
  42.                         var control = controls[i];
  43.                         if(control.nodeName === "INPUT")
  44.                                 control.value = "";
  45.                         else if(control.nodeName === "SELECT")
  46.                                 control.selectedIndex = 0;
  47.                 }
  48.                 controls[0].focus();
  49.         }
  50.        
  51. }

Como se puede observar, el código es muy sencillo. Escuchamos por evento submit del formulario y le decimos que se ejecutará la función handleLogin. Ésta función obtiene los valores ingresados en los textbox del formulario, crea un JSON en forma de texto y se lo envía al método loginByAjax(data) para que se envíe al servlet mediante AJAX.

El método loginByAjax tiene el siguiente código:

Código: Javascript
  1. function loginByAjax(data) {
  2.                 var request = new XMLHttpRequest();
  3.                 request.open("POST", "LoginController", true);
  4.                 request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  5.                 request.onreadystatechange = function() {
  6.                         // si la respuesta fue exitosa
  7.                         if(request.readyState == 4 && request.status == 200) {
  8.                                 var message = request.responseText;
  9.                                 alert(message);
  10.                         }
  11.                         // si la respuesta trajo error
  12.                         else if(request.readyState == 4 && request.status != 200){
  13.                                 var message = request.responseText;
  14.                                 message = request.responseText;
  15.                                 alert(message);
  16.                         }
  17.                 };
  18.                 request.send("userdata="+data);
  19.         }

Como vemos, el código lo único que hace es hacer una llamada AJAX al servet LoginController enviándole el parámetro recibido data, que es el JSON en forma de texto:

Código: Javascript
  1. request.send("userdata="+data);

Si la llamada AJAX funciona exitosamente, mostraremos la respuesta retornada desde el servlet en un alert:

Código: Javascript
  1. if(request.readyState == 4 && request.status == 200) {
  2.                                 var message = request.responseText;
  3.                                 alert(message);
  4.                         }

Caso contrario, se mostrará también el mensaje de error en un alert. Quizás te estés preguntando, porqué la condición:

Código: Javascript
  1. if(request.readyState == 4 && request.status == 200)

La petición tiene 5 estados, que son:

  • 0: Petición no inicializada
  • 1: Conexión establecida con el servidor.
  • 2: Petición recibida
  • 3: Procesando petición
  • 4: Petición finalizada y respuesta lista.


Así mismo, cada petición tiene muchos códigos de estado. El código 200 indica que la petición ha sido exitosa, 404 indica que el recurso no ha sido encontrado, 500, error del servidor, etc. Puedes ver la lista de códigos You are not allowed to view links. Register or Login.

Entonces, el código anterior se puede traducir a:

Si la petición ha finalizado y la respuesta está lista, y además la petición ha sido exitosa...

Por último, reseteamos el formulario para limpiar los campos y colocar el foco en el textbox del nombre de usuario.


Ahora, nos queda crear nuestro servlet. Nuestro servlet se llamará LoginController y tendrá el siguiente código:

Código: Java
  1. package com.company.controllers;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5. import java.util.logging.Logger;
  6.  
  7. import javax.servlet.ServletException;
  8. import javax.servlet.annotation.WebServlet;
  9. import javax.servlet.http.HttpServlet;
  10. import javax.servlet.http.HttpServletRequest;
  11. import javax.servlet.http.HttpServletResponse;
  12.  
  13. import org.json.JSONObject;
  14.  
  15. @WebServlet(asyncSupported=true, urlPatterns={"/LoginController"})
  16. public class LoginController extends HttpServlet {
  17.         private static final long serialVersionUID = 1L;
  18.         private static final Logger logger = Logger.getLogger("LoginLogger");
  19.        
  20.     public LoginController() {
  21.         super();
  22.     }
  23.  
  24.     public void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, You are not allowed to view links. Register or Login {
  25.         You are not allowed to view links. Register or Login writer = response.getWriter();
  26.         response.setContentType("text/plain");
  27.         You are not allowed to view links. Register or Login strJson = request.getParameter("userdata"); // obtiene lo enviado por AJAX
  28.         JSONObject json = new JSONObject(strJson);
  29.         You are not allowed to view links. Register or Login username = (You are not allowed to view links. Register or Login) json.get("username");
  30.         You are not allowed to view links. Register or Login password = (You are not allowed to view links. Register or Login) json.get("password");
  31.        
  32.         if(username.equals("Duke") && password.equals("Duke777")) {
  33.                 writer.print("Usuario correctamente identificado");
  34.         } else {
  35.                 writer.print("Usuario o contraseña incorrectas");
  36.         }
  37.         writer.flush();
  38.         writer.close();
  39.     }
  40.    
  41.     @Override
  42.         protected void doGet(HttpServletRequest request, HttpServletResponse response) {
  43.                 try {
  44.                         processRequest(request, response);
  45.                 } catch(ServletException | You are not allowed to view links. Register or Login e) {
  46.                         logger.warning(e.getLocalizedMessage());
  47.                 }
  48.         }
  49.  
  50.     @Override
  51.         protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, You are not allowed to view links. Register or Login {
  52.                 try {
  53.                 processRequest(request, response);
  54.         } catch(ServletException | You are not allowed to view links. Register or Login e) {
  55.                 logger.warning(e.getLocalizedMessage());
  56.         }
  57.         }
  58.  
  59. }

Nuestro servlet no es nada del otro mundo, es muy sencillo. Explicaré las siguientes lineas:

Código: Java
  1. You are not allowed to view links. Register or Login strJson = request.getParameter("userdata"); // obtiene lo enviado por AJAX
  2.         JSONObject json = new JSONObject(strJson);

¿Recuerdas que en el código AJAX enviamos el JSON con el nombre de usuario y contraseña en formato texto? Bien, y tenía como identificador userdata.

Como ves, esa variable userdata con el valor del JSON enviado desde AJAX, lo podemos obtener en nuestro Servlet mediante el método getParameter, el cual obtiene un valor pasado por parámetro mediante su identificador.

En éste momento, strJson es equivalente al JSON en forma de texto enviado desde AJAX:

Código: Javascript
  1. var userdata = '{"username":'+txtUsername.value+',"password":'+txtPassword.value+'}';

Una vez que tenemos el valor enviado en nuestro servlet, lo que vamos a hacer es convertirlo a JSONObject:

Código: Java
  1. JSONObject json = new JSONObject(strJson);

JSONObject hace uso de un objeto tipo Map para poder trabajar fácilmente con pares "llave - valor". Por lo que, por medio de la llave podemos obtener su valor. Las llaves son username y password, entonces, solo obtenemos sus valores:

Código: Java
  1. You are not allowed to view links. Register or Login username = (You are not allowed to view links. Register or Login) json.get("username");
  2.         You are not allowed to view links. Register or Login password = (You are not allowed to view links. Register or Login) json.get("password");

Y por último, evaluamos si el usuario es Duke y si la contraseña es Duke777. Si es correcto enviaremos el mensaje Usuario correctamente identificado o Usuario o contraseña incorrecta de vuelta a la llamada AJAX.

Una vez que la respuesta ha sido devuelta a la llamada AJAX, solo la mostramos en un alert:

Código: Javascript
  1. if(request.readyState == 4 && request.status == 200) {
  2.                                 var message = request.responseText;
  3.                                 alert(message);
  4.                         }
  5.                         // si la respuesta trajo error
  6.                         else if(request.readyState == 4 && request.status != 200){
  7.                                 var message = request.responseText;
  8.                                 message = request.responseText;
  9.                                 alert(message);
  10.                         }




By Gus.

Conectado blackdrake

  • *
  • Co Admin
  • Mensajes: 1893
  • Actividad:
    16.67%
  • Reputación 14
    • Ver Perfil
« Respuesta #2 en: Abril 10, 2015, 10:28:03 am »
Muy pero que muy buen aporte Lord Gus,

Muchisimas gracias, en cuanto tenga un rato lo leeré, te doy +1

Saludos.



Desconectado Gus Garsaky

  • *
  • Underc0der
  • Mensajes: 93
  • Actividad:
    0%
  • Reputación -1
    • Ver Perfil
  • Skype: gus.garsaky
« Respuesta #3 en: Abril 10, 2015, 12:56:17 pm »
Gracias por comentar, blackdrake.
« Última modificación: Mayo 03, 2015, 10:26:35 am por #Gustavo »

Conectado Gabriela

  • *
  • Co Admin
  • Mensajes: 865
  • Actividad:
    58.33%
  • Reputación 15
    • Ver Perfil
    • Email
« Respuesta #4 en: Abril 11, 2015, 06:26:34 pm »


Claro, comprensible y bien desarrollado.
Interesante aporte!!

También te dejo +1. ;D

Gabi.


 

¿Te gustó el post? COMPARTILO!



Tutorial: Traduccion de aplicaciones JAVA - Moviles [By :: SmartGenius :: ]

Iniciado por ProcessKill

Respuestas: 0
Vistas: 1495
Último mensaje Febrero 24, 2010, 04:26:07 pm
por ProcessKill
Tutorial Java + Arduino – JAVADUINO

Iniciado por Expermicid

Respuestas: 1
Vistas: 2529
Último mensaje Julio 28, 2013, 01:30:02 pm
por ANTRAX
[JAVA][MYSQL] Tutorial Basico

Iniciado por LKI

Respuestas: 8
Vistas: 2712
Último mensaje Octubre 06, 2014, 06:21:49 am
por blackdrake
[ Java Básico - Tutorial 2 ]

Iniciado por Mr_Pack

Respuestas: 0
Vistas: 1146
Último mensaje Enero 08, 2013, 08:13:36 pm
por Mr_Pack
[ Java Básico - Tutorial 3 ]

Iniciado por Mr_Pack

Respuestas: 0
Vistas: 1146
Último mensaje Enero 08, 2013, 08:18:18 pm
por Mr_Pack