Aplikasi AJAX

BY IN AJAX Comments Off on Aplikasi AJAX

Berikut ini adalah contoh aplikasi AJAX. Function di bawah ini dapat ditrigger melalui event Java Script, diantaranya yang cukup populer adalah event onClick. Akan ada pengecekan status object XMLHttpRequest. Jika property readyState sudah sama dengan 4, maka hasil output akan ditampilkan, menimpa sebagian halaman web yang sudah kita set sebelumnya. Jika tidak, kita dapat menampilkan tulisan ‘Loading’ ataupun menampilkan gambar animasi loading screen, saat AJAX bekerja.
Metode getElementById sangat bermanfaat untuk mengirimkan query string ke server untuk selanjutnya diproses secara server side. Pengiriman query string semacam ini sangat berguna dalam updating database kita. Sebagai contoh, kita dapat mengirimkan code untuk mengakses database. Dan saat kita menggunakan metode getElementById, kita tidak perlu menggunakan form untuk definisi tiap objectnya. Berikut adalah contoh scriptnya.

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById(‘ajaxDiv’);
if (ajaxDisplay.style.display == ‘none’) {
ajaxDisplay.style.display = ‘block’;
}
ajaxDisplay.innerHTML = ajaxRequest.responseText;

}
else
{
var ajaxDisplay = document.getElementById(‘ajaxDiv’);
if (ajaxDisplay.style.display == ‘none’) {
ajaxDisplay.style.display = ‘block’;
}
ajaxDisplay.innerHTML = “<img src=images/ajaxload.gif>”;
}
}

//gathers all the variables
var komentar=document.getElementById(‘komentar’).value;

var queryString = “?komentar=” + komentar;
ajaxRequest.open(“GET”, “halaman_ajax.php” + queryString, true);
ajaxRequest.send(null);




Comments are closed.