Perkenalan
Ajax telah mengubah cara user berinteraksi dengan halaman web. Setelah sekian lama para pengguna web frustasi dengan paradigma redraw-refresh pada aplikasi web tradisional, yang mengambil keseluruhan isi pada halaman web dari server. Hal ini menyebabkan user kehilangan posisi scroll pada halaman web. Aplikasi ajax memiliki karakteristik untuk meng-update halaman dengan smooth meng-update bagian tertentu pada halaman web, sehingga tidak mengharuskan keseluruhan halaman web di-load kembali. Referensi dari tulisan ini dapat anda dapatkan dari “ASP .NET AJAX in Action”
Apa sih AJAX itu?
AJAX(Asynchronous JavaScript and XML) merupakan upaya atau pola pembangunan web yang menggunakan client-side scripting untuk bertukaran data dengan server. Upaya ini memungkinkan halaman dapat di-update secara dinamis tanpa menyebabkan keseluruhan halaman di-refresh. Sebagai hasilnya, interaksi antara user dan aplikasi tidak terganggu dan terus berlanjut. Beberapa anggapan menyatakan kalau pencapaian ini merupakan bagian dari teknologi dan bukan sebuah pola. Nyatanya, ini merupakan kombinasi pengunaan teknologi dengan cara yang kreatif 
.
Teknologi ini bukan hal yang baru. Teknik asynchronous yang men-load isi dari web dapat ditemukan semenjak Explorer 3 (juga dikenal sebagai masa Jurassic web development) melalui elemen IFRAME. Kemudian, ketika Explorer 5 memperkenalkan XMLHttpRequest ActiveX object, yang memungkinkan pertukaran data antara client dan server melalui web browser scripting languages. Sebagai catatan, remote scripting sebagai perintis jalan tebentuknya AJAX. Sebelum XMLHttpRequest object, remote scripting memungkinkan browser bertukar informasi dengan server.
Bahkan ketika objek XMLHttpRequest diperkenalkan lebih jauh melalui aplikasi Outlook Web Access, ajax tidak begitu terkenal. Sampai akhirnya, Google mempopulerkan teknik ajax melalui google map.
Komponen-komponen AJAX
Sebagaimana telah disebutkan sebelumnya, pola pemprogaman ajax yang terdiri dari sekumpulan teknologi membawa kepuasan pada user dengan cara yang imajinatif. Berikut ini merupakan pilar utama pola pemrograman dan cara mereka berperan :
- JavaScript, merupakan scripting language yang umumnya menambahkan inter-aktifitas ke halaman HTML. JavaScript pada dasarnya menggunakan bahasa pemrograman C secara bebas, JavaScript merupakan bahasa scripting yang paling populer dan didukung oleh hampir keseluruhan browser. Aplikasi AJAX merupakan built in JavaScript.
- Document Object Model (DOM), mendefinisikan struktur dari halaman web sebagai sekumpulan objek yang dapat diprogram yang dapat diakses melalui JavaScript. Dalam pemrograman AJAX, DOM digunakan untuk menggambarkan kembali (re-draw) porsi halaman web secara efektif.
- Cascading Style Sheet (CSS), menyediakan jalan untuk membuat tampilan visual dari elemen-elemen halaman web. CSS digunakan dalam aplikasi AJAX untuk memodifikasi tampilan luar dari user interface secara interaktif.
- XMLHttpRequest, memungkinkan client-side scripting untuk membuat sebuah HTTP request. Ajax menggunakan objek XMLHttpRequest untuk membuat asynchronous request ke server dengan menolak merefresh keseluruhan halaman atau postback.
Sebagai catatan, nama objek XMLHttpRequest bisa menyesatkan karena data dapat ditransfer dalam bentuk XML atau format text-based lainnya. Framework ASP.NET AJAX bergantung pada sebuah format JavaScript Object Notation(JSON) untuk menirimkan data ke dan dari server.
Dalam penerapan ajax, anda dapat menganggap JavaScript sebagai perekat (lem) yang mengikat semuanya. Ketika data dibutuhkan, objek XMLHttpRequest digunakan untuk membuat request ke server. Ketika data dibutuhkan, DOM dan CSS digunakan untuk meng-update interface browser user secara dinamis.
Asynchronous web programming
Huruf A dalam Ajax merupakan kependekan dari asynchronous, ini merupakan kunci prilaku dalam pola pemrograman Ajax. Asynchronous berarti tidak serempak atau tidak terjadi pada waktu yang sama. Untuk lebih memahami ini, mari kita coba contoh sehari-hari. Ketika anda pergi ke toko kopi starbucks dan berjalan ke kasir sambil membawa pesanan anda. Kasir menandai gelas kosong dengan detail pesanan anda dan lalu menempatkannya ke dalam antrian. Antrian dalam contoh ini, secara harafiah merupakan sekumpulan gelas kosong yang merepresentasikan sekumpulan order yang menunggu untuk dipenuhi. Proses ini memisahkan(decouple) kasir dari orang-orang yang mempersiapkan minuman. Dengan cara ini, kasir dapat terus berinteraksi dengan pelanggan, sementara pesanan sedang diproses pada waktu yang berbeda –secara asynchronous. Pada akhirnya, starbucks dapat meningkatkan produksi dan memuaskan customer.
Berikut ini adalah ilustrasi dari proses yang terjadi pada halaman web sebelum dan sesudah menggunakan AJAX. Anda dapat membaca referensi tulisan ini dari “Head First Ajax”.
Sebelum menggunakan AJAX
Sesudah menggunakan AJAX
Ajax dapat diterapkan dalam 5 langkah, so Let’s Rock ‘n Roll, ehmm .. maksudnya Let’s Start It.
Langkah 1: Modifikasi halaman HTML/XHTML
Kita perlu menambahkan tag <script> untuk menngacu ke halaman JavaScript.
Langkah 2: Buat sebuah fungsi untuk menginisialisasi halaman
Ketika halaman web pertama kali di-load, kita perlu menjalankan JavaScript untuk menge-set bagian halaman tertentu, mendapatkan objek request, dan memastikan halaman siap digunakan.
Langkah 3: Buat sebuah fungsi untuk membuat objek request
Kita memerlukan sebuah cara untuk berkomunikasi dengan server dan mendapatkan detail dari setiap halaman web. Maka kita perlu membuat sebuah fungsi untuk membuat objek request untuk berkomunikasi ke server.
Langkah 4: Mengambil detail dari item dari server
Kita perlu mengirimkan request ke server dan memberitahukan apa yang harus dilakukan browser ketika server merespon.
Langkah 5: Tampilkan detail item.
Kita perlu meng-update bagian halaman kita, ketika server merespon request kita.
Untuk memahami lebih dalam mengenai AJAX, mari kita membuat contoh kecil. Referensi dari contoh ini dapat anda dapatkan dari www.w3schools.com.
Form HTML
Ini adalah halaman HTML biasa yang berisi form dan sebuah link ke JavaScript. Mari kita berikan nama file ini, “testAjax.html”
<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
Suggestions: <span id="txtHint"></span>
</body>
</html>
Berikut ini adalah cara kerja form ini.
- Sebuah event dipicu ketika user menekan, dan melepaskan key pada input text yang bernama “txt1″.
- Ketika event terpicu, sebuah fungsi yang bernama showHint() dieksekusi.
- Pada bagian bawah form ada sebuah <span> yang disebut “txtHint”. Ini akan dijadikan tempat data yang dikembalikan dari fungsi showHint().
Kode javascript akan disimpan pada “clienthint.js” dan dihubungkan dengan dokumen HTML.
var xmlHttp;
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="gethint.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
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;
}
Fungsi showHint()
Ketika panjang string yang dimasukkan pada input text lebih besar dari 0 (str.length>0), fungsi ini akan menjalankan proses sebagai berikut:
- Mendefinisikan url (nama file) yang dikirimkan ke server.
- Menambahkan parameter (q) ke url beserta nilai yang dimasukkan pada input text.
- Menggunakan fungsi random untuk mencegah server menggunakan cached file.
- Memanggil fungsi GetXmlHttpObject untuk membuat sebuah objek XMLHTTP, dan memanggil objek untuk mengeksekusi fungsi stateChange() ketika terjadi perubahan.
- Membuka objek XMLHTTP berdasarkan url yang diberikan.
- Mengirimkan HTTP request ke server.
Jika input text kosong maka fungsi ini akan mengosongkan isi dari txtHint. Method open pada request.open() untuk menginisialisasi koneksi, parameter “GET” dalam method ini mengindikasikan bagaimana data dikirimkan (pilihan yang lain adalah “POST”), parameter url dalam method ini merupakan url untuk script di sisi server yang akan merespon ke request. Dan parameter yang paling menarik dalam method open() ini adalah nilai boolean “TRUE” yang berarti request harus asynchronous, sehingga kode pada browser harus terus berjalan selama menunggu respon dari server.
Fungsi stateChanged()
Fungsi ini akan dieksekusi setiap kali state dari objek XMLHTTP berubah. Ketika state berubah ke 4 (“complete”), txtHint akan diisi dengan text respon.
Berikut ini properti dari readyState:
| State |
Deskripsi |
| 0 |
Request tidak diinisialisasi |
| 1 |
Request telah di-set |
| 2 |
Request telah dikirimkan |
| 3 |
Request sedang dalam proses |
| 4 |
Request telah lengkap |
Fungsi GetXmlHttpObject()
Aplikasi AJAX hanya dapat berjalan pada browser yang secara penuh XML. Tujuan dari fungsi ini adalah untuk membuat objek XMLHTTP yang berbeda untuk browser yang berbeda.
Halaman server yang dipanggil oleh kode javascript adalah sebuah file PHP biasa yang disebut “gethint.php”. Kode pada “gethint.php” akan memeriksa sekumpulan nama pada array dan mengembalikan nama yang sesuai kepada client.
<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
//Set output to "no suggestion" if no hint were found
//or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
Jika ada text yang dikirimkan oleh javascript (strlen($q) > 0), maka yang dilakukan sebagai berikut:
- Mencari nama yang sesuai dengan karakter yang dikirimkan oleh javascript
- Jika lebih dari satu nama yang sesuai maka semua string respon yang sesuai akan diberikan.
- Jika tidak ada nama yang sesuai maka respon akan di-set “no suggestion”
- Jika satu atau lebih nama yang sesuai, maka respon akan di-set ke semua nama ini.
- Respon ini akan dikirimkan ke “txtHint”.
Ketika anda menambahkan sebuah penyimpanan data lokal pada aplikasi anda, anda akan mendapatkan sebuah tempat dimana semua penyimpanan data dan request yang diterima dilewatkan. Contohnya, jika aplikasi AJAX mengeluarkan sebuah JSON(JavaScript Object Notation) untuk me-request secara langsung ke server untuk mendapatkan semua account untuk satu user, anda mungkin menggantinya dengan
Langkah selanjutnya, seperti pada diagram di bawah, adalah membuat layar data yang menggunakan database gears dari pada mengambil data dari web server. Hal ini akan menjadi lebih sederhana jika layar data ini memiliki interface yang sama dengan layar data yang ada, yang digunakan untuk berkomunikasi dengan
Arsitektur tanpa layar data
