Belajar ajax menggunakan fungsi getelemen by id

Pada tutorial kali ini, kita akan membahasa cara pengiriman data menggunakan ajax dimana data yang akan dikirimkan akan diambil berdasarkan ID atau Class yang terdapat pada elemen html. Metode yang digunakan adalah mendapatkan value dari sebuah elemen html yang kemudian data tersebut akan dikirimkan sebagai variabel untuk kemudian diproses oleh script pemroses tanpa melakukan refresh pada keseluruhan halaman web, sehingga pemrosesan data akan lebih cepat.

 

Kami membagi script menjadi tiga bagian, yaitu script pengirim ( sender.php ), script ajax ( prmajax.js ) dan script pemroses sederhana ( proses.php ) dengan harapan pembelajaran yang dasar ini akan semakin membuat kita paham tentang AJAX untuk kemudian bisa mengembangkannya sendiri pada contoh aplikasi yang lebih kompleks.

1. Script sender.php
Script ini merupakan script html biasa yang kita rancang dengan susunan seperti berikut :

<html>
	<head>
		<title>belajar AJAX bagian 2</title>
		<script type="text/javascript" src="prmajax.js"></script>
	</head>
	<body>
	<div id="dom_pesan"></div>
	<form name="frm">
		<table style="border:silver 1px solid; border-radius:5px;">
		<tr>
			<td colspan="2">FORM INPUT DATA</td>
		</tr>
		<tr>
			<td>Nama</td><td><input type="text" id="nama" size="30" /></td>
		</tr>
		<tr>
			<td>Alamat</td><td><input type="text" id="alamat" size="30" /></td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" name="btn" value="Kirim" onclick="kirim_data('dom_pesan');" />
			</td>
		</tr>
	</form>
	</body>
</html>

Pada script diatas terdapat dua buah elemen html yaitu input text dengan ID = nama dan input text dengan ID = alamat yang nantinya akan kita ambil valuenya dengan menggunakan javascript yaitu memanfaatkan fungsi getElemen.

2. Script prmajax.js
Script ini merupakan script javascript AJAX yang terdiri atas fungsi - fungsi javascript dan akan bertindak sebagai pengirim data tanpa melakukan refresh keseluruhan halaman.

function kirim_data(dom) {
    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
	//Jika ada variabel lain, tambahkan disini
	var nama = document.getElementById('nama').value;
	var alamat = document.getElementById('alamat').value;
	//alamat url script pemroses
    var url="http://localhost/tutorial/ajax/proses.php";
	//menyusun variabel yang akan dikirimkan dengan AJAX
    var param="nama="+nama+"&alamat="+alamat;
	
	//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;
}

pada script diatas, yang perlu kita perhatikan adalah fungsi kirim_data(dom) , dimana kata dom merupakan variabel yang nantinya akan kita isi dengan ID dari DOM untuk kita gunakan sebagao penampil data pesan yang diberikan oleh script proses.php. hal lain yang tak kalah pentingnya adalah pada bagian berikut :
var nama = document.getElementById('nama').value; yang maksudnya adalah mengambil value dari elemen html yang mempunyai ID = nama
var alamat = document.getElementById('alamat').value; yang maksudnya adalah mengambil value dari elemen html yang mempunyai ID = alamat

variabel - variabel tersebut selanjutnya disusun dalam perintah var param="nama="+nama+"&alamat="+alamat; untuk kemudian dikirimkan pada script penerima yaitu proses.php

3. Script proses.php
Script ini tugasnya adalah sebagai pemroses data yang dikirimkan oleh script ajax. Kita bisa memodifikasi script proses.php sesuai dengan kebutuhan kita, misalnya melakukan penyimpanan pada database, melakukan parsing dan lain - lain

<?php
echo 'Data yang anda kirimkan adalah : ';
print_r($_POST);
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
?>
<table border="1">
<tr>
	<td>Nama</td><td><?php echo $nama; ?></td>
</tr>
<tr>
	<td>Alamat</td><td><?php echo $alamat; ?></td>
</tr>
</table>
Pesan ini merupakan data yang ditampilkan oleh script proses.php <br />

Silahkan melakukan modifikasi pada script - script diatas sesuai dengan kebutuhan anda, mudah - mudahan tulisan kami ini bisa bermanfaat bagi kita yang ingin mempelajari pemrograman PHP dalam kaitannya dengan AJAX.

Download contoh script ajax


Komentar pembaca

DimasMaaf , saya mau tanya nih Gimana cara menggunakan jQuery ajax di template seperti http://themes.creativemilk.net/files/elite/index.html Saya sudah coba mengikuti tutorial diatas , tetapi tidak bisa Mohon bantuannya Makasihposting pada :2014-01-03 05:50:29