AJAX yang dimaksud di sini bukan merupakan suatu daerah di Inggris sana. Bukan pula nama klub sepakbola. AJAX yang dimaksud di sini adalah sebuah teknologi baru yang mulai populer pada tahun 2005 sejak dikeluarkannya Google Suggest (pencarian yang ketika kita mengetikkan keyword langsung muncul suggestion yang berkorelasi dengan apa yang kita cari). Dalam perkembangan selanjutnya AJAX kemudian digunakan pada hampir semua aplikasi Google, entah itu Gmail, Google Map, dan Google Office.
AJAX merupakan singkatan dari Asynchronous JavaScript And XML. Dia bukan merupakan bahasa pemrograman baru, tapi ia merupakan perkawinan yang mengagumkan dari Java Script dan XML. Dalam prakteknya, tidak hanya JavaScript dan XML yang diintegrasikan, tapi juga PHP dan kadang juga Java. Tentu saja, karena kita akan bermain pemrograman web, maka paling tidak kita harus sudah akrab dengan tag-tag HTML. Oleh karena itu, menggunakan AJAX serasa seperti dihadapkan dengan banyak mainan yang bisa kita otak-atik semau kita.
Muncul pertanyaan: apa kelebihan AJAX? Kan dia hanya menggabungkan teknologi yang sudah ada yaitu JavaScript dan XML?
Jawaban dari pertanyaan tersebut adalah karena dengan proses asinkron yang direquest melalui JavaScript, kita bisa membuat prosesnya lebih cepat karena diolah di client (seperti kita ketahui, JavaScript merupakan client-side scripting). Selain itu, dengan AJAX, proses refreshing sebuah halaman tidak harus dilakukan penuh satu halaman, akan tetapi cukup dilakukan pada bagian halaman yang membutuhkan refresh saja. Dengan efisiensi komunikasi ini, beban server juga akan semakin berkurang.
Prinsip dari pemrograman AJAX sebenarnya cukup sederhana. Pada bagian selanjutnya, akan penulis jelaskan program sederhana berbasiskan teknologi AJAX.
Langkah pertama, bukalah editor kesukaan anda (penulis memilih menggunakan aptana IDE karena gratis dan powerful – Aptana dapat didownload di http://www.aptana.com). Kemudian buatlah tiga file, yaitu: index.htm, simple.js, dan simpleResponse.xml.
Untuk index.htm, ketikkan scriptnya sebagai berikut:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"
/>
<title>Simple AJAX Application</title>
<script
type="text/javascript"
src="simple.js"></script>
</head>
<body>
<form
action="#">
<input
type="button"
value="Start simple AJAX Request"
onclick="request();"
/>
</form>
<div
id="simpleResponse"></div>
</body>
</html>
Form ini hanya terdiri dari satu button yang akan melakukan request begitu di-click (onclick="request();"). Method request ini dipanggilkan dari simple.js yang dipanggil di dalam tag script di dalam tag head.
Untuk simple.js, ketikkan scriptnya sebagai berikut:
/**
*
@author
Arwan
A
Khoiruddin
*/
var
xmlHttp;
function
createXMLHttpRequest()
{
if
(window.ActiveXObject)
{
xmlHttp
=
new
ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xmlHttp
=
new
XMLHttpRequest();
}
}
function
request()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange
=
handleStateChange;
xmlHttp.open("GET","simpleResponse.xml",true);
xmlHttp.send(null);
}
function
handleStateChange()
{
if
(xmlHttp.readyState
==
4
&&
xmlHttp.status
==
200)
{
var
result
=
xmlHttp.responseXML;
hasil
=
result.getElementsByTagName("response")[0].childNodes[0].nodeValue;
alert("the server replied with "
+
hasil);
hasil
=
result.getElementsByTagName("subresponse");
var
i=0;
var
docHtml
=
"";
while
(i
<
hasil.length)
{
hasilSub
=
hasil[i].childNodes[0].nodeValue;
docHtml
=
docHtml
+
"<i>"
+
hasilSub
+
"</i><br>";
i++;
}
document.getElementById("simpleResponse").innerHTML=docHtml;
}
}
Function yang dipanggil pertama kali adalah request(), proses ini akan meng-create objek xmlHttp untuk request. Kalau browsernya IE, maka xmlHttp akan dibuat berupa ActiveXObject, untuk selain IE, objek xmlHttp dibuat berupa objek xmlHttpRequest(). Setelah itu, pada saat kondisinya readyState (xmlHttp tidak sibuk), xmlHttp akan melakukan proses yang diinginkan, dalam hal ini dalam handleStateChange. xmlHttp akan membuka (GET) file xml yaitu simpleResponse.xml.
Untuk simpleResponse.xml, ketikkan sebagai berikut:
<?xml
version="1.0"
encoding="utf-8"?>
<response>
Hello, this is a simple response
<subresponse>sub satu</subresponse>
<subresponse>sub dua</subresponse>
</response>
SimpleResponse ini akan diparsing dalam method handleStateChange() sesuai tag-tag yang dipunyainya.
Aplikasi AJAX yang lebih lanjut akan saya berikan dalam tulisan-tulisan selanjutnya. Insya Allah.
Comments
thanks scriptnya..:D
o iya jng lupa mampir kesini