SCRIPT PARA CARGAR PAGINAS CON AJAX

En este post les mostrare como poder recargar una pagina con Ajax, en si es un codigo que quiero mostrarles, bastante basico y sencillo, donde solo cargo una pagina con el ObjetoXMLhttpRequest (El Corazon de Ajax) que es muy util en el momento que deseamos mostrar alguna informacion o simplemente hacer una llamada Asíncrona, el ejemplo quedara masomenos asi:Para esto voy a utilizar un script "ajax.js", el cual ire explicando por partes

archivo: ajax.js

  function getXMLHttpRequest(){

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;
} 

Bueno, si recien estas empezando con Ajax y derrepente no entiendes este codigo, no te preocupes pues solo lo utilizaremos para crear el objeto XMlhttpRequest y siempre
va a ser de la misma manera, no variara para nada, excepto a la hora de mandar algunos parametros.

Luego de ese metodo, crearemos una funcion, la cual llamará a este método que hemo creado

archivo: ajax.js

function TraerPagina(datos,contenedor){ //datos= URl de la pagina qu queremos mostrar - contenedor=id del
// objeto donde quieres mostrar la respuesta del servidor (generalmente un div, pero no necesariamente)
divResultado = document.getElementById(contenedor);
ajax=getXMLHttpRequest();
ajax.open("GET", datos); //metodo de la peticion (tambien puede ser POST)
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
divResultado.innerHTML=ajax.responseText
}
else {
divResultado.innerHTML='Imagen Gif Cargando'; //Aqui poner un tag (img src="loading.gif"), que se cargara mientras se completa la transaccion
}
}
ajax.send(null)
}

Esos dos codigos de arriba, van a ir en un solo archivo que lo llamaremos "ajax.js".

Ahora crearemos una pagina de donde haremos las llamadas a otras pagina mediante "Ajax";

Para Hacer cada llamada, lo hacemos especificando la URl a la que deseamos llamar, y el nombre del Objeto

En Este caso, el Objeto en el cual quiero que se muestre la informacion es un DIV con id "sam"

Le das click al boton y la informacion en la parte de abajo cambia sin refrescar la pantalla haciendo una peticion Asíncrona. a los archivos a los que hace referencia, no son mas que 2 archivos .html (alumnos y docentes) que tienem un texto cuanquiera, ahi tambien se puede llamar a archivos .php, .jsp, etc. y traer informacion de una Base de datos o un contenedor de informacion como puede ser un XML.

Más Adelante les mostrare como llamar por el metodo POSt enviando parámetros a u archivo PHP.

LAS FUENTES:
DESCARGAR FUENTES DEL EJEMPLO (.zip)


EJEMPLO EN FUNCIONAMIENTO:

Ejemplo