Rogelio Ferreira Escutia

2 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Término AJAX  El término AJAX se presentó por primera vez en el artículo "Ajax: A New Approach to Web Applications ( s/essays/archives/ php) " publicado por Jesse James Garrett el 18 de Febrero de  Hasta ese momento, no existía un término normalizado que hiciera referencia a un nuevo tipo de aplicación web que estaba apareciendo.  En realidad, el término AJAX es un acrónimo de Asynchronous JavaScript + XML, que se puede traducir como "JavaScript asíncrono + XML".

3 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Tecnologías AJAX  Ajax no es una tecnología en sí mismo, en realidad, se trata de varias tecnologías independientes que se unen de formas nuevas y sorprendentes.  Las tecnologías que forman AJAX son: – XHTML y CSS, para crear una presentación basada en estándares. – DOM, para la interacción y manipulación dinámica de la presentación. – XML, XSLT y JSON, para el intercambio y la manipulación de información. – XMLHttpRequest, para el intercambio asíncrono de información. – JavaScript, para unir todas las demás tecnologías.

4 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Tecnologías AJAX

5 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Modelo Web Clásico  En las aplicaciones web tradicionales, las acciones del usuario en la página (pinchar en un botón, seleccionar un valor de una lista, etc.) desencadenan llamadas al servidor. Una vez procesada la petición del usuario, el servidor devuelve una nueva página HTML al navegador del usuario.  Esta técnica tradicional para crear aplicaciones web funciona correctamente, pero no crea una buena sensación al usuario. Al realizar peticiones continuas al servidor, el usuario debe esperar a que se recargue la página con los cambios solicitados. Si la aplicación debe realizar peticiones continuas, su uso se convierte en algo molesto

6 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Modelo Web Clásico

7 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Modelo AJAX  AJAX permite mejorar completamente la interacción del usuario con la aplicación, evitando las recargas constantes de la página, ya que el intercambio de información con el servidor se produce en un segundo plano.  Las aplicaciones construidas con AJAX eliminan la recarga constante de páginas mediante la creación de un elemento intermedio entre el usuario y el servidor. La nueva capa intermedia de AJAX mejora la respuesta de la aplicación, ya que el usuario nunca se encuentra con una ventana del navegador vacía esperando la respuesta del servidor.

8 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Modelo AJAX

9 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Modelos

10 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Objeto XMLHttp  El objeto “XMLHttp” es el corazón de toda aplicación AJAX, dado que es el que técnicamente permite realizar una petición con el servidor en forma asincrónica y sin cambiar de URL.

11 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Remote Scripting de Microsoft  En 1998 Microsoft liberó una tecnología conocida como “Remote Scripting”, que permitía por medio de applet Java, realizar peticiones desde JavaScript al servidor sin que el ususario lo note ni se cambie de URL del sitio web, mientras se hace esperar al usuario. 1998) Primera versión

12 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 ActiveX de Microsoft  En 1999 Microsoft lanzó el Internet Explorer 5.0 y ahí incorporó, bajo la tecnología ActiveX, un objeto llamado XMLHttp que reemplazaba funcionalmente al applet Java de la anterior implementación de Microsoft.  De esta manera, era posible utilizar esta tecnología anteriormente conocida como “Remote Scripting” sin necesidad de que el usuario tenga instalada una máquina virtual de Java, lo que además aumentaba la velocidad de las aplicaciones de este tipo. 1999) Segunda versión

13 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 XMLHttp de Google  En el 2004, algunas empresas lideradas por Google retomaron el concepto de ActiveX y desarrollaron su propia versión para aplicarlo en sitios web, con lo que se pudieron realizar aplicaciones nuevas en HTML como el manejo de mapas.  Google logró que esta tecnología se hiciera conocida y muchos otros desarrolladores quisieron implementarla, dando nacimiento al concepto de AJAX. 2004) Tercera versión

14 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Modo de Uso  Para hacer una petición AJAX es necesario realizar los siguientes pasos: – 1) Instanciar el objeto. – 2) Configurar y abrir la petición. – 3) Definir una función de JavaScript que se encargue de administrar la evolución de la petición. – 4) Enviar la petición y los datos al servidor. – 5) En la función definida antes, manipular el estado de la petición, y en el caso correcto, recibir los datos y actuar en consecuencia con ellos.

15 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Internet Explorer objeto = new ActiveXObject(“nombreClase”); IE7+, Firefox, Chrome, Opera, Safari objeto = new XMLHttpRequestect(); 1) Instanciar el objeto

16 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Para cualquier navegador if (window.XMLHttpRequest) { // codigo para IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // codigo para IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 1) Instanciar el objeto

17 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Método “open” 2) Configurar y abrir la petición  El método “open” no abre la conexión con el servidor, sino que sólo configura la petición y la deja lista para enviarla y su codificación es: peticion.open(GET, “url”, true);

18 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Método “send” 4) Enviar la petición y los datos al servidor  El método “send” se encarga de enviar una petición al servidor una vez que se configuró el método open. Se pueden enviar datos vía POST o se puede usar el valor “null” si los envíos de datos son vía GET y se incluye el parámetro en la petición a la URL. peticion.send(null);

19 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Métodos mas utilizados openConfigura la conexión (no abre la conexión) sendEnviar una petición al servidor abortAbortar un petición en curso readyStateAdministrar el estado de la conexión statusDevuelve el código HTTP que nos devuelve el servidor startusTextDevuelve un texto descriptivo del resultado del método "status" responseTextDevuelve una cadena con el contenido del cuerpo devuelto por el servidor anta la petición responseXMLRecibe el objeto XML nativo en JavaScript y luego procesarlo por los métodos del DOM onreadystatechangeDefine la función que se ejecutará cuando se produzca un evento 5) Administración de la petición

20 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 Método “abort” 5) Administración de la petición  El método “abort” se encarga de abortar una petición en curso, luego de haber invocado al método “send”.  Abortar implica que ya no se nos avisará cuando lleguen los datos y en el navegador se suspenderán todas las acciones que se estaban utilizando para enviar datos al servidor y recibirlos. peticion.abort();

21 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 “status” 5) Administración de la petición  La propiedad “status” devuelve el código HTTP que nos devolvió el servidor.  Estos códigos nunca se administraron en la web 1.0 aunque los usuarios los conocen, como cuando se trata de accesar una página que no existe (error 404, recurso no encontrado).  Si recibimos un error del servidor por una petición AJAX, el navegador no mostrará nada al usuario, por lo que es nuestra responsabilidad el procesamiento de estos errores.

22 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 “readyState” 5) Administración de la petición  Nos sirve para monitorear el estado de la petición y nos regresa un código numérico entre 0 y 4. CódigoEstadoDescripción 0Sin inicializarEl requerimiento sólo fué instanciado 1CargandoEl requerimiento se configuró (con open) pero todavía no se envió. 2CargandoEl requerimiento se envió o se está enviando, aunque todavía no tenemos respuesta alguna del servidor 3InteractivoEl servidor ya respondió la petición, ya tenemos disponibles las cabeceras pero el contenido todavía se está descargando 4CompletoLa petición ya finalizó y el contenido está completo

23 “Introducción a AJAX”, Javier Eguíluz Pérez, mayo 2010 “status” 5) Administración de la petición  Algunos de los códigos de “status” mas usados son: CódigoDescripción 200La petición se pudo procesar en forma correcta. 404La URL que invocamos no existe en el servidor. 500Error interno del servidor. Puede indicarnos que el servidor está saturado o que hay algún error en el script ejecutado en el servidor. 400La petición enviada al servidor es errónea. Hay algún inconveniente con las cabeceras o con la información POST enviada. 403No tenemos permiso de acceder al recurso en el servidor. 405No se acepta el método. Hay un problema al definir los métodos POST ó GET. 414La URL pedida es muy larga. Puede producirse cuando se envían muchos datos por GET. En este caso, se debe cambiar el método a POST. 503El servidor está temporalmente no disponible.

24 Ejemplo 1: Búsqueda de Artículos en un catálogo  Por medio de una lista desplegable se selecciona un artículo:

25 Ejemplo 1: Búsqueda de Artículos en un catálogo  Por medio de AJAX se hace una petición al servidor para buscar el artículo y después imprimirlo en pantalla:

26 Ejemplo 1: Búsqueda de Artículos en un catálogo  Hacemos un formulario con una lista desplegable, en caso de algún cambio (onchange) se ejecuta la función “showUser”: Selecciona un articulo: Coca Cola Pepsi Cola

27 Ejemplo 1: Búsqueda de Artículos en un catálogo  Iniciamos el código de nuestra función, primero verificando que la lista desplegable de nuestro formulario no nos haya enviado un caracter nulo(“”), si es así regresamos nuevamente al formulario: function showUser(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; }

28 Ejemplo 1: Búsqueda de Artículos en un catálogo  Inicializamos nuestro objeto HttpRequest, dependiendo si es de tipo Microsoft Explorer o es de tipo estándar: if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

29 Ejemplo 1: Búsqueda de Artículos en un catálogo  Preparamos nuestra conexión, y cuando esté terminada nuestra petición (4) y se haya procesado de manera completa (200), entonces actualizamos el objeto “texto_ajax” con la respuesta de la petición al servidor: xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("texto_ajax").innerHTML=xmlhttp.responseText; }

30 Ejemplo 1: Búsqueda de Artículos en un catálogo  Ahora preparamos la conexión, especificando el tipo de envío (GET), la página a que hacemos la petición (catalogo.php) y el parámetro que le vamos a enviar (articulo= ….). Por último hacemos la petición al servidor (send) xmlhttp.open("GET","catalogo.php?articulo="+str,true); xmlhttp.send(); }

31 Ejemplo 1: Búsqueda de Artículos en un catálogo  Cliente Mostrar articulos con AJAX function showUser(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("texto_ajax").innerHTML=xmlhttp.responseText; } xmlhttp.open("GET","catalogo.php?articulo="+str,true); xmlhttp.send(); } Selecciona un articulo: Coca Cola Pepsi Cola Aqui se mostrara la informacion del producto.

32 Ejemplo 1: Búsqueda de Artículos en un catálogo  Servidor Mostrar catalogo con imagenes <?PHP $servidor="localhost"; $usuario="root"; $clave=""; $conexion = mysql_connect($servidor, $usuario, $clave); if (!$conexion) { echo " Error al establecer conexión con el servidor!!! "; exit; } if (!mysql_select_db("tiendita_catalogo",$conexion)) { echo " Error al seleccionar la base de datos!!!"; exit; } $sql = "select * from catalogo"; $resultado=mysql_query ($sql,$conexion); echo " "; while($renglon = mysql_fetch_array($resultado)) { echo " "; echo " ". $renglon['articulo']. " "; echo " ". $renglon['precio']. " "; echo " ". $renglon['cantidad']. " "; echo " "; } echo " "; mysql_close($conexion); ?>