Introducción a AJAX

5/10/2018 Introducción a AJAX - slidepdf.com

http://slidepdf.com/reader/full/introduccion-a-ajax-55a0c68181586 1/14

AJAX Básico – Ingeniería del Softwa

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 CO - 5289

• Ramos Amarilla, Gilberto CO - 5427

PROFESORES:

Lic. Omar Esgaib

Ing. Mauricio Merín

Ma. Betania López Pappalardo – Gilberto Ramos Amarilla




AJAX

¿Qué es AJAX?

Escencialmente, AJAX permite desde el lado del cliente realizar peticiones HTTP y recibir lasrespuestas 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ónimode Asynchronous JavaScript + XML aunque hoy día se refiere simplemente al patrón de envío yrecibo 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+





Utilizando el objecto XMLHttpRequest

El objeto XMLHttpRequest se originó como un componente de Microsoft, llamado XmlHttp, en lalibrería MSXML que se lanzó por primera vez con IE 5. Básicamente permitía al desarrollador abrirconexiones 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 propiedadesmétodos. Más adelante Opera Software and Apple copiaron esta última implemetación realizada pMozilla 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 unainstancia 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 lasiguiente:

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 eque se logra instanciar exitosamente el objeto se retorna.





Llamando al constructor nativo: Los demás navegadores

IE 7+, Firefox, Opera, Safari, y Chrome cuentan con una implementación nativa delXMLHttpRequest que se encuentra dentro del objecto window. Se intancia simplemente invocan

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 entrenavegadores) esta no es la excepción. Una función que podría cumplir este cometido en base a laformas 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;


}}

} 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);





Este método acepta tres argumentos. El primero, TipoPeticion, es un valor de cadena que consisteen el tipo de petición que hacer. Los valores pueden ser GET o POST. El segundo argumento es ladirección para enviar la solicitud, y el tercero es un valor booleano que indica si la solicitud debehacerse en modo síncrono o asíncrono.

Peticiones Síncronas y AsíncronasLa diferencia entre ambos es que con las peticiones asíncronas se agrega cierta complejidad alcó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, cad

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á

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





<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;


}}

} 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 mipetició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 =("}

}}





// Inicializa la peticiónmiAJAX.open("GET", "datos.txt", true);

// Defino función manejadora de la peticiónmiAJAX.onreadystatechange = manejarAJAX;

// Envió la peticiónmiAJAX.send(null);

}else {miDIV.innerHTML = "El navegador no soporta AJAX ='(";

}}

</script> </head > < body> <div id="contenedor">  <div id="info"></div >



<input type="button" name="traer-datos" value="Traer datos" onclick="javascript:cargarDatos();" />

</div > </ body></html>





Creando un simple módulo AJAX

Siendo el concepto de reutilización en la programación muy importante crearemos un módulo AJAXmuy simple y sólo hay una pieza de información que necesita mantener un seguimiento de: el obje

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 formaasí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;}





Métodos

Tendrá 2 métodos los cuales serán:

• 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

/*** 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;


}}

}

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);}





Validar un formulario con AJAX

Probablemente ha visto esto muchas veces: al registrarse como nuevo usuario en el foro de un sitweb o a newsletters de algún sitio de interés, se encuentra con que su nombre de usuario deseadoha 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 lodatos introducidos). Como puede atestiguar, la validación de formularios puede ser una experienciafrustrante, por suerte, Ajax puede suavizar esta experiencia mediante el envío de datos en el servidantes de enviar el formulario - que permite al servidor validar los datos, y permitir al usuario conoceel 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 dformulario. Es posible acercarse a la construcción de tal formulario en una variedad de formas, lamás fácil de implementar proporciona un vínculo que inicia una solicitud HTTP al servidor deaplicaciones para comprobar si la información que desea el usuario está disponible para su uso.

HTML: El formulario<form action="#" method="post" onsubmit="javascript:verificarContrasenas(); returnfalse;"> <fieldset> <legend >Formulario</legend > <label for="nombre">Nombre: </label> <input type="text" name="nombre" id="nombre" />  <a href="#" onclick="javascript:verificarNombre(); return false;">¿Disponible?</a>< br>

<label for="correo">Correo elecónico: </label> <input type="text" name="correo" id="correo" /> <a href="#" onclick="javascript:verificarCorreo(); return false;">¿Disponible?</a>< br>

<label for="pass1">Contraseña: </label> <input type="password" name="pass1" id="pass1" />< br>

<label for="pass2">Confirmar contraseña: </label> <input type="password" name="pass1" id="pass2" />

< p><input type="submit" name="enviar" value="Enviar" /></ p> </fieldset></form >





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!");}

}





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(

'[email protected]', '[email protected]', '[email protected]',

'[email protected]', '[email protected]', '[email protected]'

);$correo = strtolower($_GET['correo']);

if (in_array($correo, $correos)) { echo 'NO disponible =(';

} else { echo 'Disponible =D';

}}?>





Cosas a tener en cuenta

Utilizar JavaScript para la comunicación entre servidor y cliente agrega un enorme poder a lascapacidades del lenguaje. Sin embargo, este poder no viene sin su parte de advertencias. Las doscuestiones 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 documentos de un origen diferente. Esta es una medida de seguridad a la que los fabricantes denavegadores se adhirieron, de lo contrario, los codificadores maliciosos podrían ejecutar códigodesde donde quisiesen. La política de mismo origen, determina que dos páginas son del mismoorigen 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. Po

ejemplo, a causa de esta política, un objeto XMLHttpRequest no puede recuperar ningún archivo odocumento a partir de un origen diferente. Usted puede superar este obstáculo mediante el servidode origen de la página como un proxy para recuperar los datos desde los servidores de un origendiferente. 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 misconjunto de marcos.

Usabilidad

Ajax rompe el molde de las aplicaciones web tradicionales y páginas. Permite a los desarrolladorespara 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 usuarestán acostumbrados a páginas web tradicionales.

Por lo tanto, le corresponde a los desarrolladores garantizar que el usuario pueda utilizar suspá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 parapeticiones 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.





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ómutilizar el controlador del evento onreadystatechange.

• Construyó su propio módulo de Ajax para hacer peticiones asíncronas HTTP más fácil decodificar.

• Se utilizó el nuevo módulo de Ajax en un formulario más inteligente, que comprueba losnombres 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 aspectoscríticos de la técnica.

Adicionales

Puede descargar todos los códigos fuentes utilizados en los distintos ejemplos de este documentohaciendo click aquí.

Descargar ejemplos

OBSERVACIÓN IMPORTANTE

No utilices ninguno de los códigos de ejemplo en aplicaciones en producción ya que ningunde ellos tiene cubierto aspectos de seguridad sino simplemente se escribió lo nesario para ldidáctica.


http://dl.dropbox.com/u/6109646/fuentes/ajax.zip

http://dl.dropbox.com/u/6109646/fuentes/ajax.zip

Documents

Introducción a AJAX