Este es un ejemplo completo de uso de Ajax con una función genérica que podrás usar tanto para solicitudes post como get, así como para el envío de datos.
En este tutorial encontrarás un ejemplo completo de trabajo con Ajax, que pretende ser bastante genérico, ya que permite hacer distintos tipos de conexiones por Ajax, tanto Get como Post, por medio de una única función a la que pasaremos distintos parámetros cuando la invoquemos.
Esta función que te permitirá pasar variables mediante GET y POST entre dos páginas web usando AJAX, lo que aligerará mucho el peso de tus archivos javascript y de tus páginas ya que usarás una función 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, escribir funciones 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.
Código de la función genérica propuesta para Ajax
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 y podria 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;
}
}
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=" + new Date().getTime(), true);
} else {
ajax.open("GET", _pagina + "?" + valorget + "&tiempo=" + new Date().getTime(), true);
}
ajax.onreadystatechange = function () {
if (ajax.readyState == 1) {
document.getElementById(capa).innerHTML = "<img src='loadingcircle.gif' align='center'> 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;
}
}
}
if (valorpost != "") {
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(valorpost);
} else {
ajax.send(null);
}
}
Explicando el código
Bien, aqui pasaremos a explicar el código de la función a fin que puedas entenderlo mejor.
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 puedes usar cualquier función para la carga del objeto xhttprequest que vengas usando previamente.
- La función recibeid es la que se encarga de pasar valores entre páginas mediante AJAX, ya sean estos mediante GET o mediante POST.
La función que nos interesa, recibeid, usa 4 parámetros:
- _pagina por donde le paso la url de la página que deseo cargar
- valorget por donde le paso las variables get que deseo pasar
- valorpost por donde le paso las variables post que deseo pasar
- capa donde indico el DIV o la capa donde se cargará la página que se solicite mediante la funcion.
Desglosando la función
¿Envio por GET o por POST?
Primeramente mediante el siguiente codigo:
if (valorpost != "") {
ajax.open("POST", _pagina + "?" + valorget + "&tiempo=" + new Date().getTime(), true);
} else {
ajax.open("GET", _pagina + "?" + valorget + "&tiempo=" + new Date().getTime(), true);
}
La función determina el método que usará el objeto AJAX para enviar las variables a la página. Como sabes, si uno envia por metodo POST esto se hace de forma diferente a cuando envias mediante GET.
Adicionalmente sucede que si envias mediante GET y hay variables POST, las mismas no serán pasadas. Por ello la utilidad de este condicional es saber si hay variables POST que deben ser pasadas, setear el método a POST y sino dejarlo en GET.
La siguiente parte del código básicamente verifica los estados. Mientras la página esta siendo llamada carga una coqueta imagen de cargando, aunque podes reemplazarla por una frase si deseas.
Y una vez que recibe los resultados, los carga en la capa.
Finalmente la otra parte importante de la función:
Mediante el siguiente condicional, se complementa el primer condicional, enviando los datos de la solicitud mediante POST o GET segun corresponda, con el codigo adecuado para ajax.send.
if (valorpost != "") {
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(valorpost);
} else {
ajax.send(null);
}
Ejemplos de uso
El ejemplo mas simple es para pasar valores mediante GET. Para ello, por ejemplo, si usas un enlace el codigo debe lucir similar al siguiente:
<a href="javascript:recibeid ('http://www.misitio.com/mipagina.php', 'variableenviada=enviaste get,'','micapa')">Mi Enlace GET</a>
Si usas para enviar variables POST, tenes 2 opciones.
Si lo haces mediante enlace luciria similar a esta forma:
<a href="javascript:recibeid('http://www.misitio.com/mipagina.php', 'variablegetenviada=enviasteget', 'variablepostenviada=yenviastepost', 'micapa')">Mi Enlace POST</a>
Sin embargo para el envio mediante formulario hay 2 peculiaridades que debes conocer.
La primera es que en el tag de apertura del form debes incluir un return false, por ejemplo, debe lucir algo asi:
<form name="Miformulario" onSubmit="return false">
Y la segunda es que en el tag del boton debes incluir con un onclick la función y escribir las variables a pasar de un modo particular para que las tome.
Aqui un ejemplo:
<input name="Submit" type="submit" value="Enviar" onClick="recibeid('http://www.misitio.com/mipagina.php', 'variablegetenviada=enviaste get','variablepostenviada1=' + Miformulario.campoparalavariablepostenviada1.value + '&variablepostenviada2=' + Miformulario.campoparalavariablepostenviada2.value,'micapa')" >
Bien, eso es básicamente todo. Resta que hagas tus propios experimentos y adaptaciones para que funcione a tu gusto. Esperamos que te haya ayudado de algo este ejemplo.
Pablo Lecce
Programador autodidacta