title: JavaScript/AJAX is saying "undefined" when it should show a picture
body: <p>On my register page, I am trying to set it up so that when somebody enters a username into the username box, it will either show a green check mark if the username doesn't exist, or a red 'X' if the username already exists. When the page loads though (the body tag is <code>&lt;body on_load=&quot;process();&quot;&gt;</code>), it doesn't come up with a picture, it comes up with the word &quot;undefined&quot;.</p>
  <p>JavaScript code:</p>
  <pre><code>var xmlHttp = createXmlHttpRequestObject();
  
  //Create object for function
  function createXmlHttpRequestObject(){
      var xmlHttp;
  
      //Check if IE
      if(window.ActiveXObject){
          try{
              //Setting variable equal to object for IE
              xmlHttp = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
          }catch(e){
              //Can't set variable equal to something
              xmlHttp = false;
          }
      }else{
      //Anything not IE
          try{
              //Want to use this object if not IE
              xmlHttp = new XMLHttpRequest;
          }catch(e){
              //Can't set variable equal to something
              xmlHttp = false;
          }
      }
      //If couldn't set object
      if(!xmlHttp){
          //Tell people that JS couldn't create the object (new XMLHttpRequest or ActiveXObject)
          alert(&quot;Couldn't create an object with JavaScript!&quot;);
      }else{
          //Return object
          return xmlHttp;
      }
  }
  
  //Use this attribute for body tag: &lt;body onload=&quot;process()&quot;&gt;
  function process(){
  /*readyState:
  0: request not initialized 
  1: server connection established
  2: request received 
  3: processing request 
  4: request finished and response is ready
  */
      try{
          //Check if ready to communicate
          if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
              //&lt;input type=&quot;text&quot; id=&quot;userInput&quot; /&gt; relates to this
              //Set variable to value they typed in
              username = encodeURIComponent(document.getElementById(&quot;register_name&quot;).value);
  
              //Creates request to send to server
              //Need PHP file, GET would be in PHP file, also can be POST, etc.
              xmlHttp.open(&quot;POST&quot;,&quot;functions/check_used.php&quot;,true);
  
              //Doing something to make it pretend like it's a form, for POST
              xmlHttp.setRequestHeader(&quot;Content-type&quot;, &quot;application/x-www-form-urlencoded&quot;);
  
              //Handle server response when server responds to the request
              xmlHttp.onreadystatechange = handleServerResponse;
  
              //Send request (this is used for POST, use null when using GET)
              xmlHttp.send(&quot;username=&quot;+username);
          }else{
              //Not ready to communicate, wait for 1 second and try again
              setTimeout('process()',1000);
          }
      }catch(e){
          //Something doesn't work, tell them what happened
          alert(e.toString());
      }
  }
  
  //When response received, tells what to do with it
  function handleServerResponse(){
  //Response done communicating
      if(xmlHttp.readyState==4){
          //Communication went OK
          if(xmlHttp.status==200){
              //Put response into variable
              xmlResponse = xmlHttp.responseXML;
  
              //Get document element
              xmlDocumentElement = xmlResponse.documentElement;
  
              //Get data from XML file
              message = xmlDocumentElement.firstChild.data;
  
              //Access document, put it in element on page, innerHTML is stuff shown on webpage
              document.getElementById(&quot;checkedUser&quot;).innerHTML = message;
  
              //Pause 1 second before communicating with server again
              setTimeout('process()',1000);
          }else{
              //There was an error with data
              alert('Something went wrong!');
          }
      }
  }
  </code></pre>
  <p>On the register page, I have an input box with the div next to it:</p>
  <pre><code>&lt;input type=&quot;text&quot; id=&quot;register_name&quot; name=&quot;username&quot; /&gt;&lt;div id=&quot;checkedUser&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>Finally, I have the PHP file that it is posting to:</p>
  <pre><code>&lt;?php
  require_once('../includes/db.php');
  header('Content-Type: text/xml');
  echo '&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;yes&quot; ?&gt;';
  echo '&lt;username&gt;';
      $check_username = $db-&gt;prepare(&quot;SELECT COUNT(*) FROM `users` WHERE `username` = :username&quot;);
      $check_username-&gt;bindValue(&quot;:username&quot;,$_POST['username'],PDO::PARAM_STR);
      $check_username-&gt;execute();
      $check_username = $check_username-&gt;fetch();
  
      if($check_username[0] == 0){
          echo '&lt;img src=&quot;images/success.png&quot; /&gt;';
      }else{
          echo '&lt;img src=&quot;images/error.png&quot; /&gt;';
      }
  echo '&lt;/username&gt;';
  ?&gt;
  </code></pre>
  <p>I have tried troubleshooting it, but I couldn't figure out what was wrong.</p>