Home > Articles > TEKNIK AJAX

TEKNIK AJAX

January 26, 2007 Leave a comment Go to comments

LATAR BELAKANG
Tentang perlunya menggunakan ajax, terlebih dahulu kita perlu melihat ajax dari perspektif interaksi client server tradisional. Dalam hal ini kita perlu membandingkan teknik ajax dengan interaksi client server tradisional.
Pada interaksi client server tradisional, request dan response baik yang melibatkan form (via post) maupun link (via Get) memerlukan proses yang tersendiri. Artinya suatu proses hanya bisa dilakukan setelah proses lain selesai. Hal ini bahkan terjadi di level end user. Terlalu banyaknya request dan response yang terjadi tersebut, seringkali membuat user bosan karena harus melakukan banyak aksi untuk melakukan suatu proses tertentu.
Selain itu, bagi developer interaksi client/server tradisional dapat menghabiskan bandwidth. Kenapa menghabiskan bandwidth ?. karena pada interaksi tradisional, ketika suatu proses selesai dieksekusi user akan dibawa pada proses lain yang tampilannya cenderung sama dengan tampilan sebelumnya. Pada interaksi tradisional server akan mengirimkan seluruh page sebagai response terhadap user. Setidaknya 2 argumentasi inilah yang membuat kita perlu mulai menggunakan ajax.

AJAX
AJAX singkatan dari Asynchronous JavaScript and Xml, merupakan salah satu teknik pada pengembangan aplikasi web. Tujuannya untuk membuat aplikasi web semakin efektif dengan cara mengurangi jumlah data yang ditukarkan oleh client/server. Proses dilakukan dibackground sehingga user tidak mengetahui proses yang dilakukan oleh AJAX.
Komponen utama yang diperlukan untuk implementasi AJAX adalah Objek XMLHTTPRequest. Objek Ini merupakan object dari class javascript yang berfungsi untuk melakukan koneksi ke server dan mengirimkan HTTP request tanpa load page.
Umumnya setiap browser memiliki perbedaan dalam hal XMLHTTPRequest. Pada IE v.5 objek XMLHTTPRequestnya dikenal dengan Active X Object. Sedangkan pada sebagian browser yang lain (e.g : Mozilla, Opera, dll) dikenal dengan objeck XMLHTTPRequest. Oleh karena itu, penggunaan browser disisi client harus diperhatikan oleh developer dalam implementasi ajax.
Berikut contoh implementasi ajax *) :

function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == “Microsoft Internet Explorer”){
ro = new ActiveXObject(“Microsoft.XMLHTTP”);
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var xmlhttp = createRequestObject();
function cari(teks)
{
var kode = teks.value;
if (!kode) return;
xmlhttp.open(‘get’, ‘getdata.php?kode=’+kode, true);
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
{
var r = xmlhttp.responseXML.getElementsByTagName(‘data’);
document.getElementById(“nama”).value = r[1].firstChild.data;
document.getElementById(“harga”).value = r[2].firstChild.data;
}
return false;
}
xmlhttp.send(null);
}

Kode:
Nama Barang :
Harga :

file : autocomplete.html

Berikut script server yang digunakan untuk menangani request via Ajax :

file getdata.php

Penjelasan Script
Script diatas digunakan untuk mengambil nilai dari angka yang dimasukkan pada input text. Request dijalankan ketika event onchange pada kode dijalankan. Kemudian response dikirimkan pada input text nama barang dengan menggunakan method getElementById dari data yang dikirimkan oleh server.

*) script diatas diambil dari http://www.bengkelprogram.com

  1. November 14, 2009 at 8:03 pm

    Mantab om.. tapi ada yang lebih spesifik dan pembawaannya seperti kata2 di atas ga? enak tata bahasanya ga terlalu kaku..

    • November 16, 2009 at 1:19 am

      hehehe.. ini juga lagi belajar memanusiakan bahasa teknis mas..kesulitan orang teknis memang itu

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: