Rogelio Ferreira Escutia Trmino AJAX El trmino AJAX

  • Slides: 32
Download presentation
Rogelio Ferreira Escutia

Rogelio Ferreira Escutia

Término AJAX El término AJAX se presentó por primera vez en el artículo "Ajax:

Término AJAX El término AJAX se presentó por primera vez en el artículo "Ajax: A New Approach to Web Applications (http: //www. adaptivepath. com/publication s/essays/archives/000385. php) " publicado por Jesse James Garrett el 18 de Febrero de 2005. 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 Java. Script + XML, que se puede traducir como "Java. Script asíncrono + XML". “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 2

Tecnologías AJAX Ajax no es una tecnología en sí mismo, en realidad, se trata

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. – XMLHttp. Request, para el intercambio asíncrono de información. – Java. Script, para unir todas las demás tecnologías. “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 3

Tecnologías AJAX “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010

Tecnologías AJAX “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 4

Modelo Web Clásico En las aplicaciones web tradicionales, las acciones del usuario en la

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 “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 5

Modelo Web Clásico “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo

Modelo Web Clásico “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 6

Modelo AJAX permite mejorar completamente la interacción del usuario con la aplicación, evitando las

Modelo 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. “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 7

Modelo AJAX “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010

Modelo AJAX “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 8

Modelos “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 9

Modelos “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 9

Objeto XMLHttp El objeto “XMLHttp” es el corazón de toda aplicación AJAX, dado que

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. “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 10

1998) Primera versión Remote Scripting de Microsoft En 1998 Microsoft liberó una tecnología conocida

1998) Primera versión 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 Java. Script al servidor sin que el ususario lo note ni se cambie de URL del sitio web, mientras se hace esperar al usuario. “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 11

1999) Segunda versión Active. X de Microsoft En 1999 Microsoft lanzó el Internet Explorer

1999) Segunda versión Active. X de Microsoft En 1999 Microsoft lanzó el Internet Explorer 5. 0 y ahí incorporó, bajo la tecnología Active. X, 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. “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 12

2004) Tercera versión XMLHttp de Google En el 2004, algunas empresas lideradas por Google

2004) Tercera versión XMLHttp de Google En el 2004, algunas empresas lideradas por Google retomaron el concepto de Active. X 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. “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 13

Modo de Uso Para hacer una petición AJAX es necesario realizar los siguientes pasos:

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 Java. Script 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. “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 14

1) Instanciar el objeto Internet Explorer objeto = new Active. XObject(“nombre. Clase”); IE 7+,

1) Instanciar el objeto Internet Explorer objeto = new Active. XObject(“nombre. Clase”); IE 7+, Firefox, Chrome, Opera, Safari objeto = new XMLHttp. Requestect(); “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 15

1) Instanciar el objeto Para cualquier navegador if (window. XMLHttp. Request) { // codigo

1) Instanciar el objeto Para cualquier navegador if (window. XMLHttp. Request) { // codigo para IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else { // codigo para IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 16

2) Configurar y abrir la petición Método “open” El método “open” no abre la

2) Configurar y abrir la petición Método “open” 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); “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 17

4) Enviar la petición y los datos al servidor Método “send” El método “send”

4) Enviar la petición y los datos al servidor Método “send” 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); “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 18

5) Administración de la petición Métodos mas utilizados open Configura la conexión (no abre

5) Administración de la petición Métodos mas utilizados open Configura la conexión (no abre la conexión) send Enviar una petición al servidor abort Abortar un petición en curso ready. State Administrar el estado de la conexión status Devuelve el código HTTP que nos devuelve el servidor startus. Text Devuelve un texto descriptivo del resultado del método "status" response. Text Devuelve una cadena con el contenido del cuerpo devuelto por el servidor anta la petición response. XML Recibe el objeto XML nativo en Java. Script y luego procesarlo por los métodos del DOM onreadystatechange Define la función que se ejecutará cuando se produzca evento “Introducción a AJAX”, Javier Eguíluz Pérez, un http: //www. librosweb. es/ajax/, mayo 2010 19

5) Administración de la petición Método “abort” El método “abort” se encarga de abortar

5) Administración de la petición Método “abort” 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(); “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 20

5) Administración de la petición “status” La propiedad “status” devuelve el código HTTP que

5) Administración de la petición “status” 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. “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 21

5) Administración de la petición “ready. State” Nos sirve para monitorear el estado de

5) Administración de la petición “ready. State” Nos sirve para monitorear el estado de la petición y nos regresa un código numérico entre 0 y 4. Código Estado Descripción 0 Sin inicializar El requerimiento sólo fué instanciado 1 Cargando El requerimiento se configuró (con open) pero todavía no se envió. 2 Cargando El requerimiento se envió o se está enviando, aunque todavía no tenemos respuesta alguna del servidor 3 Interactivo El servidor ya respondió la petición, ya tenemos disponibles las cabeceras pero el contenido todavía se está descargando “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 22

5) Administración de la petición “status” Algunos de los códigos de “status” mas usados

5) Administración de la petición “status” Algunos de los códigos de “status” mas usados son: Código Descripción 200 La petición se pudo procesar en forma correcta. 404 La URL que invocamos no existe en el servidor. 500 Error interno del servidor. Puede indicarnos que el servidor está saturado o que hay algún error en el script ejecutado en el servidor. 400 La petición enviada al servidor es errónea. Hay algún inconveniente con las cabeceras o con la información POST enviada. 403 No tenemos permiso de acceder al recurso en el servidor. 405 No se acepta el método. Hay un problema al definir los métodos POST ó GET. 414 La 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. 503 El servidor está temporalmente no disponible. “Introducción a AJAX”, Javier Eguíluz Pérez, http: //www. librosweb. es/ajax/, mayo 2010 23

Ejemplo 1: Búsqueda de Artículos en un catálogo Por medio de una lista desplegable

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

Ejemplo 1: Búsqueda de Artículos en un catálogo Por medio de AJAX se hace

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: 25

Ejemplo 1: Búsqueda de Artículos en un catálogo Hacemos un formulario con una lista

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 “show. User”: <form> <select name="users" onchange="show. User(this. value)"> <option value="">Selecciona un articulo: </option> <option value="coca">Coca Cola</option> <option value="pepsi">Pepsi Cola</option> </select> </form> 26

Ejemplo 1: Búsqueda de Artículos en un catálogo Iniciamos el código de nuestra función,

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: <script type="text/javascript"> function show. User(str) { if (str=="") { document. get. Element. By. Id("txt. Hint"). inner. HTML=""; return; } 27

Ejemplo 1: Búsqueda de Artículos en un catálogo Inicializamos nuestro objeto Http. Request, dependiendo

Ejemplo 1: Búsqueda de Artículos en un catálogo Inicializamos nuestro objeto Http. Request, dependiendo si es de tipo Microsoft Explorer o es de tipo estándar: if (window. XMLHttp. Request) {// code for IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// code for IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } 28

Ejemplo 1: Búsqueda de Artículos en un catálogo Preparamos nuestra conexión, y cuando esté

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. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("texto_ajax"). inner. HTML=xmlhttp. response. Text; } } 29

Ejemplo 1: Búsqueda de Artículos en un catálogo Ahora preparamos la conexión, especificando el

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(); } </script> 30

Ejemplo 1: Búsqueda de Artículos en un catálogo <html> <head> Cliente <meta charset="utf-8" />

Ejemplo 1: Búsqueda de Artículos en un catálogo <html> <head> Cliente <meta charset="utf-8" /> <title>Mostrar articulos con AJAX</title> <script type="text/javascript"> function show. User(str) { if (str=="") { document. get. Element. By. Id("txt. Hint"). inner. HTML=""; return; } if (window. XMLHttp. Request) {// code for IE 7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttp. Request(); } else {// code for IE 6, IE 5 xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); } xmlhttp. onreadystatechange=function() { if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("texto_ajax"). inner. HTML=xmlhttp. response. Text; } } xmlhttp. open("GET", "catalogo. php? articulo="+str, true); xmlhttp. send(); } </script> </head> <body> <form> <select name="users" onchange="show. User(this. value)"> <option value="">Selecciona un articulo: </option> <option value="coca">Coca Cola</option> <option value="pepsi">Pepsi Cola</option> </select> </form> <div id="texto_ajax"><b>Aqui se mostrara la informacion del producto. </b></div> </body> </html> 31

Ejemplo 1: Búsqueda de Artículos en un catálogo Servidor <html> <head> <meta charset="utf-8" />

Ejemplo 1: Búsqueda de Artículos en un catálogo Servidor <html> <head> <meta charset="utf-8" /> <title>Mostrar catalogo con imagenes</title> </head> <body> <? PHP $servidor="localhost"; $usuario="root"; $clave=""; $conexion = mysql_connect($servidor, $usuario, $clave); if (!$conexion) { echo "<h 2>Error al establecer conexión con el servidor!!!</h 2>"; exit; } if (!mysql_select_db("tiendita_catalogo", $conexion)) { echo "<h 2>Error al seleccionar la base de datos!!!"; exit; } $sql = "select * from catalogo"; $resultado=mysql_query ($sql, $conexion); echo "<table border='1'>"; while($renglon = mysql_fetch_array($resultado)) { echo "<tr>"; echo "<td>". $renglon['articulo']. "</td>"; echo "<td>". $renglon['precio']. "</td>"; echo "<td>". $renglon['cantidad']. "</td>"; echo "<td><img src='". $renglon['imagen']. "'</td>"; echo "</tr>"; } echo "</table>"; mysql_close($conexion); ? > </body> </html> 32