Skip to main content

AJAX

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

chris said…
wah ..nice posting nie..
thanks scriptnya..:D

o iya jng lupa mampir kesini

Popular posts from this blog

Find JIRA issues mentioned in Confluence Page

I have been walking through a lot of pages in internet but have not found any answer except one. However, the answer is not complete, so I will share my experience here. This feature is very useful, especially to summarize the issues found during certain tests, where the tests are reported in a confluence page. I found that there are so many questions about this, but Atlassian seems does not want to bother with this request. I found one way to do this by the following tricks Take one JIRA issue that related to the target confluence page (in this case, say it is GET-895) Find the global ID of a JIRA issue: http://bach.dc1.scram.com:8080/rest/api/latest/issue/GET-895/remotelink It will show the JSON like this: [{"id":28293,"self":"http://bach.dc1.scram.com:8080/rest/api/latest/issue/GET-895/remotelink/28293","globalId":"appId=662e1ccf-94da-3121-96ae-053d90587b29&pageId=105485659","application":{

Mininet/Containernet Problem: Exception: Error creating interface pair (s2-eth5,s3-eth1): RTNETLINK answers: File exists

If you did not shut down the previous running mininet/containernet network (e.g. if you lose your connection to remote server), you will got the following error when you try to rerun your mininet network Traceback (most recent call last): File "./mynet.py", line 31, in <module> net.addLink(d2, s1) File "build/bdist.linux-x86_64/egg/mininet/net.py", line 403, in addLink File "build/bdist.linux-x86_64/egg/mininet/link.py", line 430, in __init__ File "build/bdist.linux-x86_64/egg/mininet/link.py", line 474, in makeIntfPair File "build/bdist.linux-x86_64/egg/mininet/util.py", line 202, in makeIntfPair Exception: Error creating interface pair (d2-eth0,s1-eth2): RTNETLINK answers: File exists In order to solve the problem, you need to clean up the previous running topology by using the following command sudo mn -c It will clean up all your cache. It will be something like this $ sudo mn -c *** Re

Akte, paspor, dan visa untuk anak Indonesia yang lahir di Malaysia

Alhamdulillah, akhirnya urusan administrasi kenegaraan-nya Marwa sudah hampir selesai. Kemarin sore, di paspor marwa sudah ada visa pelancong selama 30 hari, tinggal nunggu proses di Putrajaya selama 7 hari untuk mendapatkan Multiple Entry-nya. Selepas itu, selesai.... Di dalam tulisan ini, saya pengen sedikit cerita pengalaman saya mengurus administrasi untuk anak Indonesia yang lahir di Malaysia (saya tidak tahu apakah untuk di negara lain prosedurnya juga sama). #1. Administrasi di klinik terdekat (sebelum melahirkan) Sebelum istri melahirkan, istri disarankan untuk mendaftar dan memeriksakan kandungannya secara rutin di klinik terdekat (meskipun hanya klinik, tapi fasilitas pemeriksaan dan labnya cukup lengkap dan canggih). Pada fase ini, istri akan diberi buku pemeriksaan. Buku ini penting untuk mengetahui kondisi si ibu, dan perkembangan janin. Buku ini akan diisi oleh dokter atau perawat yang memeriksa kandungan. #2. Administrasi setelah melahirkan Di klinik biasanya tid