miércoles, 22 de octubre de 2014

Javascript - Precarga con Ajax


Muchas veces tenemos la necesidad de mostrar un texto o una imagen que indique que se esta realizando una operación con Ajax. Los pasos para realizar esto son los siguientes:

1. Código HTML: es necesario definir un div con un id para que podamos actualizar el contenido buscado en la url o para que muestre el texto cargando.   

<div id="dvActualizar" ></div>

2. Codigo JavaScript:

function crearXMLHttpRequest() {
    var xmlHttp=null;
    if (window.ActiveXObject) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    return xmlHttp;
}


function loadAjaxUpdate(url,dvNombre){
        var contenido;
        contenido = document.getElementById(dvNombre);
        request=crearXMLHttpRequest();
        request.open("GET", url,true);
        request.onreadystatechange=function(){
          if(request.readyState==1){
                contenido.innerHTML = "Cargando...";
          }else if(request.readyState==4){
                if(request.status==200){                               
                   contenido.innerHTML = request.responseText;
                }else {
                   alert(request.statusText);
                }               
            }
        }
        request.send(null);
}

Para poder ejecutar el ajax solo es necesario pasar por parametro la url y el nombre del div.

loadAjaxUpdate('mi_url', 'dvActualizar');
Eso es todo!

No hay comentarios:

Publicar un comentario