title: How do you sent HTTP POST method using Ajax and retrieve the input field values without Jquery or prototype?
body: <p>I think I'm getting pretty close to the solution but can't really figure out how to send HTTP POST method using Ajax. I think this will help me understand my REST project too.</p>
  
  <p>There are lot of resource available online using Jquery or Prototype js framework but I want to know how without it.</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
          function loadXMLDoc() {
              var xmlhttp = new XMLHttpRequest();
              var out;
  
              xmlhttp.onreadystatechange = function() {
                  if(xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
                      out = xmlhttp.responseText;
                      alert(out);
                  }
              }
              xmlhttp.open("POST", "/resources/Inventory/2", true);
              xmlhttp.setRequestHeader("Content-type", "application/jason");
              xmlhttp.setRequestHeader("Connection", "close");
  
              xmlhttp.send(null);
          }
  
          &lt;/script&gt;
  </code></pre>
  
  <p>When using <strong>non-ajax POST</strong> (i.e. page reload or redirect), on server side, I can get inputs value of HTML form submitted by users. </p>
  
  <p><strong>But my confusion is with Ajax HTTP POST, how do I get the values specified in input field of HTML form?</strong> Is it even possible or it is not right way of thinking?</p>
  
  <pre><code>&lt;form method="post" action=""&gt;
     &lt;input type="text" name="info1" /&gt;
     &lt;button value="click to call js" onclick="loadXMLDoc()"&gt;
  &lt;/form&gt;
  </code></pre>