elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Programación General
| | |-+  Java
| | | |-+  [Tutorial] Servlets y AJAX
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Tutorial] Servlets y AJAX  (Leído 4,272 veces)
Usuario Invitado


Desconectado Desconectado

Mensajes: 625



Ver Perfil
[Tutorial] Servlets y AJAX
« en: 25 Marzo 2015, 16:34 pm »



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:



« Última modificación: 26 Marzo 2015, 03:37 am por Gus Garsaky » En línea

"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein
Usuario Invitado


Desconectado Desconectado

Mensajes: 625



Ver Perfil
Re: [Tutorial]Servlets y AJAX[/url]
« Respuesta #1 en: 25 Marzo 2015, 16:35 pm »

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

CSS:

Código
  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
  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
  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
  1. request.send("userdata="+data);

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

Código
  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
  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 aquí.

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
  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, IOException {
  25.     PrintWriter writer = response.getWriter();
  26.     response.setContentType("text/plain");
  27.     String strJson = request.getParameter("userdata"); // obtiene lo enviado por AJAX
  28.     JSONObject json = new JSONObject(strJson);
  29.     String username = (String) json.get("username");
  30.     String password = (String) 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 | IOException e) {
  46. logger.warning(e.getLocalizedMessage());
  47. }
  48. }
  49.  
  50.    @Override
  51. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  52. try {
  53.     processRequest(request, response);
  54.     } catch(ServletException | IOException 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
  1. String 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
  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
  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
  1. String username = (String) json.get("username");
  2.     String password = (String) 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
  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. }



CONCLUSIÓN


Como el lector se ha dado cuenta, comunicar servlets con AJAX es realmente muy sencillo, tan sencillo como en otros lenguajes ;)


¡Hasta la próxima!


« Última modificación: 25 Marzo 2015, 21:24 pm por Gus Garsaky » En línea

"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Servlets Java
Java
Urusei Yatsura 5 3,941 Último mensaje 21 Diciembre 2006, 21:39 pm
por Casidiablo
[Tutorial] - Login con ajax . Mysql || Php con clases || Ajax « 1 2 »
PHP
Hadess_inf 15 26,323 Último mensaje 9 Diciembre 2010, 02:44 am
por delorian15
¿Como auditar servlets?
Nivel Web
xustyx 3 2,703 Último mensaje 2 Mayo 2014, 20:22 pm
por dantemc
[Tutorial] Hibernate, Servlet y AJAX
Java
Usuario Invitado 2 3,666 Último mensaje 24 Enero 2015, 03:07 am
por Usuario Invitado
jsp , servlets y jstl
Java
david2189 0 1,739 Último mensaje 29 Agosto 2016, 08:38 am
por david2189
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines