Envío de parámetros por POST utilizando XMLHttpRequest

Patxi Echarte, 05. Ago, 2005, 6 Comentarios JavaScript

Ayer por la tarde me pasé casi dos horas intentando resolver un problema que tenía con una aplicación que estoy desarrollando. Lo que necesitaba hacer era realizar una petición XMLHttpRequest desde el cliente a una url del servidor, pero enviando la información por POST. Pues bien, no importaba lo que hiciera, que no había forma de hacerlo funcionar correctamente. Si utilizaba GET en vez de POST todo perfecto, pero si lo hacía por POST no conseguía acceder a las variables enviadas.

Finalmente tras bastantes pruebas y ver multitud de páginas web que no aportaban demasiado a la resolución del problema, encontré una solución basada en enviar una cabecera Content-Type al servidor al hacer la petición, indicando cómo se envía la información de lo que sería el formulario en una petición normal.

El código resultante sería parecido al siguiente:

function loadContentsOnDemand(divname,fillingUrl){
   var xmlHttp = XmlHttp.create();
   xmlHttp.open("POST", fillingUrl, true);   // async
   xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=ISO-8859-1');
   xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readyState == 4) {
         document.getElementById(divname).innerHTML = xmlHttp.responseText;
      }
   };
   document.getElementById(divname).innerHTML = '<span class="txtrojo10"><b>Cargando...</b></span>';
   // llamada en otro hilo para permitir actualizar el interfaz
   window.setTimeout(function () {
      xmlHttp.send('nid='+nid);
   }, 10);
}

Para que este código funcione es necesario utilizar incluir el archivo JavaScript XmlHttp.js con el código que suelo utilizar para las peticiones XMLHttpRequest.

Twitter Digg Delicious Stumbleupon Technorati Facebook Email

6 Respuestas para “Envío de parámetros por POST utilizando XMLHttpRequest”

  1. seiju 05. Ago, 2005 en 1:59 pm

    será que por definicion del metodo POST hay que enviar la cabecera correcta para que sea interpretado correctamente 😛

  2. Suoko 29. Sep, 2005 en 12:14 am

    Hola

    En el codigo de muestra en la linea:
    document.getElementById(divname).innerHTML = ‘Cargando…‘;

    se ha colado un ‘ que produce un continuo error javascript, es necesario poner una comilla simple ‘

    Un saludo
    Suoko
    matiasalfaro.com

  3. Spud 30. Nov, 2005 en 7:58 am

    se te ha olvidado la funcion XmlHttp() ??
    en la red encontre esto:

    function XmlHttp() {}

    XmlHttp.create = function () {
    try {
    if (window.XMLHttpRequest) {
    var req = new XMLHttpRequest();

    // some older versions of Moz did not support the readyState property
    // and the onreadystate event so we patch it!
    if (req.readyState == null) {
    req.readyState = 1;
    req.addEventListener(«load», function () {
    req.readyState = 4;
    if (typeof req.onreadystatechange == «function»)
    req.onreadystatechange();
    }, false);
    }

    return req;
    }
    if (window.ActiveXObject) {
    return new ActiveXObject(getControlPrefix() + «.XmlHttp»);
    }
    }
    catch (ex) {}
    // fell through
    throw new Error(«Your browser does not support XmlHttp objects»);
    };

  4. Patxi 30. Nov, 2005 en 7:59 pm

    Tienes razón Spud, he subido un archivo javascript con el código que suelo utilizar para las peticiones XMLHttpRequest

  5. RRomero 21. Jul, 2006 en 4:03 am

    Gracias, pregunte en google enviar parametros… y ahorre mas de 2 horas.

  6. Fernando Reich 20. Ene, 2010 en 8:28 pm

    Buenos días,

    Por favor ayúdenme con esto: Necesito crear un script para envíar parámetros post a una web y no se como.

    La web es: «http://evtde.argonautanet.com/Varios/ComprobacionTelefono.aspx»

    Y los parámetros post son:
    ctl00_TreeMenuPpal_ExpandState=en&ctl00_TreeMenuPpal_SelectedNode=ctl00_TreeMenuPpalt1&__EVENTTARGET=&__EVENTARGUMENT=&ctl00_TreeMenuPpal_PopulateLog=&__VIEWSTATE=%2FwEPDwUKMTE0NTEwNzUyNA9kFgJmD2QWAgIDD2QWDAIDD2QWCgIBDw8WAh4HVmlzaWJsZWhkZAIDDw8WBB4EVGV4dAUDRVZUHwBoZGQCBQ8PFgIfAGhkZAIHDw8WAh8AaGRkAgkPDxYCHwBoZGQCBQ8PFgIfAGhkZAIHD2QWAgIBDw8WAh8BBQNFVlRkZAIJDzwrAAkCAA8WCB4NTmV2ZXJFeHBhbmRlZGQeC18hRGF0YUJvdW5kZx4MU2VsZWN0ZWROb2RlBRRjdGwwMF9UcmVlTWVudVBwYWx0MR4JTGFzdEluZGV4AgJkCBQrAAIFAzA6MBQrAAIWEB8BBQVFVlRERR4FVmFsdWUFBUVWVERFHgxTZWxlY3RBY3Rpb24LKi5TeXN0ZW0uV2ViLlVJLldlYkNvbnRyb2xzLlRyZWVOb2RlU2VsZWN0QWN0aW9uAx4IRGF0YVBhdGgFJGNjZWJlZTcxLWJhNDEtNDI1Zi1iYjNiLWVlMjFlNWVlM2Y5Nh4JRGF0YUJvdW5kZx4QUG9wdWxhdGVPbkRlbWFuZGgeCEV4cGFuZGVkZx4JUG9wdWxhdGVkZxQrAAIFAzA6MBQrAAIWDh8BBRdDb21wcm9iYWNpw7NuIHRlbMOpZm9ubx8GBRdDb21wcm9iYWNpw7NuIHRlbMOpZm9ubx4LTmF2aWdhdGVVcmwFIS9WYXJpb3MvQ29tcHJvYmFjaW9uVGVsZWZvbm8uYXNweB8IBSEvdmFyaW9zL2NvbXByb2JhY2lvbnRlbGVmb25vLmFzcHgfCWceCFNlbGVjdGVkZx8LZ2RkAgsPZBYCAgUPPCsADQIADxYEHwNnHgtfIUl0ZW1Db3VudGZkDBQrAAMWCB4ETmFtZQUFRmVjaGEeCklzUmVhZE9ubHloHgRUeXBlGSsCHglEYXRhRmllbGQFBUZlY2hhFggfEAUESG9yYR8RaB8SGSsCHxMFBEhvcmEWCB8QBQlSZXN1bHRhZG8fEWgfEhkrAh8TBQlSZXN1bHRhZG9kAg0PFgIeD1NpdGVNYXBQcm92aWRlcgUDV2ViZBgCBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAgUSY3RsMDAkVHJlZU1lbnVQcGFsBRdjdGwwMCRNYWluJEJ0bkNvbXByb2JhcgUXY3RsMDAkTWFpbiRkZ3ZSZXN1bHRhZG8PPCsACQEIZmTi2RMkeubY2wqn87OdXXSdIVcizA%3D%3D&ctl00%24Main%24txtTelefono=12345678&ctl00%24Main%24BtnComprobar.x=67&ctl00%24Main%24BtnComprobar.y=11&__EVENTVALIDATION=%2FwEWBALUv478CQKenYa6CgLh5s3xAQKdzbGnDSVeRTpwz6uHgCXS4yLnRG6vOOHi