Step by step belajar AJAX dan PHP

Selamat bertemu dalam tutorial media kreatif, kali ini kita akan membahas tentang AJAX. Berdasarkan pemahaman kamin, AJAX ( Asynchronous javascript and XML ) sebenarnya bukanlah bahasa pemrograman baru, akan tetapi merupakan penggabungan antara Javascript dan XML. Sehingga syntax - syntax yang digunakan dalam AJAX sebenarnya adalah syntax - syntax Javascript.

Dalam tulisan kali ini, kami akan mengilustrasikan metode pengiriman data dengan menggunakan AJAX, dimana contoh kali ini kedepannya akan bisa anda kembangkan untuk dipakai dalam sistem pembelian pada toko online, pemilihan jawaban pada ujian online, dan aktivitas lain yang memerlukan kecepatan akses user tanpa harus melakukan refresh pada keseluruhan halaman website.

 

Script program kali ini akan kita bagi menjadi 3 buah script, diantaranya adalah :

1. script utama.php
Script ini digunakan sebagai halaman utama yang nantinya akan diakses oleh user dan akan mengirimkan data melalui beberapa event kita pasang pada halaman ini, pada umumnya digunakan event javascript onclick , onmouseover, onmouseout dan lain - lain.

<html>
	<head>
	<title>Tutorial Ajax media kreatif</title>
	<script type="text/javascript" src="prmajax.js"></script>
	</head>
	
	<body>
	<div id="dom_ajax"></div>
	<a href="#" onclick="KirimData('fungsi','dom_ajax','Parmin Supaidi|Betty maryssa camakh|handi Susanti|Juni Sunarto');">Contoh pengiriman data melalui 

fungsi</a>
	</body>
</html>

2. script prmajax.js
Script ini merupakan bagian inti dari AjAX yang kita bicarakan, dalam script ini terdapat beberapa fungsi utama dan fungsi tambahan seperti yang terlihat pada contoh berikut :

function KirimData(dom,pid,nama) {
    document.getElementById(dom).innerHTML="Loading ...";
    var xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null) {
        alert ("Your browser does not support AJAX!");
        return;
    }
    var date=new Date();
    var timestamp=date.getTime();
	//Ubah bagian ini sesuai kebutuhan
    var url="http://localhost/tutorial/ajax/penerima.php";
    var param="pid="+pid+"&data="+nama;
	
	//tidak perlu dirubah
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
            var res=xmlhttp.responseText;
            document.getElementById(dom).innerHTML=res;
        }
    }
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", param.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(param);
	//tidak perlu dirubah
}


function GetXmlHttpObject() {
    var xmlhttp=null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlhttp=new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlhttp;
}


function clearDom(dom) { // fungsi untuk menghapus data yang ditampilkan pada DOM
	document.getElementById(dom).innerHTML="";
}

Script diatas kita simpan dalam satu direktory dengan script utama.php . Fungsi yang digunakan untuk mengirim data adalag function KirimData yang memiliki 3 variabel, yaitu :

  1. dom - merupakan variabel yang memuat pada bagian mana pesan akan ditampilkan, pada contoh diatas dom kita isi dengan dom_ajax yang merupakan id dari sebuah tag div yang berada pada script utama.php
  2. pid - merupakan variabel yang hanya kita gunakan sebagai pelengkap / keterangan dari data yang kita kirimkan, dalam hal ini kita isi dengan alumni
  3. data - merupakan data yang kita kirimkan dengan AJAX, dimana datanya bisa kita lihat pada halaman utama.php pada event onclick yang terdapat pada link

Untuk penjelasan lebih lanjut mengenai xmlhttp bisa kita lihat pada http://www.w3schools.com/xml/xml_http.asp

3. script penerima.php

Script penerima merupakan script php yang kita gunakan sebagai pemroses data yang dikirimkan oleh ajax. dalam contoh kali ini script penerima hanya melakukan proses cetak dan sedikit parsing untuk kemudian dicetak / ditampilkan sebagai pesan jawaban dalam proses xmlhttp.

<?php
if(isset($_POST['pid'])){
	echo 'data yang anda kirimkan dalam bentu Array adalah sebagai berikut ';
	print_r($_POST);
	//Contoh pengolahan data yang dikirim
	$pid  = $_POST['pid'];
	$data = $_POST['data'];
	echo "<h3>Daftar nama Alumni :</h3>";
	$nama = explode('|',$data);
	foreach($nama as $key => $val){
		echo $key.' » '.$val.'<br />';
	}
}
else{
	echo '-_- " kukur kukur kaka ';
}
?>

Jika anda ingin melakukan pemrosesan data ke database, maka bisa dilakukan pada script penerima.php ini . Sekian dulu tutorial kali ini, silahkan download contoh script diatas untuk mempelajarinya lebih lanjut.

Downlad script tutorial ajax
 


Komentar pembaca

rsaxotrims atas tutorial smoga yg nulis artikel ini tambah rajin ngetiknya yaaa.....posting pada :2013-10-21 12:13:41
hafizmau tanya ngan, dari segi fungsih apa perbedaan ajax ama dom?? maaf pemula..posting pada :2015-01-11 06:11:22
bambangaduhhh maaf nih gan, maksud file penerima itu POST dari file utama, ha ha napa gak ke post di file penerima, cerahin dong gan ha haposting pada :2016-01-08 14:15:16
ruditutorial gamapng banget ipahamin nihhh gan https://www.youtube.com/watch?v=5OHin1oQoXQposting pada :2016-08-11 11:09:18
Jamilbaris kedua dari file prmajax.js --> document.getElementById(dom).innerHTML = "Loading ..."; saya dapat error gan. Katanya elemen yang memiliki id 'dom' tidak ada, jadi hasilnya null. Ketika link di klik respon gak ada. Mohon pencerahannya ganposting pada :2017-02-04 11:10:36
RikoGreat posting pada :2017-12-17 19:31:09
Hamba AllahGoodposting pada :2018-06-02 13:13:49