Tutorial Ajax manejo de paso de datos por métodos GET y POST

Como os habréis podido dar cuenta tengo el tutorial un poco parado, de hecho estaba terminado pero tiene una incomatibilidad con internet explorer, tanto en firefox, como konqueror, safari, etc.; funcionan correctamente.

No he tenido tiempo de verlo por que me he mudado de ciudad y aún no me he podido poner a corregirlo. He añadido a la página el tutorial por que ha sido indexada por google, aún estando privada. Prometo a todos los usuarios de la web (que no somos pocos, cada vez vamos a mas :-) ) que cuando lo corrija mandaré un e-mail a todos y cada uno de vosotros.

Pido Disculpas.

Javier Mellado

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.

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.

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();
          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í:

Por método post la invocación a la función AJAX es:

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