Tutorial Ajax Part 1 (Pengenalan Ajax)

by

Sekarang ini sedang marak-maraknya Web 2.0. Salah satu ciri Web 2.0 adalah digunakannya Ajax dalam pembuatannya. Contoh Web 2.0 adalah Google Adsense dan Flickr.
Web 2.0

Ajax merupakan kependekan dari Asynchronous JavaScript And XML merupakan suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Dengan Ajax kita bisa melakukan pertukaran data dibelakang layer, sehingga halaman web tidak harus reload ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.

Ajax berbasis pada 4 web standar, yaitu :
• JavaScript
• XML
• HTML
• CSS
Ajax mengguanakan JavaScript XMLHttpRequest object untuk melakukan request ke server. Setiap browser mempunyai cara sendiri untuk membuat XMLHttpRequest.

function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.');
}
}

Source code diatas akan membuat object xmlHttpRequest. Selanjutnya yang harus dilakukan adalah menyimpan objek XMLHttpRequest ke dalam suatu variabel supaya lebih mudah diakses, seperti pada contoh di bawah ini :

var request = getXmlHttpRequestObject(); //XmlHttpRequest Object
Pembuatan objek XMLHttpRequest bisa dilakukan dalam berbagai cara. Jika Anda membaca buku dan mendapatkan cara yang berbeda, pada dasarnya intinya sama, yaitu membuat objek XMLHttpRequest.

XMLHttpRequest Properti :
1. onreadystate
Menampung status data yang dikirimkan ke server.
2. onreadystatechange
Menampung perubahan nilai pada onreadystate
3. response XML
Membaca struktur dari dokumen XML agar dapat dibaca isinya.
4. response Text
Membaca nilai dari file text

Berikut ini satus onreadystate dikembalikan oleh server :
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is complete

Contoh penggunaan onreadystatechange :

function getNama() {
var phone = document.getElementById("box").value;
var url = "data.php" ;
request.open("GET", url, true);
request.onreadystatechange = updatePage; //Callback
request.send(null);
}

function updatePage() {
if (request.readyState == 4)
alert("Proses Selesai!");
}

Pada contoh diatas akan muncul pesan “Proses Selesai“ setiap kondisi readyState berubah. Pada fungsi updatePage di tambahkan request.readyState == 4 supaya pesan hanya akan muncul jika status request sama dengan 4 atau sudah selesai di proses.

Keterangan per baris :

request.open("GET", url, true);

GET : Berarti hanya akan melakukan request atau tidak ada data yang dikirimkan.
URL : lokasi file yang direquest.
true : Berarti request dilakukan secara asynchronous, yang artinya user tidak harus menuggu suatu request untuk melakukan request lainnya.

Untuk lebih memahami tentang request secara Asynchronous silahkan baca beberapa artikel berikut ini :
http://ajaxian.com/archives/is-asynchronous-really-used-in-ajax
adaptivepth jesse jame garrett

request.send(null);

Artinya tidak ada parameter yang dikirimkan.

Jika ada yang kurang jelas silahkn komentar disini

Selanjutnya akan dibahas penggunaan Ajax untuk mengambil data dari file TXT beserta full source codenya.

Next :

Tutorial Ajax Part 2 (Working With File)

Related articles by Zemanta

7 thoughts on “Tutorial Ajax Part 1 (Pengenalan Ajax)”

  2. Pingback: Tutorial Ajax Part 4 - Working With Web Services

Leave a Comment