title: Ajax POST request without an html form and in pure JS
body: <p>Is it possible to make an ajax post without having an HTML form? And if it is how should i do it and what PHP variable is used to fetch the variable? The PHP is inside the fetched file. I'm not using any framework.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function ajax(instruction, push, url, callback){
   
   var xmlhttp; // the object for the httprequest
   
   if (window.XMLHttpRequest) {
              // code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp = new XMLHttpRequest();
          } else {
              // code for IE6, IE5
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
    
    
    
    
          xmlhttp.onreadystatechange = function() { // every time the readystate changes
       
       
              ajaxLoad(xmlhttp.readyState); // Calls function with the ready state each time it uppdates
       
  
              if (xmlhttp.readyState == 4) { // status 200 = sucessfull page! NOT 404!  // 1 2 3 4 are states of the request (4 is when it's done)
     
            // When load bar is complete
    
    
    
    
            if(xmlhttp.status == 200){
       
          callback(xmlhttp.responseText); // goes to the callback function (from the argument "callback") and then passes the xmlhttp
       
      }
            else if(xmlhttp.status == 404){ // Could not find file
               
       ajaxError() // Function that will call the ajax but with the error file
      
      }else{}
         
      ajaxDone(); // activates all the nessesary js to check what to do with some parts of the site
              }
     else{}
     
          };
    
   
          xmlhttp.open(instruction,url, true); // sends a the var q to the next php file
          
    if(instruction === "GET"){
        xmlhttp.send('');             // Sends the request
    }
    else if(instruction === "POST"){
     
     xmlhttp.send(url);             // Sends the request
     
    }
    else{
     console.log("This ajax does not support " + instruction + " requests.");
    }
   
   
   
   
   
   if(push == true){ // Change the link to the url of the ajax with
  
    var urlPath = window.location.protocol + "//" + window.location.host + window.location.pathname; // where the host is on
    
    
    if(url == "home.php"){ // If it's the starting page REMOVE THE ?p= !!
             
         var urlPath = window.location.protocol + "//" + window.location.host + window.location.pathname;
              window.history.pushState({path:urlPath},'','./'); // an empty url push (!REMOVE THE DOT WHEN THE SITE IS HOSTED PROPERLY)  
        return; // exit's the function
    
    }else{}
    
    
          var newLink = "?p=" + url; // Gives us the link we want except that we don't want the .php
          newLink = newLink.substring(0, newLink.indexOf('.')); // makes a new string with character 0 to the dot! Will not include the ending of the file
  
             
    window.history.pushState({path:urlPath},'',newLink); // the push
    
      } 
      else{}
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="?p=page1" onclick="ajax('POST', true, 'page1.php', function(content){ document.getElementById('content_holder').innerHTML = content;});  return false;"&gt;To page 1&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>