Home > Web > Passing POST parameters with AJAX

Passing POST parameters with AJAX


AJAX can be used not only with webservices but with HTTP applications as well. So instead invoking a webservice, you’ll make an HTTP request. This comes veryhandy when using legacy application or when your usage of AJAX is very limited and webservices are simply too much.

What I wanted to share is a small trick on how to pass POST parameters with AJAX. The entire exercise will consist of defining a function called doPost that will receive as parameters the url and a two-dimensional array of parameters

function doPost(url, parameters) { 
  // create the AJAX object 
  var xmlHttp = undefined; 
  if (window.ActiveXObject){ 
    try { 
      xmlHttp = new ActiveXObject("MSXML2.XMLHTTP"); 
    } catch (othermicrosoft){ 
      try { 
        xmlHttp = new ActiveXObject(
            "Microsoft.XMLHTTP"); 
      } catch (failed) {} 
    } 
  }    

  if (xmlHttp == undefined && window.XMLHttpRequest) { 
    // If IE7, Mozilla, Safari, etc: Use native object 
    xmlHttp = new XMLHttpRequest(); 
  }  

  if (xmlHttp != undefined) { 
    // open the connections 
    xmlHttp.open("POST", url, true); 
    // callback handler 
    xmlHttp.onreadystatechange = function() { 
      // test if the response was totally sent 
      if (xmlHttp.readyState == 4 
            && xmlHttp.status == 200) { 
        // so far so good 
        // do something useful with the response 
      } 
    }  

    // create the parameter string 
    // iterate the parameters array 
    var parameterString;  

    for (var i = 0; i < n; i++) { 
      parameterString += (i > 0 ? "&" : "") 
          + parameters[i][0] + "=" 
          + encodeURI(parameters[i][1]); 
    }  

    // set the necessary request headers 
    xmlHttp.setRequestHeader("Content-type", 
        "application/x-www-form-urlencoded"); 
    xmlHttp.setRequestHeader("Content-length", 
        parameterString.length); 
    xmlHttp.setRequestHeader("Connection", "close");  

    // send request 
    xmlHttp.send(parameterString); 
  } 
}

The parameters string can be constructed in a different way or even the parameters can be passed to the method in a different format. In the above case the parameters are passed as a two-dimensional array, everyline representing a parameter, again an array containing name (first element) and value (second element).

A call to the above function would look like this:

doPost("doIt.jsp", new Array(new Array("action", "action1"), new Array("id", "123")));
About these ads
Categories: Web Tags: , , ,
  1. Azhar
    June 13, 2008 at 2:54 pm | #1

    Nice One!!!

  2. Purcarea Mihai
    September 16, 2009 at 5:44 pm | #2

    Very usefull example. Thank you.

    I think the correct javascript array construction from the call example would be doPost(“doIt.jsp”, new Array(new Array(“action”, “action1″), new Array(“id”, “123″)));

  3. September 17, 2009 at 12:07 am | #3

    You’re right, just a syntax mistake. An array can be initialized with new Array(elem1, elem2, …) or [elem1, elem2, ...]. I corrected the post too. Thanks.

  4. Mychal
    November 20, 2009 at 3:51 pm | #4

    Arrays are meant to represent numerically indexed objects.

    Use an object if you are to index by string:

    doPost(“doIt.jsp”, {action :”action1″, id : “123″});

    Then use a for(in) to iterate through the properties and values. Something like this:

    var parameterString = ‘?’,
    key;

    for(key in parameters){
    if(parameters.hasOwnProperty(key)){

    parameterString += encodeURIComponent(key)+ ‘=’ + encodeURIComponent(parameters[key])+’&’;
    }
    }

    • February 1, 2012 at 12:48 pm | #5

      Hello. very useful comment. But I just have one more question. How can I add a parameter if the condition would be something like id in (“1″, “2″, “3″) ?

      • February 6, 2012 at 2:05 am | #6

        What exactly do you mean? If you just want to check if a value is contained in an array, this is just simple JavaScript code and it’s done by iterating the array and comparing each element with the given one.

  5. psihologie
    September 27, 2011 at 7:47 pm | #7

    desi vechi de 4 ani de zile, foarte folositor acest post… multumesc mult! am clarificat ceva important aici! :)

  6. distrosummit.org
    October 5, 2012 at 9:28 am | #8

    Great goods from you, man. I’ve understand your stuff previous to and you’re
    just extremely excellent. I really like what you have acquired here, certainly like what you are stating and the way in which during which you say it.
    You make it enjoyable and you continue to care for to stay it wise.
    I can’t wait to learn much more from you. This is really a terrific website.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: