Usando POST con AJAX

Tengan un buen día apreciables personas que visitan este foro, recientemente estuve trabajando en un proyectito de un mini-sitio y me auxilié de una tecnología bastante interesante y útil llamada AJAX, que hablando en términos "mundanos" lo que permite es que en una página web, al activarse un evento HTML como onClick, onLoad, onKeyPressed, etc. se "actualize un pedazo de la página", es decir, se haga una petición (request) al servidor diciéndole: "Servidor, nececito x página para actualizar únicamente un sector de la página actual" entonces el servidor, valga la redundancia, te "sirve" la página o script para que sea cargada en un sector de la página, sin hacer una petición de toda la página.

En este caso, sabemos que existen 2 métodos para mandar los datos en una petición al servidor, que son GET y POST, en el cual en el primero los datos se mandan seguidos de la URL y un signo de interrogación, de la siguiente manera:
http://www.data2max.com/?pagina=2&tema=sqlserver

NOTA: Recomiendo a todos los que concurran este pequeño blog que visiten el sitio www.data2max.com que está dedicado al desarrollo de temas referentes a bases de datos y también desarrollo.

Continuando, al contrario de GET, usando POST los datos no se mandan en la URL, sinó que dentro del cuerpo del request, más información de solicitudes al servidor >>AQUI<<. Bueno, a partir de aqui parto que los que estén leyendo este post tienen conocimientos básicos de AJAX, si no es así pero desean aprender, pueden revisar este otro post acerca de introducción a AJAX, veanlo >>AQUI<<. Para usar AJAX con el método GET, únicamente necesitan especificar que usarán GET al abrir el "canal" para realizar la solicitud asíncrona, y al mandar la solicitud usando el método send() del objeto XMLHTTPRequest no necesitan poner nada debido a que los datos que se mandan van en la URL, pero qué pasa si estamos usando POST con AJAX? En tal caso, debemos de especificar ciertas cosas como la codificación de los datos que vamos a mandar y otras cosas más en el método setRequestHeader() del mismo objeto, y luego en el método send() debemos colocar un string que lleve el par de datos (variable=valor[&variable2=valor]...) de la siguiente forma: objetoAjax.send(nombre="Aniceto"&apellido="Chilango") Bueno, perfecto, lo hacemos y ya. Pero, digamos que tenemos mi problema. Yo estaba haciendo un sitio web para un colegio en el cual tenia un buen número de formularios necesarios para inscribir alumnos, registrar profesores, realizar búsquedas personalizadas, etc. Y luego de rellenar los formularios, deseaba que "magicamente" apareciera ya sea una confirmación o algun resultado de enviar el formulario en un panel que estaba en la misma página sin que se actualizara el sitio y pense ¡¡¡AAAAAJAX!!!, pero luego, al hacer el código para mandar la información del formulario mediante POST (debido al valor de los datos) para un formulario, observé que eso solo me iba a servir para un solo form, entonces pensé en hacer un script que me sirviera para mandar cualquier formulario mediante post, y aqui está el script, y lo pongo a disposición de ustedes para que puedan usarlo.

function ajaxFunction()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    return xmlHttp;
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      return xmlHttp;
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return xmlHttp;
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
  }
function mandarForm(url)    
{
    var ajax; var vinculo = url;

     var largoForm = document.forms[0].length; var i = 0; var postr; larguito=largoForm-1;
     while (i <= larguito)
     {
   if (i != 0)
    {
     postr += "&";
    }
      postr += document.forms[0].elements[i].name + "=";
   postr += document.forms[0].elements[i].value; i++; 
  }
  

    ajax=ajaxFunction();
    ajax.open("POST",vinculo,true);
    //ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 ajax.setRequestHeader("encoding", "utf8");
 

    ajax.onreadystatechange=function() 
    {
  if (ajax.readyState==4) 
  {
      if (ajax.status==200)
       {
    document.getElementById('capaAjax').innerHTML = ajax.responseText;
       }
  }
    }

    ajax.send(postr);
}

Pero, hay un pequeño problema, y es que si utilizo este script en un formulario, el primer campo del formulario (digamos un textbox) su valor no se manda al realizar la solicitud asíncrona, aun no se porqué y espero que si alguien conoce el porqué tengo ese problema, puede hacerlo saber en los comentarios. Así que lo que hago simplemente, para evadir el problema, creo un elemento del tipo hidden al principio del form, como primer elemento, para que solo su valor no sea mandado y todo el formulario sea mandado. Espero que les sirva. En otro post voy a poner una explicación del funcionamiento de este script. Tengan un buen día.