[Ajax] Generalizacion POST / GET y envio a multiples formularios en la misma pagina

Italico76 · #1 (**permalink**) 22/06/2014, 23:32

Buenas

La siguiente abstraccion permite cambiar facilmente entre un envio por GET o POST y enviar a multiples formularios (2 ó mas) en la misma pagina de forma muy sencilla.

Functiones provistas:

ajaxByPost(object, ajaxHandler, action, async)
ajaxByGet(object, ajaxHandler, action, async)
queryBuilder(obj,encode) -- usada por las primeras dos--

Se pueden contruir ejemplos muchisimo mas simples a partir de las mismas funciones basicas pero se dio un ejemplo de complejidad media para poder evaluar que pueden hacer.

Veamos un ejemplo:

Código HTML:

Ver original<html>
<body>
 
<!-- Implementacion de funciones para el manejo simple de Ajax -->
 
<h3>Paciente</h3>
 
<form name="consulta" action="../pruebas/ajax_recibe.php" id="consulta">    
    Edad:<br/>
    <input type="text" id="edad" /> <br />
    Peso:<br/> 
    <input type="text" id="peso" /><br />
    Altura: <br/>
    <input type="text" id="altura" /><br /> 
    Sexo:<br/>       
    <select id="sexo">
        <option value="masculino">M</option>
        <option value="femenino">F</option>
    </select>   
</form>
 
<div id="outputAjaxForm1"></div>
 
<h4>Cobertura en Salud</h4>
<form name="costos" action="../pruebas/ajax_recibe.php" id="costos"> 
    <select id="cobertura">
        <option value="Sisben">Sisben</option>
        <option value="EPS">EPS</option>
        <option value="Prepagada">Prepagada</option>
    </select>   
</form>
<div id="outputAjaxForm2"></div>

y Justo antes de </BODY> ..

Código Javascript:

Ver originalwindow.onload = function ()
{
 
    /* 
        Registro de eventos para los formularios
    */
    
    // Form2
    document.getElementById('costos').addEventListener("change", function (event)
    {                               
        fieldsForm2[event.target.id = event.target;                             
        ajaxByGet('costos',fieldsForm2,'outputfieldsForm2');    
    });
    
    
    // Form1
    form1Handler =  function (e)
    {   
        var id              = e.target.id;              
        fieldsForm1[id]     = e.target;
                
        ajaxByPost('consulta',fieldsForm1,'outputfieldsForm1');             
    };
    
    // Generalizo porque tengo varios eventos asociados al mismo formulario
    document.getElementById('consulta').addEventListener("change", function(){form1Handler(event);});
    document.getElementById('consulta').addEventListener("keyup", function(){form1Handler(event);});
    
 
}

Y las funciones que lo hacen posible y van justo encima de este ultimo JS son:

Código Javascript:

Ver original// Creo objetos literales (o arrays) donde almaceno referencia a campos que deseo enviar
var fieldsForm1 = {},
    fieldsForm2 = {};   
            
/* 
    Construye query para Ajax
    
    @param objeto literal con las referencias a los elementos del formulario
    @return query de la forma "edad= + edad + &peso= + peso + ..."
*/  
function queryBuilder(o,encode)
{
    encode = encode || false;
    
    var params='',
        c=0,
        val;        
    
    for (prop in o)
    {       
        if (prop == '__form__')
            val = o[prop];                      
        else    
            val = encode ? o[prop].value : encodeURIComponent(o[prop].value);
        
        if (c==0)
            params += prop+'='+val;
        else    
            params += '&'+prop+'='+val
            
        c++;
    }   
    return params;   
}           
    
    
    function ajaxRequestObjectBuilder()
    {     
    var object;
    
    try{
        // Opera 8.0+, Firefox, Safari
        object = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer
        try{
            object = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                object = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){                
                alert("Error en Ajax");
                return false;
            }
        }
        
    }          
    return object;
    }
 
 
 
/*
    @param objeto literal con referencia a los elementos del formulario
    @param action (url to submit)
    @param async
*/
function ajaxByPost(formName,object,insertionElementId,async){
 
    async               = async     || true;
    object.__form__     = formName;
        
    var action          = document.getElementById(formName).action,
        params          = queryBuilder(object,true),
        ajaxRequest     = ajaxRequestObjectBuilder(),   
        insertionElement= document.getElementById(insertionElementId);
        
    // registro funcion para Ajax
    ajaxRequest.onreadystatechange = function()
    {
        if(ajaxRequest.readyState == 4  && ajaxRequest.status == 200 ){ 
            insertionElement.innerHTML = ajaxRequest.responseText;
        }
    }       
        
    ajaxRequest.open("POST", action, async);    
    ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajaxRequest.send(params); 
}
 
 
 
/*
    @param objeto literal con referencia a los elementos del formulario
    @param action (url to submit)
    @param async
*/
function ajaxByGet(formName,object,insertionElementId,async){
 
    async               = async     || true;    
    object.__form__     = formName;
    
    var action          = document.getElementById(formName).action,
        params          = queryBuilder(object,false),
        ajaxRequest     = ajaxRequestObjectBuilder(),   
        insertionElement= document.getElementById(insertionElementId);
    
    // registro funcion para Ajax
    ajaxRequest.onreadystatechange = function()
    {
        //console.log ('Dentro de onreadystatechange');
        if(ajaxRequest.readyState == 4  && ajaxRequest.status == 200 ){ 
            insertionElement.innerHTML = ajaxRequest.responseText;
        }
    }       
    
    ajaxRequest.open("GET", action + '?' + params,  async);     
    ajaxRequest.send(null); 
}

y del lado del servidor he elegido PHP:

Código PHP:

Ver original<?php   
/*
    @author Pablo Bozzolo (italico76)
*/
    
/*
    @param nombre del 'indice'
    @param tipo de superglobal: POST, GET, FILES, COOKIES
*/
function getRequest($name,$superglobal=NULL)
{
    if (empty($superglobal))        
        return isset($_REQUEST[$name]) ? $_REQUEST[$name] : null; 
    if ($superglobal='POST')
        return isset($_POST[$name]) ? $_POST[$name] : null; 
    elseif ($superglobal='GET' )
        return isset($_GET[$name]) ? $_GET[$name] : null;   
}
 
//var_dump($_REQUEST);
 
$form       =       getRequest('__form__');
$edad       = (int) getRequest('edad');
$peso       = (int) getRequest('peso');
$altura     = (int) getRequest('altura');
$sexo       =       getRequest('sexo');
$cobertura  =       getRequest('cobertura');
 
/* Formulario #1 */ 
if ($form=='consulta')
{
    if (!empty($peso) && !empty($altura))  
        $imc =  round($peso / ($altura*$altura),4);
    else
        $imc = '--';
 
    echo "Edad $edad años,<br/>$sexo,<br/>altura $altura cm<br/> y peso $peso kg<p/>\n";    
    echo "IMC = $imc<p/>\n";
}
 
/* Formulario #2 */
if ($form=='costos')
{
    echo "Prestadora de salud: $cobertura";   
}

EDIT: fue *actualizado* ya que @Alexis88 me aviso de una falla (gracias Alexis!!)