Membuat Popup dengan DIV menggunakan AJAX

Adakalanya kita berfikir ingin membuat form dalam pemanggilannya berada pada satu halaman tanpa merefresh, ketika kita mengklik link input maka form input akan muncul, dan apabila kita menklik link edit dan form edit akan muncul juga pada halaman yang sama tanpa merefresh halaman. bagaimana cara membuatnya...???

Saya akan menjabarkan langkah-langkahnya pada postingan ini.
sebagai contoh untuk menggambarkan apa yang saya maksud pada pengertian diatas silahkan lihat gambar di bawah ini.

Untuk membuat form seperti gambar diatas berikut adalah contoh kode programmnya :
Buatlah file dengan nama ajax.php
Copy kode di bawah ini.

<script language="javascript">
// JavaScript Document
var xmlHttp;
//-------------membuat objek xmlHttpRequest
function GetXmlHttpObject()
{
try
 {
 // ngecek buat browser firefox, opera 8.0+, safari
 xmlHttp=new XMLHttpRequest();
 }
 catch (e)
  {
  // browser Internet Explorer
  try
   {
   // IE 6.0+
   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e)
    {
    // IE 5.0
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }   
return xmlHttp;
}

function bukawindow(str)
{
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
 {
  alert ("Browser tidak support HTTP Request");
 }
 var url="php_response.php?cmd=bukawindow";
 var url=url+"&str="+str
 xmlHttp.onreadystatechange=function()
 {
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     {
   document.getElementById("open").innerHTML=xmlHttp.responseText;
     }
 }
 xmlHttp.open("GET",url,true);
 xmlHttp.send(null);
}

function tutupwindow()
{
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
 {
  alert ("Browser tidak support HTTP Request");
 }
 var url="php_response.php?cmd=tutupwindow";
 
 xmlHttp.onreadystatechange=function()
 {
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     {
   document.getElementById("open").innerHTML=xmlHttp.responseText;
     }
 }
 xmlHttp.open("GET",url,true);
 xmlHttp.send(null);
}
</script>

<a href="#" onClick="bukawindow('Data Tampil');">buka</a>
<div id="open"></div>

Langkah kedua buat file dengan nama php_response.php
Copy kode di bawah ini.

<?
header('content-type:text/xml');
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: ". gmdate("D, d M Y H:i:s"));
if($_SERVER["SERVER_PROTOCOL"]=="HTTP/1.0")
 header("Pragma: no-cache");
else
 header("Cache-Control: no-cache, must-revalidate");

$cmd=$_GET["cmd"];

if($cmd=="tutupwindow")
{
 echo"";
}
if($cmd=="bukawindow")
{
 $str = $_GET["str"];
 ?>
    <div style="position: fixed; top: 0pt; z-index: 1000; opacity: 0.9; height: 100%; left: 0pt; width: 100%; background-color:#999999; padding-top:5%;
          padding-bottom:10px;" align="center">
          <div style="width:400px; height:100px; z-index: 10001; background-color:#000000; padding:5px 5px 5px 5px;">
                <div style="width:100%; height:100%; z-index: 10002; background-color:#FFFFFF;">
                 <div align="right"><a href="#" onclick="tutupwindow();"><b>X</b></a></div>
                        
                          <form name="form1" action="proses.php" method="post">
                           <input type="text" name="nama" id="nama" value="<?=$str;?>" size="40" /><br /><br />
                            <input type="submit" name="tombol" value="Simpan" />
                          </form>
                        
                </div>
          </div>
        </div>
    <?
}
?>

Posted in: AJAX