Manual de Ajax

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Manual Ajax práctico
Taller Ajax

Autores del manual
Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Pablo Lecce
Damián Suárez
Andrés Fernández
Programador autodidacta
http://www.rhosting.com.ar
(3 capítulos)

Impulsor de XiFOX.net
http://www.cabezaderaton.com.ar
(1 capítulo)http://www.disegnocentell.com.ar
(1 capítulo)

Manual Ajax práctico – Taller Ajax: www.desarrolloweb.com/manuales/taller-ajax.html
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

1

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Enviar mediante POST y GET usando una sola funcion AJAX
En este tutorial tecontamos como crear una sola funcion que te permita pasar variables
mediante GET y POST entre dos páginas web usando AJAX .
Esto aligerará mucho el peso de tus archivos javascript y de tus páginas ya que usarás una
funcion para todo y no una para cada variable o conjunto de variables que desees pasar.
ANTES DE EMPEZAR
Este tutorial esta hecho para personas que saben cómo crear objetos AJAX, escribirfunciones
y pasarlas mediante AJAX por POST o GET. Tambien que tienen conocimientos sobre PHP y
javascript. Si no es tu caso, por favor profundiza en dichos aspectos a fin de entenderlo.
EL CODIGO
Primero copio aqui el codigo completo, y luego pasaré a analizarlo.

function objetus(file) {
xmlhttp=false;
this.AjaxFailedAlert = "Su navegador no soporta las funcionalidades de este sitio ypodria experimentarlo de forma
diferente a la que fue pensada. Por favor habilite javascript en su navegador para verlo normalmente.\n";
this.requestFile = file;
this.encodeURIString = true;
this.execute = false;
if (window.XMLHttpRequest) {
this.xmlhttp = new XMLHttpRequest();
if (this.xmlhttp.overrideMimeType) {
this.xmlhttp.overrideMimeType('text/xml');
}
}
else if(window.ActiveXObject) { // IE
try {
this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {
this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
this.xmlhttp = null;

Manual Ajax práctico – Taller Ajax: www.desarrolloweb.com/manuales/taller-ajax.html
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

2

Tu mejorayuda para aprender a hacer webs
www.desarrolloweb.com

}
}
if (!this.xmlhttp && typeof XMLHttpRequest!='undefined') {
this.xmlhttp = new XMLHttpRequest();
if (!this.xmlhttp){
this.failed = true;
}
}
}
return this.xmlhttp ;
}
function recibeid(_pagina,valorget,valorpost,capa){
ajax=objetus(_pagina);
if(valorpost!=""){
ajax.open("POST", _pagina+"?"+valorget+"&tiempo="+newDate().getTime(),true);
} else {
ajax.open("GET", _pagina+"?"+valorget+"&tiempo="+new Date().getTime(),true);
}
ajax.onreadystatechange=function() {
if (ajax.readyState==1){
document.getElementById(capa).innerHTML = " Aguarde por favor...";
}
if (ajax.readyState==4) {
if(ajax.status==200)
{document.getElementById(capa).innerHTML = ajax.responseText;}
else if(ajax.status==404)
{
capa.innerHTML ="La direccion no existe";
}
else
{
capa.innerHTML = "Error: ".ajax.status;

Manual Ajax práctico – Taller Ajax: www.desarrolloweb.com/manuales/taller-ajax.html
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

3

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

}
}
}
if(valorpost!=""){ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(valorpost);
} else {
ajax.send(null);
}
}


Artículo por Pablo Lecce

Pasar valores por GET o POST mediante AJAX - Explicando
el código
El codigo tiene dos funciones.
La primera es la función que carga el objeto AJAX propiamente dicho. Si bien es compleja, su
explicacion no es objeto de este tutorial, y podes usar...