Manuales Gratis

Enviar mediante POST y GET usando una sola funcion AJAX

Cuando se realiza una web que usa AJAX, el problema mas frecuente es tener que escribir una funcion para cada variable o conjunto de variables que se quiere pasar. Esto suma mucho peso al código de tu sitio web.

En este tutorial te contamos 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, 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.

EL CODIGO

Primero copio aqui el codigo completo, y luego pasaré a analizarlo.

<script>

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

}

}

</script>

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 cualquier funcion para la carga del objeto xhttprequest que vengas usando previamente.

La funcion recibeid es la que se encarga de pasar valores entre páginas mediante AJAX, ya sean estos mediante GET o mediante POST.

Para ello usa 4 variables:

1. _pagina por donde le paso la url de la página que deseo cargar
2. valorget por donde le paso las variables get que deseo pasar
3. valorpost por donde le paso las variables post que deseo pasar
4. capa donde indico el DIV o la capa donde se cargará la página que se solicite mediante la funcion.

DESGLOSANDO LA FUNCION

¿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 funcion 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 funcion

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



}

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=enviaste get','variablepostenviada=y enviaste post',

'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 funcion 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')" >
Podes ver este ejemplo funcionando haciendo click aqui

Bien, eso es básicamente todo. Resta que hagas tus propios experimentos con ella.

Desde ya que estamos abiertos a tus comentarios y mejoras.

Enlaces: