title: AJAX POST to PHP without JQuery
body: <p>I had a PHP assignment that I decided that I wanted to try and add AJAX to because in our class we will not learn AJAX just PHP. I can't seem to get the response to work. However in the network section of my console on Fire Fox I can find the POST send with the values I entered into the form and the PHP echo as a result from the php function working. But, it will not show up in my div tag. Any help would be most welcome, thanks.</p>
  
  <p>Here is the HTML and JavaScript:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
          function testPass() {
              var username = document.getElementById("uname").value;
              var passwrd = document.getElementById("passwd").value;
              var creds = "uname="+username+"&amp;passwd="+passwrd;
              var ajx = new XMLHttpRequest();
              ajx.onreadystatechagne = function () {
                  if (ajx.readyState == 4 &amp;&amp; ajx.status == 200) {
                      document.getElementById("message").innerHTML = ajx.responseText;
                  }
              };
              ajx.open("POST", "authenticate.php", true);
              ajx.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
              ajx.send(creds);
              //document.getElementById("message").innerHTML = creds;
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;
          &lt;form id="login"&gt;
              &lt;strong&gt;Login&lt;/strong&gt;&lt;br/&gt;&lt;br/&gt;
              Username :&lt;br/&gt;&lt;input type="text" id="uname"&gt;&lt;br/&gt;
              Password :&lt;br/&gt;&lt;input type="text" id="passwd"&gt;&lt;br/&gt;&lt;br/&gt;
              &lt;div id="message" style="color:red;"&gt;&lt;/div&gt;
              &lt;br/&gt;&lt;button type="button" value="Submit" onclick="testPass();"&gt;Sign In&lt;/button&gt;
          &lt;/form&gt;
      &lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the PHP:</p>
  
  <pre><code>&lt;?php
  $uname = $_POST['uname'];
  $passwd = $_POST['passwd'];
  
  if (empty($uname) &amp;&amp; empty($passwd)) {
      echo "The username and password are required!";
  } else if (empty($uname)) {
      echo "The username is required!";
  } else if (empty($passwd)) {
      echo "The password is required!";
  } else {
      echo "It works!";
  } ?&gt;
  </code></pre>