Para esto voy a utilizar un script "ajax.js", el cual ire explicando por partesarchivo: 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
