Tutorial Ajax manejo de paso de datos por métodos GET y POST
Bueno, manos a la obra. Me he permitido compartir y poner a disposición de los usuarios de ajaxhispano.com la librería ajax que me hice y explicar paso a paso como está hecha y como utilizarla.
En primer lugar lo primero que hay que tener es la instancia de creación del objeto que hará la peticion htmlrequest.
/*
*Esta libreria es una libreria AJAX creada por Javier Mellado con la inestimable
*colaboracion de Beatriz Gonzalez.
*y descargada del portal AJAX Hispano http://www.ajaxhispano.com
*contacto javiermellado@gmail.com
*
*Puede ser utilizada, pasada, modificada pero no olvides mantener
*el espiritu del software libre y respeta GNU-GPL
*/
function creaAjax(){
var objetoAjax=false;
try {
/*Para navegadores distintos a internet explorer*/
objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
/*Para explorer*/
objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E) {
objetoAjax = false;
}
}
if (!objetoAjax && typeof XMLHttpRequest!='undefined') {
objetoAjax = new XMLHttpRequest();
}
return objetoAjax;
}
Una vez creada la instancia, ya solamente tenemos que construir la función específica que nos realice lo que queramos. En mi caso lo que he construído (por que es lo que hasta ahora me ha hecho falta) es una función que pasándole unos valores al script del servidor, me devuelve una cadena de texto y esta cadena de texto me la va a pintar en una capa. Ya sabéis, el típico registro de una web o la interactuación de datos personales, formularios, etc. entre cliente-servidor.
Esta función recibe como parámetros la url donde se encuentra el script que recoge los datos y los procesa. La capa, que es donde va a recibir y pintar los datos, inicialmente vacía o con el contenido que nos convenga a nosotros. Los valores de las variables que mandamos con el formulario html, -ya veremos como pasarlas para cada método GET y POST ya que esta función es genérica y está implementada para usarse indistintamente por uno y otro método- y el método opcional 'GET' o 'POST'.
function FAjax (url,capa,valores,metodo)
{
var ajax=creaAjax();
var capaContenedora = document.getElementById(capa);
/*Creamos y ejecutamos la instancia si el metodo elegido es POST*/
if(metodo.toUpperCase()=='POST'){
ajax.open ('POST', url, true);
ajax.onreadystatechange = function() {
if (ajax.readyState==1) {
capaContenedora.innerHTML="Cargando.......";
}
else if (ajax.readyState==4){
if(ajax.status==200)
{
document.getElementById(capa).innerHTML=ajax.responseText;
}
else if(ajax.status==404)
{
capaContenedora.innerHTML = "La direccion no existe";
}
else
{
capaContenedora.innerHTML = "Error: ".ajax.status;
}
}
}
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(valores);
return;
}
/*Creamos y ejecutamos la instancia si el metodo elegido es GET*/
if (metodo.toUpperCase()=='GET'){
ajax.open ('GET', url, true);
ajax.onreadystatechange = function() {
if (ajax.readyState==1) {
capaContenedora.innerHTML="Cargando.......";
}
else if (ajax.readyState==4){
if(ajax.status==200){
document.getElementById(capa).innerHTML=ajax.responseText;
}
else if(ajax.status==404)
{
capaContenedora.innerHTML = "La direccion no existe";
}
else
{
capaContenedora.innerHTML = "Error: ".ajax.status;
}
}
}
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(null);
return
}
}
Pues ésto es lo que contiene la librería que os pongo en conocimiento.
Básicamente la única diferencia a la hora de utilizar un método u otro, es que por el método get, hay que concatenar las variables y valores al parámetro url de forma que cuando tu invoques la función FAjax sea así:
<form method="get" onsubmit="FAjax('ajax.php?campo1='+document.getElementById('campo1').value
+'&campo2='+document.getElementById('campo2').value,'capaContenedora','','get'); return false" action="#">
Por método post la invocación a la función AJAX es:
<form method="post" onsubmit="FAjax('ajax.php,'capaContenedora','campo1=
'+document.getElementById('campo1').value
+'&campo2='+document.getElementById('campo2').value,'post'); return false" action="#">
Como habréis notado, en la función FAjax invocada para método get, hay un parámetro vacío. Eso es por que GET necesita la url concatenada con las variables y valores, por lo que los valores no se pueden mandar por separado, como es el caso que necesita POST.
También habrá quien se pregunte que esto no puede ser válido para procesarlo desde un script php, asp, jsp, etc por que la cantidad de variables de los formularios no sabemos exactamente con seguridad cuantas van a ser. Bien, entonces es cuando echamos mano del array elements(documents.forms.elements[indice]) de cada formulario javascript, es decir, que hasta ahora yo he utilizado bucles para concatenar la cadena a mandar con variables a la función AJAX usando este array de elementos, el cual al estar indexado, es más facil de acceder y trabajar con ellos.
A continuación os pongo un pequeño ejemplo con cada uno de los métodos utilizados:
Ejemplo de utilización AJAX por método GET. Ver
Ejemplo de utilización AJAX por método POST. Ver
Estos ejemplos así como las librerías aquí nombradas estan en este fichero para descargar, bajar manual.
Esto es todo, espero que os sea de gran ayuda :-)