Dalam mengembangkan web, AJAX sering digunakan oleh para web developer untuk membuat halaman webnya lebih dinamis dan lebih cepat aksesnya. Metode getElementById sering digunakan untuk mengirimkan query string, yang dapat di GET oleh PHP. Yang menjadi persoalan sekarang, apakah kita dapat mengirimkan query string berupa variabel array? Jika kita perlu menampilkan data dari suatu tabel, dan kita perlu mengupdate tampilan tersebut sesuai dengan data yang dipilih user. Maka diperlukan sebuah looping untuk membaca isi seluruh tabel. Apakah kita bisa mengirimkan semua nilai tersebut? Satu object akan mempunyai nama lebih dari satu, sesuai dengan jumlah record yang ada di dalam tabel. Berikut ini adalah contoh script AJAXnya:

function ajaxComponent(total){

var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try{
ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e){
// Something went wrong
alert(“Your browser cannot support AJAX!”);
return false;
}
}
}
// 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 tglcheckin=document.getElementById(‘tglcheckin’).value;
var tglcheckout=document.getElementById(‘tglcheckout’).value;
var idhotel=document.getElementById(‘idhotel’).value;

var queryString = “?informasi=” + informasi;

for(j=0;j<=total-1;j++) {
queryString+= “&elemen” + j + “=” + document.getElementById(‘elemen’+j).value;
}

ajaxRequest.open(“GET”, “update_ajax.php” + queryString, true);
ajaxRequest.send(null);
}