AJAX Básico – Ingeniería del Software 4

UNIVERSIDAD CATÓLICA “NUESTRA SEÑORA DE LA ASUNCIÓN” FACULTAD DE CIENCIAS Y TECNOLOGÍA ANÁLISIS DE SISTEMAS INGENIERIA DEL SOFTWARE 4

INTEGRANTES: • • López Pappalardo, Ma. Betania Ramos Amarilla, Gilberto CO - 5289 CO - 5427

PROFESORES: Lic. Omar Esgaib Ing. Mauricio Merín

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

AJAX Básico – Ingeniería del Software 4

AJAX
¿Qué es AJAX?
Escencialmente, AJAX permite desde el lado del cliente realizar peticiones HTTP y recibir las respuestas del servidor sin necesidad de refrescar la página. El término fue acuñado por Jesse James Garrett en 2005. Originalmente el término era el acrónimo de Asynchronous JavaScript + XML aunque hoy día se refiere simplemente al patrón de envío y recibo de información desde el servidor sin refrescar la página.

¿Qué puedo hacer con AJAX?
Básicamente AJAX abrió las puertas a las aplicaciones web avanzadas. Se pueden hacer aplicaciones web que son más bien parecidas a las aplicaciones de escritorio que a sitios web. Ejemplo: Google Maps y Google Suggest.

Soporte en los navegadores
• • • • • Internet Explorer 5+ Firefox 1+ Opera 9+ Safari 2+ Chrome 1+

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

AJAX Básico – Ingeniería del Software 4

Utilizando el objecto XMLHttpRequest
El objeto XMLHttpRequest se originó como un componente de Microsoft, llamado XmlHttp, en la librería MSXML que se lanzó por primera vez con IE 5. Básicamente permitía al desarrollador abrir conexiones HTTP de forma sencilla y recibir en la respuesta datos en formato XML. Más tarde Mozilla creó su propia versión del objeto pero con exactamente las mismas propiedades y métodos. Más adelante Opera Software and Apple copiaron esta última implemetación realizada por Mozilla así dando lugar al soporte del objeto en los distintos navegadores.

ActiveX
Siendo el objeto XMLHttpRequest parte de la librería MSXML, se requiere la creación de una instancia de un objecto ActiveXObject.
var miAJAX = new ActiveXObject("Microsoft.XMLHttp");

De esta forma se instancia la primera versión del componente pero Microsoft recomienda utilizar siempre la última versión. Una función que ayudaría a elegir la última versión disponible de las recomendadas podría ser la siguiente:
function crearIEAjax(){ var versiones = [ "MSXML2.XmlHttp.6.0", "MSXML2.XmlHttp.3.0" ]; for (var i = 0; i < versiones.length; i++) { try { var oAJAX = new ActiveXObject(versiones[i]); return oAJAX; }catch (error) { // no hacer nada } } }

Aquí lo que se hace es crear un vector con las distintas versiones (de la más nueva a la vieja) y luego se itera el vector intentando crear el objecto con cada una de las opciones. En el momento en que se logra instanciar exitosamente el objeto se retorna.

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

AJAX Básico – Ingeniería del Software 4

Llamando al constructor nativo: Los demás navegadores
IE 7+, Firefox, Opera, Safari, y Chrome cuentan con una implementación nativa del XMLHttpRequest que se encuentra dentro del objecto window. Se intancia simplemente invocando a su contructor:
var miAJAX = new XMLHttpRequest();

Esta implmentación no tiene muchas versiones como el ActiveX. Está listo para utilizarse.

Jugando juntos: Una función para crear cualquiera
Así como cualquier otro problema que implica un soporte cross-browser (compatibilidad entre navegadores) esta no es la excepción. Una función que podría cumplir este cometido en base a las formas de intanciar el objeto que vimos anteriormente sería la siguiente:
function crearAJAX(){ if (window.XMLHttpRequest) { var oAJAX = new XMLHttpRequest(); return oAJAX; }else if(window.ActiveXObject){ var versiones = [ "MSXML2.XmlHttp.6.0", "MSXML2.XmlHttp.3.0" ]; for (var i = 0; i < versiones.length; i++) { try { var oAJAX = new ActiveXObject(versiones[i]); return oAJAX; }catch (error) { // no hacer nada } } } return null; }

Realizando peticiones con el objeto XMLHttpRequest
Una vez creado el objeto XMLHttpRequest, está listo para empezar a solicitar los datos. El primer paso en este proceso es para llamar al método open() para inicializar el objeto.
miAJAX.open(TipoPeticion, url, asincrono);

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

AJAX Básico – Ingeniería del Software 4 Este método acepta tres argumentos. El primero, TipoPeticion, es un valor de cadena que consiste en el tipo de petición que hacer. Los valores pueden ser GET o POST. El segundo argumento es la dirección para enviar la solicitud, y el tercero es un valor booleano que indica si la solicitud debe hacerse en modo síncrono o asíncrono. Peticiones Síncronas y Asíncronas La diferencia entre ambos es que con las peticiones asíncronas se agrega cierta complejidad al código, ya que tienen que manejar el evento readystatechange. En las solicitudes asincrónicas, el objeto XMLHttpRequest expone una propiedad readyState, que tiene un valor numérico, cada valor se refiere a un estado específico en vida de una solicitud, como sigue:      0 - El objeto ha sido creado, pero el método open () no se ha llamado 1 - El método open () ha sido llamado, pero la petición no ha sido enviada 2 - La petición ha sido enviada, las cabeceras y el estado son recibidos y disponibles 3 - Se ha recibido respuesta desde el servidor 4 - Los datos solicitados han sido plenamente recibidos

El evento readystatechange se dispara cada vez que cambia la propiedad readyState, llamando al controlador de eventos onreadystatechange. El cuarto y último estado de es el más importante, ya que le permite saber que la solicitud completa. Vayamos a un ejemplo completo de una petición asíncrona:
<!DOCTYPE html> <html lang="es"> <head> <title>AJAX Básico</title> <meta charset="utf-8"> <!-- AGREGAMOS UN POCO DE ESTILO A NUESTRO EJEMPLO --> <style> body { background: #cfcfcf; font-family: 'Arial', sans-serif, serif; } #contenedor { width: 400px; margin: 0 auto; padding: 20px; } #contenedor input { float: right; } #info { border: 1px #8a8a8a solid; padding: 10px; } </style>

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

AJAX Básico – Ingeniería del Software 4
<script> // FUNCIÓN PARA CREAR EL OBJECTO XMLHttpRequest COMPATIBLE function crearAJAX(){ if (window.XMLHttpRequest) { var oAJAX = new XMLHttpRequest(); return oAJAX; }else if(window.ActiveXObject){ var versiones = [ "MSXML2.XmlHttp.6.0", "MSXML2.XmlHttp.3.0" ]; for (var i = 0; i < versiones.length; i++) { try { var oAJAX = new ActiveXObject(versiones[i]); return oAJAX; }catch (error) { // no hacer nada } } } return null; } /** * FUNCION PRINCIPAL QUE SE EJECUTARA CUANDO * EL USUARIO HAGA CLICK EN EL BOTON "Traer Datos" */ function cargarDatos(){ // Instancia del objeto XMLHttpRequest var miAJAX = new crearAJAX(); // Obtengo el elemento HTML donde voy a desplegar la respuesta de mi petición var miDIV = document.getElementById('info'); // Verifico objeto: si se instanció procedo sino informo. if (miAJAX) { /** * FUNCION MANEJADORA DE LA PETICION AJAX * verifica exito de la petición y carga los datos * en el elemento HTML obtenido sino despliega mensaje */ function manejarAJAX(){ if (miAJAX.readyState == 4) { if (miAJAX.status == 200) { miDIV.innerHTML = miAJAX.responseText; }else { miDIV.innerHTML = "No se pudieron obtener los datos =("; } } }

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

AJAX Básico – Ingeniería del Software 4
// Inicializa la petición miAJAX.open("GET", "datos.txt", true); // Defino función manejadora de la petición miAJAX.onreadystatechange = manejarAJAX; // Envió la petición miAJAX.send(null); }else { miDIV.innerHTML = "El navegador no soporta AJAX ='("; }

} </script> </head> <body> <div id="contenedor"> <!-- Elemento donde se despliegarán los mensajes --> <div id="info"></div>

<!-- Botón de activación de la petición --> <input type="button" name="traer-datos" value="Traer datos" onclick="javascript:cargarDatos();" /> </div> </body> </html>

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

AJAX Básico – Ingeniería del Software 4

Creando un simple módulo AJAX
Siendo el concepto de reutilización en la programación muy importante crearemos un módulo AJAX muy simple y sólo hay una pieza de información que necesita mantener un seguimiento de: el objeto XMLHttpRequest subyacente. Por lo tanto, este módulo tendrá una sola propiedad: solicitud, que contiene el objeto XMLHttpRequest subyacente.

Constructor
/** * CONSTRUCTOR * @param sUrl string que contiene la URL donde se realizará la petición * @param fRetorno función que manejará el retorno de la petición * @return XMLHttpRequest */ function Ajax(sUrl,fRetorno){ // propiedad petición: utiliza el método crearAJAX() para instanciar un objeto XHR this.peticion = this.crearAJAX(); // inicializa la petición XHR con el método GET, la URL recibida, y de forma asíncrona this.peticion.open("GET", sUrl, true); // declara una variable temporal para utilizar la propiedad "peticion" // dentro de la función clausurada manejadorInterno() var tempPeticion = this.peticion; /** * METODO manejadorInterno * 1. Verifica que los datos solicitados han sido plenamente recibidos * 2. Verifica que el servidor haya respondido OK * 3. * a. Si se cumplen el punto 1 y 2, se pasa la respuesta de la peticion a la función recibida * b. Sino se informa */ function manejadorInterno(){ if (tempPeticion.readyState == 4) { if (tempPeticion.status == 200) { fRetorno(tempPeticion.responseText); }else{ alert("El servidor respondio " + tempPeticion.status + " =("); } } } // Se asigna el método manejadorInterno a la propiedad onreadystatechange this.peticion.onreadystatechange = manejadorInterno; }

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

AJAX Básico – Ingeniería del Software 4

Métodos
Tendrá 2 métodos los cuales serán: • • /**
* MÉTODO crearAJAX * (Documentación disponible en ejemplo anterior) */ Ajax.prototype.crearAJAX = function (){ var i; if (window.XMLHttpRequest) { var oAJAX = new XMLHttpRequest(); return oAJAX; }else if(window.ActiveXObject){ var versiones = [ "MSXML2.XmlHttp.6.0", "MSXML2.XmlHttp.3.0" ]; for (i = 0; i < versiones.length; i++) { try { var oAJAX = new ActiveXObject(versiones[i]); return oAJAX; }catch (error) { // no hacer nada } } } return null; } /** * MÉTODO enviar * Utiliza la función "send" de la propiedad "peticion" que contiene el objeto XHR */ Ajax.prototype.enviar = function (){ this.peticion.send(null); }

crearAJAX – se encargará de instanciar el nuevo objeto del módulo enviar – hará el envío de la petición de la instancia del nuevo objecto

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

AJAX Básico – Ingeniería del Software 4

Validar un formulario con AJAX
Probablemente ha visto esto muchas veces: al registrarse como nuevo usuario en el foro de un sitio web o a newsletters de algún sitio de interés, se encuentra con que su nombre de usuario deseado ha sido tomado. Por supuesto, no lo sabes hasta después de que haya rellenado el formulario, enviarlo, y ver la recarga de la página con nuevos datos (ni hablar de que ha perdido algunos de los datos introducidos). Como puede atestiguar, la validación de formularios puede ser una experiencia frustrante, por suerte, Ajax puede suavizar esta experiencia mediante el envío de datos en el servidor antes de enviar el formulario - que permite al servidor validar los datos, y permitir al usuario conocer el resultado de la validación, sin refresco de la página! En el siguiente ejemplo vamos a crear un formulario que utiliza técnicas Ajax para validar campos de formulario. Es posible acercarse a la construcción de tal formulario en una variedad de formas, la más fácil de implementar proporciona un vínculo que inicia una solicitud HTTP al servidor de aplicaciones para comprobar si la información que desea el usuario está disponible para su uso.

HTML: El formulario
<!-El evento "onsubmit" permite ejecutar la función "verificarContrasenas" antes del envío del formulario --> <form action="#" method="post" onsubmit="javascript:verificarContrasenas(); return false;"> <fieldset> <legend>Formulario</legend> <label for="nombre">Nombre: </label> <input type="text" name="nombre" id="nombre" /> <!-Notar que el evento "onclick" llama a la función javascript que realizará la verificación de disponiblidad. OBS.: se retorna "false" para que el navegador omita la acción por defecto del elemento HTML --> <a href="#" onclick="javascript:verificarNombre(); return false;">¿Disponible? </a><br> <label for="correo">Correo elec&oacute;nico: </label> <input type="text" name="correo" id="correo" /> <a href="#" onclick="javascript:verificarCorreo(); return false;">¿Disponible? </a><br> <label for="pass1">Contrase&ntilde;a: </label> <input type="password" name="pass1" id="pass1" /><br> <label for="pass2">Confirmar contrase&ntilde;a: </label> <input type="password" name="pass1" id="pass2" /> <p><input type="submit" name="enviar" value="Enviar" /></p> </fieldset> </form>

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

AJAX Básico – Ingeniería del Software 4

Javascript: las funciones
/** * FUNCIÓN responder * Recibe la respuesta de una petición AJAX y genera una alerta con la respuesta */ var responder = function (respuesta) { alert(respuesta); }; /** * FUNCIÓN verificarNombre * Realiza la tarea de recoger lo que el usuario ingresó * en el campo nombre y realiza una peticion HTTP enviando * el dato y luego despliega un mensaje. */ function verificarNombre(){ // Toma el valor del campo "nombre" var nombre = document.getElementById('nombre').value; // Crear una petición y en el parámetro URL adiciona el valor de lo ingresado var verificarNombreAjax = new Ajax('verificar.php?nombre='+nombre, responder); // Envia la petición verificarNombreAjax.enviar(); } /** * FUNCIÓN verificarCorreo * (Tiene el mismo funcionamiento que "verificarNombre") */ function verificarCorreo(){ var correo = document.getElementById('correo').value; var verificarCorreoAjax = new Ajax('verificar.php?correo='+correo, responder); verificarCorreoAjax.enviar();

}

/** * FUNCIÓN verificarContrasenas * Realiza una comparación entre los 2 valores de los campos * "Contraseña" y "Confirmar contraseña" */ function verificarContrasenas(){ // Toma los valores de ambos campos var pass1 = document.getElementById('pass1').value; var pass2 = document.getElementById('pass2').value; // Compara las contraseñas y si no son iguales alerta un mensaje if (pass1 != pass2) { alert("Claves no coinciden!"); }

}

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

AJAX Básico – Ingeniería del Software 4

PHP: validación de los datos en el servidor
<?php # Verificar la variable a ser evaluada if (isset($_GET['nombre'])) { # Datos no disponibles $nombres = array( 'juan', 'pedro', 'pablo', 'maria', 'rosa', 'eva' ); # Dato del usuario $nombre = strtolower($_GET['nombre']); # Verificacion del dato del usuario con respecto a datos no disponibles # Devuelve respuesta if (in_array($nombre, $nombres)) { echo 'NO disponible =('; } else { echo 'Disponible =D'; }

}

if (isset($_GET['correo'])) { $correos = array( 'juan@ejemplo.com', 'pedro@ejemplo.com', 'pablo@ejemplo.com', 'maria@ejemplo.com', 'rosa@ejemplo.com', 'eva@ejemplo.com' ); $correo = strtolower($_GET['correo']); if (in_array($correo, $correos)) { echo 'NO disponible =('; } else { echo 'Disponible =D'; }

} ?>

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

AJAX Básico – Ingeniería del Software 4

Cosas a tener en cuenta
Utilizar JavaScript para la comunicación entre servidor y cliente agrega un enorme poder a las capacidades del lenguaje. Sin embargo, este poder no viene sin su parte de advertencias. Las dos cuestiones más importantes son la seguridad y la usabilidad.

Seguridad
Política del mismo origen Desde los primeros días de Netscape Navigator 2.0, JavaScript no puede acceder a las escrituras o documentos de un origen diferente. Esta es una medida de seguridad a la que los fabricantes de navegadores se adhirieron, de lo contrario, los codificadores maliciosos podrían ejecutar código desde donde quisiesen. La política de mismo origen, determina que dos páginas son del mismo origen sólo si el protocolo (HTTP), el puerto (por defecto es 80), y el anfitrión son los mismos. Entonces, ¿qué tiene esto que ver con Ajax? Todo porque una gran parte de Ajax es Javascript. Por ejemplo, a causa de esta política, un objeto XMLHttpRequest no puede recuperar ningún archivo o documento a partir de un origen diferente. Usted puede superar este obstáculo mediante el servidor de origen de la página como un proxy para recuperar los datos desde los servidores de un origen diferente. Esta política también afecta a la técnica del iframe oculto. JavaScript no puede interactuar con dos páginas de diferentes orígenes, incluso si están en el mismo conjunto de marcos.

Usabilidad
Ajax rompe el molde de las aplicaciones web tradicionales y páginas. Permite a los desarrolladores para crear aplicaciones que se comportan de una manera más convencional. Esto, sin embargo, también es un inconveniente, ya que la Internet ha existido por muchos, muchos años, y los usuarios están acostumbrados a páginas web tradicionales. Por lo tanto, le corresponde a los desarrolladores garantizar que el usuario pueda utilizar sus páginas web, y utilizarlos como ellos esperan, sin causar frustración. Podríamos citar las siguientes dificultades: • • • • En la mayoría de los navegadores no se dispone del botón “Atrás” del navegador para peticiones realizadas con el objecto XMLHttpRequest. Manejar la respuesta del servidor Información adicional al usuario durante el tiempo de espera de respuesta Degradar correctamente cuando se produce un error Ajax

Con todos eston puntos uno puede lidiar, por lo tanto es importante no olvidar trabajarlos.

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

AJAX Básico – Ingeniería del Software 4

Resumen
• Se miró el objeto XMLHttpRequest, y cómo difieren entre IE 5 y 6, y los otros navegadores. Usted aprendió cómo hacer que ambas peticiones síncronas y asíncronas al servidor y cómo utilizar el controlador del evento onreadystatechange. Construyó su propio módulo de Ajax para hacer peticiones asíncronas HTTP más fácil de codificar. Se utilizó el nuevo módulo de Ajax en un formulario más inteligente, que comprueba los nombres de usuario y e-mails para ver si ya están en uso. Se analizaron algunas de las desventajas de Ajax, los problemas de seguridad y aspectos críticos de la técnica.

• • •

Adicionales
Puede descargar todos los códigos fuentes utilizados en los distintos ejemplos de este documento haciendo click aquí. Descargar ejemplos

OBSERVACIÓN IMPORTANTE No utilices ninguno de los códigos de ejemplo en aplicaciones en producción ya que ninguno de ellos tiene cubierto aspectos de seguridad sino simplemente se escribió lo nesario para la didáctica.

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla

Sign up to vote on this title
UsefulNot useful