Actualizar el contenido en tiempo real con AJAX
Tutorial indispensable que sirve como punto de partida para hacer llamamientos a archivos remotos en tiempo real sin que el usuario tenga que actualizar el navegador
Con este tutorial sobre AJAX comprobaremos lo fácil que es actualizar el contenido de una página web en tiempo real sin que un usuario tenga que actualizar el navegador.
La idea es muy simple, javascript se encarga de llamar remotamente a un archivo, ejecutarlo para luego extraer la información y mostrarla en nuestra página de forma transparente para el usuario.
El archivo a llamar puede contener la información que queráis por ejemplo puede ser un contador de usuarios online. Para simplificar y ver cómo funcionará el resultado de este tutorial os recomiendo crear un archivo llamado ajax.php, ponemos un número cualquiera (en un caso real el archivo ajax.php contendría el código para contar los usuarios online) y guardaremos el archivo.
Ahora creamos un archivo llamado codigo.php con este código:
<html>
<head>
<title>Ejemplo</title>
</head>
<script language="javascript" type="text/javascript">
var RequestObject = false;
var Archivo = 'http://localhost/ajax.php'; //directorio donde tenemos el archivo ajax.php
window.setInterval("actualizacion_reloj()", 2000); // el tiempo X que tardará en actualizarse
if (window.XMLHttpRequest) //
RequestObject = new XMLHttpRequest();
if (window.ActiveXObject)
RequestObject = new ActiveXObject("Microsoft.XMLHTTP");
function ReqChange() {
// Si se ha recibido la información correctamente
if (RequestObject.readyState==4) {
// si la información es válida
if (RequestObject.responseText.indexOf('invalid') == -1)
{
// obtener la respuesta
var msgs = RequestObject.responseText.split('|');
// Buscamos la div con id online
document.getElementById("online").innerHTML = msgs[0];
}
else {
// Por si hay algun error
document.getElementById("online").innerHTML = "Error llamando";
}
}
}
function llamadaAjax() {
// Mensaje a mostrar mientras se obtiene la información remota...
document.getElementById("online").innerHTML = "";
// Preparamos la obtención de datos
RequestObject.open("GET", Archivo , true);
RequestObject.onreadystatechange = ReqChange;
// Enviamos
RequestObject.send(null);
}
function actualizacion_reloj() {
llamadaAjax();
}
</script>
<body onload="llamadaAjax();">
<h2>Usuarios Online </h2>
<div id="online"></div>
</body>
</html>
Resumiendo, el contenido del archivo ajax.php se cargará dentro de la etiqueta div con id online del archivo código.php . Este sencillo ejemplo es la base para crear muchas otras utilidades interactivas más complejas.
Detalles sobre este artículo
Enviado por WebTutoriales.com:
Fecha Publicación: 25.03.2006
Este artículos ha sido visto 6.056 veces.
Vota este artículo:
Otros Artículos Relacionados
No hay artículos relacionados.
Enlaza Este Artículo Desde tu Web
El enlace se verá así: Actualizar el contenido en tiempo real con AJAX
 COMENTARIOS |
|
Posteado por 3rn3st0, el 14.05.2008, 09:15
Aún no uso el código del ejemplo, pero por lo que entiendo podría cubrir una necesidad que tengo. Por una parte, tengo una lista <li> con ítems que son sacados de una base de datos (categorías), necesito que al hacer clic sobre cada elemento, se actualice un <div> donde se haya el "cuerpo" de mi página. Sin embargo, no logro dar con la manera de hacerlo. Lo que muestras actualiza el contenido de manera automática, yo necesito hacerlo es luego de un clic. De antemano gracias por el auxilio que puedas darme y gracias por la información que constantemente publicas. |
 |