<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Objeto Ajax</title>
<script type="text/javascript">
/* el objeto XMLHttpRequest se crea en el momento de cargar la página */
    if(window.XMLHttpRequest) {
        objetoAjax = new XMLHttpRequest();
    }
        else if(window.ActiveXObject) {
            objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }

/* la función recibe dos parámetros, la URL de la página que va a solicitarse
   al servidor (origen) y la div en la que van a escribirse los resultados */
function obtenerDatos(origen, dest){
    /* comprueba que existe el objeto XMLHttpRequest */
    if(objetoAjax) {
        /*recogemos el valor dest en la variable GLOBAL destino
          su condición de global se debe a que no lleva delante la
          palabra reservada var. De esta forma (GLOBAL) destino estará disponible
          para cualquier funcion o parte del script */
        destino=dest;
        /*preparamos la petición mediante el open. Incluimos el parámetro GET y el
          la dirección de la URL que solicitaremos al servidor. No incluimos el parámetro tipo
          con lo cual tomará su valor por defecto que es true. */
        objetoAjax.open("GET", origen);
        /* asignamos al evento cambio de estado la ejecucion de la funcion
           gran_hermano. Observa que no ponemos paréntesis en la llamada. Elo se debe a que
           lo que pretendemos es asignar al evento la ejecucion de la función. Si incluyéramos
           los paréntesis tipicos gran_hermano() lo que estaríamos tratando de asignar al evento
           no sería la ejecución de la función sino el resultado de esta. */
        objetoAjax.onreadystatechange  = gran_hermano;
        /* preparada la peticion y activada la captura de eventos ya solo nos queda
           enviar la peticion al servidor */
        objetoAjax.send(null);
    } //cerramos el if
} //finalizamos la funcion

/* esta funcion no recibe ningun parámetro pero tiene disponible el valor de
   la variable destino creada (creada como GLOBAL) por la función anterior */

function gran_hermano(){
    /* comprueba si la propiedad readyState vale 4 (Transaccion completada)
       y que la petición haya sido considerada correcta por el servidor (status=200)*/
    if (objetoAjax.readyState==4 && objetoAjax.status==200) {
     /* si se completo correctamente la transacción escribe en la div de destino
        el texto recibido del servidor (responseText) */
        document.getElementById(destino).innerHTML = objetoAjax.responseText;
    }else{
     /* si no se completó la peticion le indicamos que escriba "procesando " */
        document.getElementById(destino).innerHTML ="procesando..";
    }
}

</script>
</head>
<body>
<div id="pruebas" style="color:red;background-color:yellow">Soy la div pruebas. Al pulsar cambiará mi contenido</div>
<A href="javascript:void(0);" onclick="obtenerDatos('domingo1.txt','pruebas');">Pulsar</a>
</body>
</html>