title: Implementing AJAX via POST request
body: <p>I am reading a book that describes the procedure to implement Ajax via POST request. This is code:</p>
  
  <p>name of file: <strong>ajaxtest.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;AJAX Example&lt;/title&gt;
  
  &lt;script type="text/javascript" src ="xhr.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;h1&gt;LOADING A WEBPAGE INTO A DIV&lt;/h1&gt;
  
  &lt;div id="info"&gt;This is going to be replaced &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
  url = "ajaxtest.php"
  
  params = "url=oreilly.com"
  
  request = new ajaxRequest()
  
  request.open("POST",url,true)
  
  request.setRequestHeader("Content-type", "application/x-wwww-form-urlencode")
  
  request.onreadystatechange = function()
  {
      if(this.readyState == 4)
      {
          if(this.status == 200)
          {
              if(this.responseText != null)
              {
                  document.getElementById('info').innerHTML = this.responseText
              }
              else
              {
                  alert("Ajax error: No data received ")
              }
          }
          else
          {
              alert("Ajax Error " + this.statusText)
          }
      }
  }
  
  request.send(params)
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The example of that book also has 2 lines <strong>i removed</strong> after reading some other articles:</p>
  
  <pre><code>request.setRequestHeader("Content-length", params.length)
  request.setRequestHeader("Connection", "close")
  </code></pre>
  
  <p>The <strong>ajaxRequest</strong> function is saved in a separate .js file named <strong>xhr.js</strong>:</p>
  
  <pre><code>function ajaxRequest()
  {
  try
  {
      // fon NON-IE browsers
      var request = new XMLHttpRequest()
  }
  catch(e1)
  {
      try
      {
          //for IE6+ browser
          var request = new ActiveXObject("Msxml2.XMLHTTP")
      }
      catch(e2)
      {
          try
          {
              //for IE5
              var request = new ActiveXObject("Microsoft.XMLHTTP")
          }
          catch(e3)
          {
              //No AJAX support 
              var request = false
          }
      }
  }
  return request
  }
  </code></pre>
  
  <p>And the <strong>ajaxtest.php</strong> file is:</p>
  
  <pre><code>&lt;?php
  
  if(isset($_POST['url']))
  {
  echo file_get_contents("http://".$_POST['url']);
  
  echo "test1";
  }
  
  echo "test2";
  
  echo $_POST['url'];
  ?&gt;
  </code></pre>
  
  <p>The thing is that, as soon as i execute the <strong>ajaxtest.html</strong>, the part "This is going to be replaced", it disappears (which is correct), but after that what i get is the part of the <strong>ajaxtest.php</strong> that is outside the <strong>if(isset())</strong>. And when it reaches the echo <strong>$_POST['url']</strong> outside the <strong>if(isset())</strong> i get the following error:</p>
  
  <p><strong>Notice: Undefined index: url in C:\wamp\www\ajaxtest.php on line 11</strong></p>
  
  <p>Ofcourse the <strong>test2</strong> is printed on the page.</p>
  
  <p>Why is this happening? Shouldn't <strong>$_POST['url']</strong> be available in the <strong>ajaxtest.php</strong> script as well?</p>