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.
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
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.
Selanjutnya akan dibahas penggunaan Ajax untuk mengambil data dari file TXT beserta full source codenya.
Next :
Tutorial Ajax Part 2 (Working With File)
klo ajax wat spelling checker punya contoh sourcenya g? ❓
😯 🙁 😛 ❓ ➡ ➡ 😳 🙁 🙁 😡
ealah cuma gini tok….
mkasih banyakk bro …
jadi <3 AJAX neh gue …. 😆
.-= enggalicious´s last blog ..UNAS produktif, oh UNAS produktif =-.
kl untuk pasang shoutbox dari ajax gmn.. apa harus tau kode diatas?.. makasih