title: How to properly send POST data?
body: <p>I am trying to use AJAX to improve my login system to run without refreshing the page. I'm quite new to ajax. The tutorials I've found all use GET. I don't want to use get.
  Here is my code:</p>
  
  <p>login.php (I removed the CSS code from this)</p>
  
  <pre><code>&lt;html&gt;
  &lt;script type="text/javascript" src = "login/loginJS.js"&gt;&lt;/script&gt;
      &lt;body&gt;
      &lt;center&gt;
          &lt;div class="rounded"&gt;
          &lt;form method='POST' action = "processLogin.php"&gt;
              Username:&lt;input type="text" class = "input1" name = "username"/&gt;&lt;br&gt;
              Password:&lt;input type="password" class = "input1" name = "password"/&gt;&lt;br&gt;
              Remember Me?&lt;input type="checkbox" name = "remember"/?&gt;&lt;br&gt;
              &lt;?php
              session_start();
              echo'&lt;p id="errorField" class="error"&gt;&lt;/p&gt;';
              ?&gt;
              &lt;input type="submit" value = "Login" class = "button" onclick='process()'/&gt;
              &lt;b&gt;&lt;p&gt;New User? &lt;a href="register.php"&gt;Register&lt;/a&gt;&lt;/p&gt;&lt;/b&gt;
          &lt;/form&gt;
          &lt;/div&gt;
      &lt;/center&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>loginJS.js</p>
  
  <pre><code>xmlHttp = createXmlHttpRequestObject();
  
  function createXmlHttpRequestObject()
  {
      var xmlHttp;
  
      if (window.ActiveXObject){
          try{
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
          }catch(e){
          xmlHttp = false;
          }
      }else{
          try{
              xmlHttp = new XMLHttpRequest();
          }catch(e){
              xmlHttp = false;
          }
      }
  
      if(!xmlHttp){
          alert("The XML Http Request Failed");
      }else{
          return xmlHttp;
      }
  }
  
  function process(){
      if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0){
          login = encodeURIComponent(document.getElementById("loginField").value);
          xmlHttp.open("POST", "login/processLogin.php",true);
          xmlHttp.onreadystatechange = handleServerResponse;
          xmlHttp.send();
      }else{
          setTimeout('process()',1000);
      }
  }
  
  function handleServerResponse(){
      if(xmlHttp.readyState == 4){
          if(xmlHttp.status == 200){
              xmlResponse = xmlHttp.responseXML;
              xmlDocumentElement = xmlResponse.documentElement;
              message = xmlDocumentElement.firstChild.data;
              document.getElementById("errorField").innerHTML = message;
          }
      }
  }
  </code></pre>
  
  <p>processLogin.php</p>
  
  <pre><code>      &lt;?php
      session_start();
      header('Content-Type: text/xml');
      echo '&lt;?xml version="1.0" encoding="UTF-8" standalone="yes" ?&gt;';
      echo "&lt;response&gt;";
          $username = $_POST['username'];
          $password = $_POST['password'];
          if ($username == '' or $password == '')
          {
              echo 'The username/password fields may not be blank.';
          }else{
              echo 'This is a test';
          }
      echo "&lt;/response&gt;";
  ?&gt;
  </code></pre>
  
  <p>So my question is, what should I do to take the variables inside the input text and password field, to put as a post variable, then to send it with the javascript. I just need to send the username and password fields. 
  To see the website,
  <a href="http://rukiryo.bugs3.com" rel="nofollow">http://rukiryo.bugs3.com</a>
    That is what the website looks like. The login button works when I use my page-refresh method, but I can't figure out the last steps to make it work for non-refresh. </p>
  
  <p>Thanks,
  Alex</p>