Setelah kita selesai ta'aruf beberapa waktu yang lalu, kita lanjutkan proses ke khitbah dan proses inti. Untuk melakukannya kita harus mempunyai kemampuan dasar (minimal mengerti lah) pemrograman web, yaitu HTML, JavaScript, dan bahasa
server scripting seperti PHP. Dalam kehidupan nyata sangat diperlukan juga CSS dan DBMS seperti MySQL dan PostgreSQL. Walaupun singkatan dari AJAX ada kata XML, kita tidak harus menguasainya. Jika sudah siap, nyatakan bahwa kita telah menguasai kemampuan dasar tersebut dan siap melanjutkan proses. Dengan demikian, AJAX pun akan menerima kita.
Setelah proses di atas selesai, sekarang kita akan menyentuh AJAX untuk pertama kali. nya adalah text editor (misal Notepad++, VI, dan gEdit), internet browser Siapkan peralatan-peralatan yang diperlukan. Peralatan wajib(lebih baik gunakan beberapa internet browser populer untuk uji coba, misal Mozilla Firefox, Internet Explorer, Opera, dan Safari), web server (misal Apache dan Tomcat), dan bahasa server scripting (misal PHP, ASP, dan JSP). Silakan tambahkan sendiri peralatan lainnya sesuai selera.
Sekarang kita benar-benar siap untuk menjelajahi AJAX.
Contoh pertama, kita belum berhubungan dengan DBMS. Bukan pula hello world atau halo dunia. Kita akan membuat halaman web untuk menerima masukan dan langsung menampilkannya di halaman yang sama. Metode pengiriman data kali ini menggunakan GET.
Pertama, kita siapkan halaman/form HTML untuk menerima masukan dari pengguna dan menampilkan hasil masukannya. Misal namanya input_id.html, kodenya:
| <html>
<head>
<title>Hafni Syaeful Sulun | Tutorial AJAX | Mengirim Data ke Server dengan Method GET</title>
<script type="text/javascript" src="ajaxscript.js"></script>
</head>
<body>
<form name="form_input_id" method="get" action="javascript:input_id()">
<table>
<tr>
<td>Nama:</td>
<td><input type="textbox" name="nama" /></td>
</tr>
<tr>
<td>Jenis kelamin:</td>
<td><input type="radio" name="jenis_kelamin" value="Laki-laki" checked>Laki-laki <input type="radio" name="jenis_kelamin" value="Perempuan">Perempuan</td>
</tr>
<tr>
<td>Pendidikan:</td>
<td><select name="pendidikan"><option value="SD" selected>SD</option><option value="SMP">SMP</option><option value="SMA">SMA</option></select></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
</table>
</form>
<div id="main"> <!-- layer untuk menampilkan hasil dari AJAX -->
Di sini akan ditampilkan hasil input identitas.
</div>
</body>
</html> |
Setelah itu, kita beralih ke berkas JavaScript (dalam contoh ini bernama ajaxscript.js) yang akan menghubungkan form tadi dengan berkas yang akan memproses masukan dari form tersebut.
Pertama dan yang wajib, kita buat XMLHttpRequest object, yaitu sebuah API yang menyediakan fungsionalitas scripted client untuk transfer data antara klien dan server[1]. Berikut ini script-nya.
| var xmlHttp = GetXmlHttpRequestObject(); // langsung buat XMLHttpRequest object ketika halaman dimuat
function GetXmlHttpRequestObject() // fungsi untuk membuat XMLHttpRequest object
{
try
{
// Firefox, Opera 8.0+, Safari, Internet Explorer 7+
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer < 7
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
} |
Fungsi GetXmlHttpRequestObject akan mencoba (try) membuat XMLHttpRequest object. Jika tidak bisa, maka akan membuat ActiveXObject (ini khusus Internet Explorer < 7).
Kemudian, kita buat fungsi untuk mengubah bagian halaman tertentu, yang dalam contoh ini layer (div) ber-id "main", ketika request sedang diproses dan sudah selesai. Kita periksa readyState dari XMLHttpRequest object. Berikut ini nilai-nilai dari readyState:
0 : Request belum diinisialisasi.
1 : Request telah diinisialisasi, dikirim, atau sedang diproses di server.
2 : Response telah diterima klien.
3 : Response sedang diproses klien.
4 : Proses selesai.
Kita gunakan readyState 4 saja. Jika bernilai 4, tampilkan hasil request (response). Jika bukan 4, tampilkan keterangan "loading". Eit, memeriksa readyState saja belum cukup karena metode ini hanya akan berhasil jika tidak terjadi kesalahan pada sisi server. Klien tidak mengetahui apakah request telah diproses server atau belum. Untuk memeriksanya gunakan properti status HTTP request--sering lihat kan "HTTP error code 404 object not found" yang mengindikasikan bahwa object/berkas yang di-request tidak ada di server. Untuk keperluan AJAX ini, kita periksa apakah nilainya 200. Properti status ini bernilai 200 jika request telah diproses server. Script-nya:
| function stateChanged() // fungsi untuk mengubah bagian halaman ketika AJAX dijalankan
{
if (xmlHttp.readyState==4 && xmlHttp.status==200) // transfer data klien-server selesai
{
document.getElementById("main").innerHTML = xmlHttp.responseText;
}
else // transfer data klien-server belum selesai atau sedang diproses
{
document.getElementById("main").innerHTML = "Loading...";
}
} |
Selanjutnya, buat fungsi untuk mengirimkan data ke server dengan method GET[2]. Script-nya:
| function GetAjaxRequest(url) // fungsi GET
{
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.setRequestHeader("Cache-Control", "no-cache"); // untuk menghindari penggunaan cache browser
xmlHttp.send(null);
} |
Pada script di atas terdapat baris xmlHttp.setRequestHeader("Cache-Control", "no-cache");. Ini bertujuan agar browser tidak menggunakan cache (data temporer yang disimpan di browser). Artinya kita ingin mendapatkan data/halaman yang benar-benar baru dari server. Selain dengan mengeset header Cache-Control, mencegah caching juga bisa dengan menggunakan nilai random yang dimasukkan ke dalam parameter GET seperti berikut:
| function GetAjaxRequest(url) // fungsi GET
{
xmlHttp.onreadystatechange = stateChanged;
url += "&sid=" + Math.random(); // untuk menghindari penggunaan cache browser
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
} |
Karena dalam form HTML kita menggunakan input radio button, kita harus membuat fungsi untuk mengambil nilai yang dipilih pengguna. Sepengetahuanku ya begini, tidak bisa langsung diambil, harus menggunakan fungsi sendiri. Kalau ada yang tahu cara yang lebih mudah, beri tahu aku ya.
| function radio_value(radio) // fungsi untuk mengambil nilai dari radio button
{
for (i=0; i<radio.length; i++)
{
if (radio[i].checked)
return radio[i].value;
} |
Sekarang buat fungsi yang memproses form. Script-nya:
| function input_id()
{
// berkas PHP yang memproses form plus parameter GET
var url =
"input_id_action.php" +
"?submit=Submit" +
"&nama=" + encodeURI(document.form_input_id.nama.value) +
"&jenis_kelamin=" + encodeURI(radio_value(document.form_input_id.jenis_kelamin)) +
"&pendidikan=" + encodeURI(document.form_input_id.pendidikan.value);
GetAjaxRequest(url);
} |
Script di atas akan mengirimkan nilai-nilai dari form ke berkas input_id_action.php. Sama kan metodenya dengan metode pengiriman form langsung ke berkas PHP tanpa AJAX, yaitu dengan menuliskan parameter dan nilainya di belakang URL?
Nah, terakhir kita buat berkas PHP yang akan memproses nilai-nilai yang dikirimkan (dalam contoh ini bernama input_id_action.php). Kodenya:
| <?php
if (isset($_GET['submit']))
{
extract($_GET);
echo "
Nama: " . $nama . "<br />
Jenis kelamin: " . $jenis_kelamin . "<br />
Pendidikan: " . $pendidikan;
}
?> |
Referensi XMLHttpRequest bisa didapatkan di sini.
Demo tutorial ini bisa dilihat di sini.
Kode sumber tutorial ini bisa diunduh di sini.
| [1] | Definisi dari www.w3.org. |
| [2] | Method yang tersedia untuk XMLHttpRequest object ini adalah GET, POST, HEAD, PUT, DELETE, dan OPTIONS. |
mas hafni, tanya dong.
ReplyDeletekenapa ya di IE7 kalo enable native xmlhttp nya dicentang, maka ajax jadi error di bagian :
xmlhttp.send(null);
katanya invalid argument. apa maksudnya ya? makasih.
bikin pusing ni ie7. di browser lain atau di ie6 mah muluss