Enviar datos por POST y GET en AJAX en una función

Cuando se realiza una Web que usa AJAX, el problema mas frecuente es tener que escribir una función 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 función 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 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 funciónes 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 aquí el código completo, y luego pasaré a analizarlo.

<script>
function objetus(file) {
    xmlhttp=false;
    this.AjaxFailedAlert = "Su navegador no soporta las funciónalidades 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>

Pasar valores por GET o POST mediante AJAX con una función - Explicando el código

Bien, aquí te pasaremos a explicar el código de la función a fin que podas entenderlo mejor.

El código tiene dos funciones.

La primera es la función que carga el objeto AJAX propiamente dicho. Si bien es compleja, su explicación no es objeto de este tutorial, y podes 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.

Para ello usa 4 variables:

_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 función.

DESGLOSANDO LA FUNCIÓN

¿Envío por GET o por POST?

Primeramente mediante el siguiente código

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 envía por método POST esto se hace de forma diferente a cuando envías mediante GET.

Adicionalmente sucede que si envías 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, colocar el método cómo 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 según corresponda, con el código adecuado para ajax.send.

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

Enviar mediante POST y GET usando una sola función AJAX - Ejemplos de uso

Bien, ahora vamos a ver un par de ejemplos de uso de esta función.

El ejemplo más simple es para pasar valores mediante GET. Para ello, por ejemplo, si usas un enlace el código 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, tenés 2 opciones.
Si lo haces mediante enlace luciría similar a esta forma:

<a href="javascript:recibeid('http://www.misitio.com/mipagina.php','variableenviada=enviaste get,'','micapa')">Mi Enlace GET</a>

Sin embargo para el envío 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 así:

<form name="Miformulario" onSubmit="return false">

Y la segunda es que en el tag del botón debes incluir con un onclick la función y escribir las variables a pasar de un modo particular para que las tome.

Aquí 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')" >

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.