Ajax ~ Pemrograman dan Teknologi

Ajax (Asynchronous Javascript And XML) memungkinkan kita untuk mengubah isi halaman secara dinamis tanpa membuka halaman baru. Kita bisa mengakses satu file di server dan mendapatkan data yang diperlukan untuk ditampilkan di halaman yang sedang aktif. Objek Ajax dideklarasikan dengan menggunakan "new XMLHttpRequest()". Untuk lebih jelasnya, perhatikan contoh di bawah ini.

<HTML>
<HEAD>
 <title>Belajar HTML</title>
</HEAD>
<BODY>
 <h1>Dropdown</h1>
    <script>
        var xhr=new XMLHttpRequest();
        xhr.open("GET", "kodeku.php?data1=aaa & data2=bbb", false);
        xhr.send();
        alert(xhr.response);
    </script>
</BODY> 
</HTML>

Contoh di atas akan mengirim pesan menggunakan method "GET" ke server dan mengambil data yang dihasilkan dari file "kode.php". Data yang didapat dari server tersimpan di properti "response". Sebelum membuka kode HTML tersebut, pastikan ada file dengan nama kodeku.php dan buka dari server, localhost atau semacamnya. Kode PHP dalam file tujuan bisa berisi seperti ini.

<?PHP
    echo "data ke 1".$_GET["data1"];
    echo "data ke 2".$_GET["data2"];
?>

Selain menggunakan "GET" kita juga bisa menggunakan "POST". Saat menggunakan POST, send harus diisi dengan argumen. Kita juga harus menggunakan setRequestHeader untuk menentukan jenis data yang akan kita kirim. Misalnya :

<HTML>
<HEAD>
    <title>Belajar HTML</title>
</HEAD>
<BODY>
    <script>
        var koneksi=new XMLHttpRequest();
        koneksi.open("POST", "kodeku.php", false);
        koneksi.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        koneksi.send("data1=aaa&data2=bbb");
        alert(koneksi.response);
    </script>
</BODY> 
</HTML>

Kita bisa mendapatkan data dari ajax dengan $_POST atau $_GET sesuai methodnya. Untuk contoh di atas, karena method-nya adalah post, maka kita menggunakan $_POST.

<?PHP
    echo "data ke 1".$_POST["data1"];
    echo "data ke 2".$_POST["data2"];
?>