Our Blog

Beberapa teman menanyakan kepada saya, apakah mungkin melakukan update pada beberapa DIV yang berbeda, hanya dengan satu kali pemanggilan fungsi AJAX? Ternyata hal tersebut dapat dilakukan dengan mudah. Aplikasi ini pernah saya gunakan untuk merefresh dua DIV pada satu halaman website, dimana yang satu berisi data yang saya ambil dari MySQL sementara yang satu lagi adalah lokasi dari data2 tersebut yang ditunjukkan dengan Google Map. Perhatikan contoh fungsi AJAXnya sebagai berikut:

function ajaxSearch(hal){

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

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
ajaxRequest1 = 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(‘ajaxResult’);
if (ajaxDisplay.style.display == ‘none’) {
ajaxDisplay.style.display = ‘block’;
}
ajaxDisplay.innerHTML = ajaxRequest.responseText;

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

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

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

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

var queryString = “?keyword=” + keyword;

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

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

Jadi dari contoh diatas cukup jelas, bahwa untuk membuat satu fungsi AJAX mampu memanggil dua file PHP yang berbeda, pertama2 kita harus memesan dua variabel AJAX, yang digunakan untuk mengirimkan parameter ke PHP dan juga memeriksa status atau state dari AJAX

Selamat mencoba.