Autor
Diario de Honduras - fotos de mi última gran aventura
Algunas fotos (ejemplo del tutorial Fotolog en PHP)
Artículos
- ¿Por qué comprar una web basada en los estándares del W3C?
- Consejos CSS
- Fotolog PHP
- AJAX, ¿El futuro?
- AJAX, un ejemplo práctico
- Planificación de un proyecto modular en PHP
- Xenon Layout: Estructura dinámica con comportamiento líquido
- Consejos de/para un desarrollador front
- New Xenon Layout: A Simple Dynamic Layout
- JQuery, el comportamiento de la web 2.0
AJAX, un ejemplo práctico
publicado el 8 de Septiembre de 2005
Enlace permanente: http://www.marciobarrios.com/ejemplo-ajax
Desde hace un tiempo tenemos otra alternativa para la navegación en sitios web, y es utilizando AJAX, en otro artículo de la web podéis ver una reflexión sobre la utilización de Ajax, aquí veremos varios ejemplos prácticos y veremos su utilidad.
El objeto XMLHttpRequest
Este objeto permite hacer peticiones asíncronas al servidor y de esta manera lograremos interactuar con el servidor mediante los métodos tradicionales: GET, POST o HEAD. Utilizaremos la librería XHConn, es una opción más, no la única, pero con la función XHConn la implementación de AJAX es sencilla y limpia coser y cantar, ya que esta librería se encarga de llamar al objeto XMLHttpRequest.
Un ejemplo: cargamos un archivo externo en un contenedor
De este modo solo nos preocupamos de lo que queremos hacer: de los datos que queremos conseguir por un método en concreto y del contenedor en el que escribiremos estos datos, así que allá vamos, en el primer ejemplo cargamos datos externos, en este caso cargamos un archivo externo (el contenido de la sección de enlaces) en un div con id='content' que le pasamos por parámetro a la función cargar_contenido. Lo importante de la función es la última línia, donde pasamos por parámetro la dirección del archivo que queremos ejecutar (/includes/mod.php), el método para recibir los datos (GET), los parámetros que pudiera tener el archivo, en nuestro caso ninguno, pero la sintaxis es simple, 'mod='+escape(modulo), seguido de la variable donde hemos hecho la llamada a la funcion XHConn (peticion en nuestro caso):
<?
function cargar_contenido(target)
{
document.getElementById(target).innerHTML = '<p class="load">Cargando...</p>';
var myConn = new XHConn();
if (!myConn) alert("XMLHTTP no esta disponible. Inténtalo con un navegador más actual.");
var peticion = function (oXML) { document.getElementById(target).innerHTML = oXML.responseText; };
myConn.connect("/modulos/enlaces.php", "GET", "", peticion);
}
?>
Nota: Aunque veais los simbolos de obertura y cierre de PHP el código es javascript, pero para poder colorearlo necesito utilizarlos.
Para llamar a la funcion lo haramos de la siguiente manera:
<a href="/ruta_alternativa.php" onclick="cargar_contenido('content'); return false;"></a>
Nota: Cabe destacar que es importante para que nuestro sitio sea accesible disponer de rutas alternativas ya que es necesario javascript para que funcione AJAX y el usuario puede deshabilitarlo, o estar utilizando un lector de pantalla o navegando con un dispositivo no tradicional.
Ejemplo: clicka aquí para verlo funcionando.