Tutorial Ajax Part 1 (Pengenalan Ajax)

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 :

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)

7 Comments

  1. ima
    Feb 18th, 2008 1:26 pm

    klo ajax wat spelling checker punya contoh sourcenya g? ❓

  2. […] Ajax ini melanjutkan tutorial ajax sebelumnya yang membahas tentang pengenalan Ajax dan penggunaan Ajax untuk membaca file TXT serta penggunaan Ajax, PHP, dan Database. Kali ini akan […]

  3. sadad
    Nov 9th, 2009 8:09 am

    😯 🙁 😛 ❓ ➡ ➡ 😳 🙁 🙁 😡

  4. apaahja
    Nov 26th, 2009 2:52 am

    ealah cuma gini tok….

  5. enggalicious
    Feb 21st, 2010 7:15 am

    mkasih banyakk bro …
    jadi <3 AJAX neh gue …. 😆
    .-= enggalicious´s last blog ..UNAS produktif, oh UNAS produktif =-.

  6. fahrudin
    Oct 25th, 2010 12:11 am

    kl untuk pasang shoutbox dari ajax gmn.. apa harus tau kode diatas?.. makasih

Leave a Reply

Your email address will not be published. Required fields are marked *