Comunidad de diseño web y desarrollo en internet online

Precarga (preloader) en AJAX

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.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate