JAVASCRIPT – TRIK PADA TEKNIK SPA UNTUK MENGIRIMKAN DATA MELALUI POST

<?php
// Menangani domain dan URL
if($_SERVER['SERVER_PORT'] == 443){
   $path = "https://".$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];
   $dir = "https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
} else {
   $path = "http://".$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];
   $dir = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
}
$filename = basename($path);
$uri = str_replace($filename,"",$path);

// Penanganan halaman = variabel "hal"
$hal = ""; // Variabel untuk halaman
$folder_halaman = "halaman/";
Extract($_GET); // Ektrasksi array GET dari URL.
if($hal != ""){
   sleep(2); // Hanya untuk melihat proses animasi download
   if(file_exists($folder_halaman.$hal.".php")){
      include($folder_halaman.$hal.".php");
      exit();
   } else {
      include($folder_halaman."tidak-ada-halaman.php");
      exit();
   }
}

// Variabel untuk engine AWAL atau tempat JS = variabel "en"
if(!isset($en)){
   header("location:$uri?en");
   exit();
} else {
   include('en.php');
}
?>

<div id="loadingPOST">&nbsp;</div>
<div style="position:fixed;left:0px;top:30px;background-color:orange;width:100%">
<hr/>
<a href="#hal=home">Home</a> |
<a href="#hal=asanoer-logo">Gambar Logo Asanoer</a> |
<a href="#hal=google-logo">Gambar Logo Google</a> |
<a href="#hal=sunplas-logo">Gambar Logo Sunter Plastik</a> |
<a href="#hal=download-saya">Download Saya</a>
<hr/>
</div><br/><br/><br/><br/>
<div id="DEMO" style="min-height: 380px"></div><br/>
<hr/>
<strong>Menu & Footer Dimuat Saat Loading Pertama Kali</strong>
<hr/><br/>
Sumber Artikel Hash URL Dikutip Pada: 14 Juli 2019 00.12 WIB:<br/>
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange<br/><br/>
Sumber Artikel AJAX JS dikutip pada : 23 Juli 2019 20.54 WIB<br/>
https://www.w3schools.com/xml/ajax_intro.asp

<script type="text/javascript">
var urlnya = '<?php echo $uri; ?>';
var hasAwalan = "#hal=home";
// Sumber = https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp
function sendAjaxPost(target,stringnya) {
   document.getElementById("loadingPOST").innerHTML = '<strong style="background-color:red;color:white">Sedang Mengirim...</strong>';
   if((target=='')stringnya=='')){
      document.getElementById("loadingPOST").innerHTML = '&nbsp;';
      alert("Target / Stringnya tidak boleh kosong");
      return;
   }
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.status == 404) {
         alert('Tidak ada file atau halaman: '+datahash);
         xhttp.abort();
         return;
      }
      if (this.readyState == 4 && this.status == 200) {
         document.getElementById("loadingPOST").innerHTML = '&nbsp;';
         alert(this.responseText);
      }
   };
   xhttp.open("POST", target, true);
   xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xhttp.send(stringnya+"&kirimpost=ya");
}
// Sumber = https://www.w3schools.com/xml/ajax_intro.asp
function loadAjax(datahash){
   var xhttp = new XMLHttpRequest ();
   xhttp.onreadystatechange = function() {
      if (this.status == 404) {
         alert('Tidak ada file atau halaman: '+datahash);
         xhttp.abort();
         return;
      }
      if (this.readyState == 4 && this.status == 200) {
         document.getElementById("DEMO").innerHTML = this.responseText;
      }
   };
   xhttp.open("GET",datahash,true);
   xhttp.send();
}
// Sumber = https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange
// Fungsi penanganan hash
function hashHandler() {
   document.getElementById("DEMO").innerHTML = '<strong style="background-color:yellow;color:blue">Loading ...</strong>'; //Wadah penampung halaman
   var x = window.location; // URL lengkap termasuk Hash
   var lokasiIni = String(x); // Jadikan string
   var pis = lokasiIni.split("#"); // Pisahkan URL di depan Hash dan di belakang
   //Cek jika undefined
   if (typeof pis[1] === 'undefined'){
      location.hash = hasAwalan;
      return;
   }
   // Ambil Halaman Dari Server Melalui AJAX.
   loadAjax(urlnya+'?'+pis[1]);
   ///// https://www.html5rocks.com/en/tutorials/cors/
}
// 1. Tindakan saat hash tidak ada di URL
   if(!location.hash) {
      location.hash = hasAwalan;
   }
// 2. Tindakan saat hash sudah disertakan dalam URL
   window.onhashchange = hashHandler();
// 3. Tindakan saat ada perubahan hash dalam URL
   window.addEventListener('hashchange', hashHandler, false);

</script>

<script type="text/javascript">
// Sumber = https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp
function sendAjaxPost(target,stringnya) {
   document.getElementById("loadingPOST").innerHTML = '<strong style="background-color:red;color:white">Sedang Mengirim...</strong>';
   if((target=='')stringnya=='')){
      document.getElementById("loadingPOST").innerHTML = '&nbsp;';
      alert("Target / Stringnya tidak boleh kosong");
      return;
   }
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.status == 404) {
         alert('Tidak ada file atau halaman: '+datahash);
         xhttp.abort();
         return;
      }
      if (this.readyState == 4 && this.status == 200) {
         document.getElementById("loadingPOST").innerHTML = '&nbsp;';
         alert(this.responseText);
      }
   };
   xhttp.open("POST", target, true);
   xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xhttp.send(stringnya+"&kirimpost=ya");
}
</script>