Precarga (preloader) en AJAX

agosto 12, 2007

Es fundamental, durante procesos largos de carga de datos, incluir un método para informar al usuario el estado del proceso. Lo más común es un “preloader”. El método AJAX nos da la posibilidad de hacer un preloader simple. De cada uno depende darle estilo y buen gusto, y lograr un efecto profesional.Antes de empezar, es necesario recordar que este documento se basa en el Tutorial de AJAX (Asynchronous Javascript and XML), realizado por Sisco. Usaré el mismo ejemplo, sólo cambiaré algunos valores en el CSS y el documento de Javascript. No es necesario recordar que se requieren conocimientos previos en HTML, Javascript y CSS, pero sí es necesario que lean el tuto de Sisco antes de este.

Conceptos

Al realizar la petición para cargar contenidos, se invoca al evento “onreadystatechange”. Este contiene unas sentencias capaces de establecer el “estado” de la carga. Veamos las propiedades disponibles:

  • objeto.readyState: Es una propiedad de sólo lectura. No tiene valores predeterminados. Al llamar a la propiedad puede obtenerse:
    • 0: “Uninitialized”, el objeto aún no se ha inicializado.
    • 1: “Loading”, se estan cargando los datos.
    • 2: “Loaded”, se han cargado los datos.
    • 3: “Interactive”, el usuario puede interactuar con el objeto, pero aún no está cargado completamente.
    • 4: “Complete”, el objeto se ha cargado completamente.
  • objeto.responseText: Valores devueltos por el servidor, en formato de cadena de texto.
  • objeto.responseXML: Valores devueltos en formato de documento XML. Puede visualizarse mediante funciones DOM (getElementByTagName, etc).
  • objeto.status: Es un código retornado por el servidor. Es una larga lista, aquí los más usados:
    • 200: “Ok”, la página existe y se ha cargado.
    • 400: “Forbidden”, la url no existe.
    • 414: “Request-URI Too Long”, los datos enviados por GET superan los 512

Comenzando

Con lo anterior dado por entendido, nos disponemos a empezar. Primero, entendamos la “técnica” a utilizar: mediante propiedades y eventos, haremos un preloader simple usando CSS para colocar una imágen representativa de la carga. Disponemos de un documento con 3 divs. Un menú, el contenido y el preloader.

El HTML

La index tendrá el siguiente formato:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Preloader en AJAX</title>
<link href="estilo_ajax.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript"></script>
</head>
<body>
<div id="menu"><a href="javascript:Cargar('texto1.html');">Texto 1</a><br />
  <a href="javascript:Cargar('texto2.html');">Texto 2</a></div>
<div id="contenido">Aquí se cargará el contenido.</div>
<div id="preloader">Este es el preloader</div>
</body>
</html>

Como ven, están las 2 divs que mencionamos antes. En el menú se hacen links a la funcion Javascript encargada de cargar el contenido. Le enviamos la URL del archivo como un parámetro. Dentro de las estiquetas “Script”, irá el código de Javascript que mencionaré más adelante. También se puede ver la referencia al archivo CSS, que también mencionaré luego.

El Javascript

Nuestro script está conformado por dos funciones básicas: la primera crea el objeto XMLHttpRequest y la segunda, carga el contenido en la div correspondiente. Verán que cambiamos el estilo de la div “preloader” mediante Javascript. La idea es agregar una imagen representativa del proceso de carga, tanto al principio como al final de la misma. Para esto utilicé dos pequeños gifs, invocados durante los eventos de carga.Trataré de comentar aquellas cosas que considere como “nuevas” y que no hayan sido explicadas en el tutorial al cual hago referencia, aunque no creo que sea necesario.

function NuevoAjax(){
        var xmlhttp=false;
        try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
                try{
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }catch(E){
                        xmlhttp = false;
                }
        }
 
        if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
                xmlhttp = new XMLHttpRequest();
        }
        return xmlhttp;
}
 
function Cargar(url){
        var contenido, preloader;
        contenido = document.getElementById('contenido');
        preloader = document.getElementById('preloader');
        //creamos el objeto XMLHttpRequest
        ajax=NuevoAjax(); 
        //peticionamos los datos, le damos la url enviada desde el link
        ajax.open("GET", url,true); 
        ajax.onreadystatechange=function(){
                if(ajax.readyState==1){
                        preloader.innerHTML = "Cargando...";
                        //modificamos el estilo de la div, mostrando una imagen de fondo
                        preloader.style.background = "url('loading.gif') no-repeat"; 
                }else if(ajax.readyState==4){
                        if(ajax.status==200){
                                //mostramos los datos dentro de la div
                                contenido.innerHTML = ajax.responseText; 
                                preloader.innerHTML = "Cargado.";
                                preloader.style.background = "url('loaded.gif') no-repeat";
                        }else if(ajax.status==404){
                                preloader.innerHTML = "La página no existe";
                        }else{
                                //mostramos el posible error
                                preloader.innerHTML = "Error:".ajax.status; 
                        }
                }
        }
        ajax.send(null);
}

El CSS

Aquí no hay mucho que explicar. En todo caso, si tienes dudas, puedes postearlas en el foro o revisar los tutoriales de CSS que hay disponibles.

body{
        background:#3366CC;
        font-family:Arial, Helvetica, sans-serif;
        font-size:10px;
        padding:20px;
        text-align:center;
}
 
#contenido{
        border:solid 1px #999999;
        margin:10px auto;
        padding:10px;
        width:400px;
        height:400px;
        //agrega scrolls en caso de ser necesario.
        overflow:auto; 
        float:left;
}
 
#menu{
        border:solid 1px #999999;
        background:#9999CC;
        margin:10px;
        padding:5px;
        width:100px;
        float:left;
}
 
#preloader{
        border:solid 1px #999999;
        margin:10px;
        width:200px;
        height:14px;
        padding:0;
        float:left;
}

Notas

  • A pesar de que desde la versión 8 de Opera, ya existe el objeto XMLHttpRequest, este script no funciona como debería. Mejor dicho, el preloader no funciona, pero no interfiere la carga ni el envío de datos. Simplemente no se ve el preloader.
  • El script fue testeado en: Firefox 1.5.0.4, Internet Explorer 6.0 SP2 y Opera 8.54.

Información adicional

Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros
 

Anuncios

3 Responses to “Precarga (preloader) en AJAX”

  1. Miguel Says:

    Amigo ya no funciona en Internet explorer 7 tienes otra versión del preloader a una pagina y que ademas no desaparesca el mensaje hasta que la pagina ya este cargada completamente ahi recien la muestre…

    espero tu ayuda

    excelente tu Blog.

  2. jatrix13 Says:

    muy bueno, pero hasta donde tengo entendido ese tuto es de Clab no? son gratis, pero para publicarlos deberias tener autorización no? por pura etica

    ¬¬

  3. ojasso Says:

    Jatrix13.

    Hola que tal!

    Tienes toda la razòn, creo que eso no lo habìa puesto. El origen claro! Creo que me equivoque en no ponerlo. Mil disculpas. Voy a ponder la fuente.

    Y gracias por la visita! Espero poner màs cosas por aquì, personales claro!


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: