¿Qué es AJAX?
AJAX son las siglas de Asynchronous JavaScript And XML. Es una colección de tecnologías que permiten desarrollar webs altamente interactivas ahorrando ancho de banda y recargas de página.
La clave para el funcionamiento de AJAX es el objeto XMLHttpRequest (uno de los pocos inventos útiles de Microsoft, mira por dónde)
Actualmente, AJAX funciona en los siguientes navegadores:
* Mozilla y familia
* Internet Explorer Windows (a partir de la versión 5)
* Safari y familia
*MUCHOS MAS
Qué necesitamos para este tutorial
* Un editor de texto
* Un servidor web
* Café (opcional)
* Unos 30 minutillos
Vamos a construir una página web simple, donde cargaremos datos a partir de otra sin necesidad de recargar la página actual. También veremos como darle al usuario un poco de “feedback” de qué está pasando. Con suerte, también nos tomaremos un café.
Empezamos
La cosa empieza suave. Vamos a crear un fichero HTML (que en un derroche de originalidad llamaremos ‘index.html’) con el siguiente contenido (véase que somos unos pedantes y vamos a usar sintaxis XHTML 1.1 pata negra):
index.html
Como vemos, nada del otro mundo. Nótese el detalle de que tenemos un DIV vacío, al que le hemos asignado un ID único. Es en este DIV donde vamos a cargar nuestro contenido dinámico.
Complicando el tema
Ahora vamos a crear el objeto XMLHttpRequest, que será el encargado de actualizar el contenido dinámico de nuestro DIV ‘detalles’.
Creamos un fichero (que, recurriendo a nuestra creatividad habitual, llamaremos ‘ajax.js’):
ajax.js
Bien. De momento tenemos una función que crea un objeto XMLHttpRequest (con una u otra sintaxis, dependiendo del navegador) y le asigna la función ‘processReqChange’ al evento ‘onreadystatechange’ (que ahora explicaremos qué quiere decir
También hemos usado el método ‘open’ de XMLHttpRequest (que se usa para asignarle la dirección URL de donde va a cargar los datos) y el método ’send’ (que se usa para efectuar la llamada a la URL asignada con ‘open’)
Nos vamos a detener un poco en la sintaxis de ‘open’:
Los dos primeros parámetros son obligatorios. ‘metodo’ puede ser GET o POST, modo-asincrono es un booleano (TRUE|FALSE) que indica si la llamada será asíncrona (se seguiran ejecutando scripts en la página mientras se cargan los datos) o no (se detendrá la ejecución de los scripts hasta que se complete la carga de datos). ‘usuario’ y ‘password’ son, sorprendentemente, el usuario y el password a usar si la URL requiere autentificación
Seguimos…
Ahora declararemos la función processReqChange:
processReqChange es una función que se ejecuta cada vez que se dispara el evento ‘onreadystatechange’ del objeto XMLHttpRequest. ¿Y cuando se dispara este evento? Pues, como su propio nombre indica, cada vez que cambia el estado del objeto. Este evento le asigna al objeto XMLHttpRequest una variable (’readyState’) que puede tener los siguientes valores (puede tener más, pero es que si no esto no sería un mini-tutorial):
* 0 = no inicilizado (por ejemplo, cuando acabamos de crear el objeto)
* 1 = cargando datos (hemos llamado al método ’send’ del objeto)
* 4 = carga completada (ya podemos acceder a los datos que nos ha devuelto el servidor)
Entonces, cada vez que cambie la variable ‘readyState’ miramos si es igual a 4 (carga completada), y si es así metemos el contenido del objeto XMLHttpRequest
en nuestro DIV
Integrando el script
Ahora vamos a enlazar el JavaScript con el HTML (por aquello de que funcione, y tal… es que si no no tiene gracia…)
index.html
Bien… ahora nos falta llamar a la función ‘cargaXML’ de alguna forma. En nuestro ejemplo, vamos a usar un ’select’ más o menos de este pelaje:
Lo que estamos haciendo es decirle al navegador que cuando cambie la selección (’onchange’) se ejecute la función ‘cargaXML’ con la URL que hemos puesto en el ‘value’ como parámetro’.
Nuestro ‘index.html’ definitivo quedaría tal que así (voy a añadir unos estilos para que se vea más claramente nuestro DIV ‘detalles’, y para que veamos que se puede decorar el contenido cargado dinámicamente con CSS):
index.html
Lógicamente, ahora deberemos crear los ficheros ‘001.html’, ‘002.html’ y ‘003.html’. Esto, como diría mi profesor de álgebra, es trivial y se deja como ejercicio para casa.
Nota: si estás pensando en usar una URL externa a tu dominio, que se te vaya quitando la idea de la cabeza. XMLHttpRequest está sometido a las mismas restricciones de seguridad que el sandbox de JavaScript: no puedes usar el protocolo file:// y no puedes acceder a direcciones fuera de tu dominio. Ahora bien, si tu proveedor es un poco freestyle en temas de seguridad (y es un tema que, digamos, tampoco te preocupa demasiado a ti) puedes usar el viejo truco de incluir el fichero mediante PHP:
Vaya por delante que hacer esto es una locura, y que lo más probable es que tu proveedor no te deje ni intentarlo.
FUENTE: SOFANARANJA.COM
AJAX son las siglas de Asynchronous JavaScript And XML. Es una colección de tecnologías que permiten desarrollar webs altamente interactivas ahorrando ancho de banda y recargas de página.
La clave para el funcionamiento de AJAX es el objeto XMLHttpRequest (uno de los pocos inventos útiles de Microsoft, mira por dónde)
Actualmente, AJAX funciona en los siguientes navegadores:
* Mozilla y familia
* Internet Explorer Windows (a partir de la versión 5)
* Safari y familia
*MUCHOS MAS
Qué necesitamos para este tutorial
* Un editor de texto
* Un servidor web
* Café (opcional)
* Unos 30 minutillos
Vamos a construir una página web simple, donde cargaremos datos a partir de otra sin necesidad de recargar la página actual. También veremos como darle al usuario un poco de “feedback” de qué está pasando. Con suerte, también nos tomaremos un café.
Empezamos
La cosa empieza suave. Vamos a crear un fichero HTML (que en un derroche de originalidad llamaremos ‘index.html’) con el siguiente contenido (véase que somos unos pedantes y vamos a usar sintaxis XHTML 1.1 pata negra):
index.html
| Code: |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Mini-tutorial AJAX</title> </head> <body> <h4>Mini-tutorial AJAX</h4> <div id="detalles"></div> </body> </html> |
Como vemos, nada del otro mundo. Nótese el detalle de que tenemos un DIV vacío, al que le hemos asignado un ID único. Es en este DIV donde vamos a cargar nuestro contenido dinámico.
Complicando el tema
Ahora vamos a crear el objeto XMLHttpRequest, que será el encargado de actualizar el contenido dinámico de nuestro DIV ‘detalles’.
Creamos un fichero (que, recurriendo a nuestra creatividad habitual, llamaremos ‘ajax.js’):
ajax.js
| Code: |
|
// Vamos a presuponer que el usuario es una persona inteligente... var isIE = false; // Creamos una variable para el objeto XMLHttpRequest var req; // Creamos una funcion para cargar los datos en nuestro objeto. // Logicamente, antes tenemos que crear el objeto. // Vease que la sintaxis varia dependiendo de si usamos un navegador decente // o Internet Explorer function cargaXML(url) { // Primero vamos a ver si la URL es una URL if(url==''){ return; } // Usuario inteligente... if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(null); // ...y usuario de Internet Explorer Windows } else if (window.ActiveXObject) { isIE = true; req = new ActiveXObject("Microsoft.XMLHTTP" if (req) { req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(); } } } |
Bien. De momento tenemos una función que crea un objeto XMLHttpRequest (con una u otra sintaxis, dependiendo del navegador) y le asigna la función ‘processReqChange’ al evento ‘onreadystatechange’ (que ahora explicaremos qué quiere decir
También hemos usado el método ‘open’ de XMLHttpRequest (que se usa para asignarle la dirección URL de donde va a cargar los datos) y el método ’send’ (que se usa para efectuar la llamada a la URL asignada con ‘open’)
Nos vamos a detener un poco en la sintaxis de ‘open’:
| Code: |
| open('metodo','URL',modo-asincrono,'usuario','password'); |
Los dos primeros parámetros son obligatorios. ‘metodo’ puede ser GET o POST, modo-asincrono es un booleano (TRUE|FALSE) que indica si la llamada será asíncrona (se seguiran ejecutando scripts en la página mientras se cargan los datos) o no (se detendrá la ejecución de los scripts hasta que se complete la carga de datos). ‘usuario’ y ‘password’ son, sorprendentemente, el usuario y el password a usar si la URL requiere autentificación
Seguimos…
Ahora declararemos la función processReqChange:
| Code: |
| function processReqChange(){
// Referencia a nuestro DIV con ID unica: var detalles = document.getElementById("detalles" // Si se ha completado la carga de datos, los mostramos en el DIV... if(req.readyState == 4){ detalles.innerHTML = req.responseText; } else { // ...en caso contrario, le diremos al usuario que los estamos cargando: detalles.innerHTML = '<img src="loading.gif" align="absmiddle" /> Cargando...'; } } |
processReqChange es una función que se ejecuta cada vez que se dispara el evento ‘onreadystatechange’ del objeto XMLHttpRequest. ¿Y cuando se dispara este evento? Pues, como su propio nombre indica, cada vez que cambia el estado del objeto. Este evento le asigna al objeto XMLHttpRequest una variable (’readyState’) que puede tener los siguientes valores (puede tener más, pero es que si no esto no sería un mini-tutorial):
* 0 = no inicilizado (por ejemplo, cuando acabamos de crear el objeto)
* 1 = cargando datos (hemos llamado al método ’send’ del objeto)
* 4 = carga completada (ya podemos acceder a los datos que nos ha devuelto el servidor)
Entonces, cada vez que cambie la variable ‘readyState’ miramos si es igual a 4 (carga completada), y si es así metemos el contenido del objeto XMLHttpRequest
| Code: |
| req.responseText |
en nuestro DIV
| Code: |
| detalles.innerHTML = req.responseText |
Integrando el script
Ahora vamos a enlazar el JavaScript con el HTML (por aquello de que funcione, y tal… es que si no no tiene gracia…)
index.html
| Code: |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Mini-tutorial AJAX</title> <script src="ajax.js" language="JavaScript"></script> </head> <body> <h4>Mini-tutorial AJAX</h4> <div id="detalles"></div> </body> </html> |
Bien… ahora nos falta llamar a la función ‘cargaXML’ de alguna forma. En nuestro ejemplo, vamos a usar un ’select’ más o menos de este pelaje:
| Code: |
| <select onchange="cargaXML(this.value)">
<option value="">Elige...</option> <option value="001.html">001</option> <option value="002.html">002</option> <option value="003.html">003</option> </select> |
Lo que estamos haciendo es decirle al navegador que cuando cambie la selección (’onchange’) se ejecute la función ‘cargaXML’ con la URL que hemos puesto en el ‘value’ como parámetro’.
Nuestro ‘index.html’ definitivo quedaría tal que así (voy a añadir unos estilos para que se vea más claramente nuestro DIV ‘detalles’, y para que veamos que se puede decorar el contenido cargado dinámicamente con CSS):
index.html
| Code: |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Mini-tutorial AJAX</title> <script src="ajax.js" language="JavaScript"></script> <style> #detalles { margin: 20px; border: 1px solid #F0F0F0; padding: 10px; font-size: 10px; } </style> </head> <body> <h4>Mini-tutorial AJAX</h4> <select onchange="cargaXML(this.value)"> <option value="">Elige...</option> <option value="001.html">001</option> <option value="002.html">002</option> <option value="003.html">003</option> </select> <div id="detalles"></div> </body> </html> |
Lógicamente, ahora deberemos crear los ficheros ‘001.html’, ‘002.html’ y ‘003.html’. Esto, como diría mi profesor de álgebra, es trivial y se deja como ejercicio para casa.
Nota: si estás pensando en usar una URL externa a tu dominio, que se te vaya quitando la idea de la cabeza. XMLHttpRequest está sometido a las mismas restricciones de seguridad que el sandbox de JavaScript: no puedes usar el protocolo file:// y no puedes acceder a direcciones fuera de tu dominio. Ahora bien, si tu proveedor es un poco freestyle en temas de seguridad (y es un tema que, digamos, tampoco te preocupa demasiado a ti) puedes usar el viejo truco de incluir el fichero mediante PHP:
| Code: |
| include('url-externa-de-la-que-no-sabemos-nada'); |
Vaya por delante que hacer esto es una locura, y que lo más probable es que tu proveedor no te deje ni intentarlo.
FUENTE: SOFANARANJA.COM
