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
<!-- Implementacion de funciones para el manejo simple de Ajax -->
<form name="consulta" action="../pruebas/ajax_recibe.php" id="consulta"> <input type="text" id="edad" /> <br /> <input type="text" id="peso" /><br /> <input type="text" id="altura" /><br />
<div id="outputAjaxForm1"></div>
<h4>Cobertura en Salud
</h4> <form name="costos" action="../pruebas/ajax_recibe.php" id="costos"> <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)
{
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')
{
$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!!)