Belajar Ajax – Contoh sederhana AJAX | Jaringan Koder Indonesia

Seri Belajar Ajax

Setelah memahami arti AJAX dan konsep XMLHttpRequest maka tahap selanjutnya adalah membuat sebuah script sederhana mengenai ajax. Adapun langkah-langkah yang harus dilaksanakan adalah

1. Membuat halaman web antarmuka (index.html)

Yang dilakukan pertama kali adalah membuat file HTML yang nantinya akan digunakan sebagai halaman web AJAX. Dalam contoh ini, yang digunakan adalah file index.html. Halaman inilah yang akan dijadikan interface untuk membuat object XHR dan memanggil data ke server

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bab 1 - Pengenalan Ajax</title>
<script type="text/javascript" src="HelloAjax.js"></script>
</head>
<body onload='process()'>
Nama Anda:
<input type="text" id="myName" />
<div id="divMessage" />
</body>
</html>

Dalam halaman ini, file JavaScript yang digunakan sebagai AJAX adalah script HelloAjax.js. Dalam body halaman ini, didefinisikan event onload=’process(), sehingga ketika halaman ini di-load maka akan selalu memanggil fungsi process() yang terletak di file HelloAjax.js tersebut.

2. Membuat client-side script JavaScript untuk AJAX dengan objek XMLHttp (HelloAjax.js)

Langkah pertama untuk menggunakan objek XMLHttp, adalah membuatnya terlebih dahulu. Karena Microsoft mengimplementasikan dengan kontrol ActiveX, maka harus digunakan kelas ActiveXObject di JavaScript, dengan melewatkan signature kontrol XMLHttp:

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")

Ada juga beberapa versi baru yang dikeluarkan sesuai dari library MSXML yang dikeluarkan dengan kestabilan dan kecepatan yang makin baik. Beberapa signature lain tersebut adalah:

• MSXML2.XMLHttp
• MSXML2.XMLHttp.3.0
• MSXML2.XMLHttp.4.0
• MSXML2.XMLHttp.5.0

Untuk provider lain digunakan objek yang dideklarasikan sebagai berikut:

var xmlHttp = new XMLHttpRequest()

Contoh lengkapnya untuk membuat objek XMLHttp adalah sebagai berikut:

//////////////////////////////////////////////////////////////
// $Hello Ajax.Js                                            //
// File untuk memanggil helloAjax.php
/////////////////////////////////////////////////////////////
 
var xmlHttp = createXmlHttpRequestObject();
// Create XMLHttpRequest
function createXmlHttpRequestObject()
{
    var xmlHttp;
    if(window.ActiveXObject){
        try{
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }  catch (e)  {
            xmlHttp = false;
        }
    }
     // jika mozilla atau yang lain
     else {
        try{
            xmlHttp = new XMLHttpRequest();
        }catch (e){
            xmlHttp = false;
        }
    }
    if (!xmlHttp)
        alert("Error creating the XMLHttpRequest object.");
    else
        return xmlHttp;
  }
 
//Memanggil file HelloAjax.php Secara Asingkron
function process(){
     if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0){
        name = encodeURIComponent(document.getElementById("myName").value);
        xmlHttp.open("GET", "HelloAjax.php?name=" + name, true);
        xmlHttp.onreadystatechange = handleServerResponse;
        xmlHttp.send(null);
    } else
        setTimeout('process()', 1000);
}
//di eksekusi otomati jika pesan diterima
function handleServerResponse() {
    ///jika rewuest complete
    if (xmlHttp.readyState == 4){
        if (xmlHttp.status == 200) {
          // extract  XML yang diterima
          xmlResponse = xmlHttp.responseXML;
          xmlDocumentElement = xmlResponse.documentElement;
          helloMessage = xmlDocumentElement.firstChild.data;
          document.getElementById("divMessage").innerHTML =
                                    '<i>' + helloMessage + '</i>';
          setTimeout('process()', 1000);
        }
        else {
            alert("ERROR: " + xmlHttp.statusText);
      }
   }
}

Setelah objek XMLHttp dibuat, maka dipanggil method open() untuk inisialisasi objek dengan 3 parameter:

Tipe Request : string yang mengindikasikan tipe dari request, umumnya GET atau POST.
URL : string yang berisi URL yang akan dikirimkan.
Async : nilai boolean yang mengindikasikan apakah request dibuat secara asynchronous atau tidak.

Contoh untuk membuat request asynchronous GET untuk HelloAjax.php?name= adalah sebagai berikut:

36	xmlHttp.open("GET", "HelloAjax.php?name=" + name, true);

Kemudian definisikan event handler onreadystatechange. Objek XMLHttp mempunyai properti readyState yang berubah ketika request dikirim dan response diterima.Setiap kali properti ini berubah, maka event onreadystatechange akan dipanggil. Karena perbedaan implementasi browser, maka nilai readyState yang cross-browser adalah 0, 1, dan 4.

3. Membuat server-side script dengan PHP (HelloAjax.php)

Script PHP inilah yang diminta oleh request XMLHttp sebagai response dalam bentuk format XML yang nanti di-parsing oleh client JavaScript.

< ?php
// Output Dalam bentuk XML
header('Content-Type: text/xml');
// generate XML header
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
echo '<response>';
$name = $_GET['name'];
$userNames = array('ANDI', 'SURYA', 'NANA', 'LALA', 'HAKI','PUTRA');
if (in_array(strtoupper($name), $userNames))
    echo 'Halo.. ' . htmlentities($name) . '!';
else if (trim($name) == '')
    echo 'hmm... sapa ya!';
else
    echo htmlentities($name) . ', gak kenal tuh!';
echo '</response>';
?>

Dalam contoh AJAX sederhana ini, ketika user diminta untuk mengetikkan nama user, server selalu mengirim response. Ketika user sedang mengetikkan, server dipanggil secara asynchronous, pada selang waktu tertentu (dalam contoh 1000 ms), sehingga menjelaskan kenapa tidak diperlukannya tombol untuk memberitahukan bahwa kita telah selesai mengetik dan mengirimkannya ke server. Untuk beberapa nama tertentu yang diketikkan, pesan yang ditampilkan pada halaman akan berbeda.

Pesan yang berbeda tersebut terletak di element <div> dengan id=divMessage, jadi ketika response datang kemudian diparsing, maka pesan yang didapat dari response akan ditampilkan di element ini. Sehingga untuk menampilkan suatu bagian dari halaman web yang bersifat dinamis diperlukan element, dalam contoh ini <div>, yang digunakan oleh JavaScript untuk dapat dimanipulasi

11 Comments

Pingback : Belajar AJAX 4 – eXtensible Markup Language (XML) | webwoorks
Pingback : Belajar Ajax 4 – JSON | webwoorks
Pingback : Belajar AJAX – eXtensible Markup Language (XML) | Koder Indonesia
May 11, 2010 1:36 pm by Sofian Reply

Bagus mas tutornya.. keep posting..
Ngomong-ngomong mas pakai DW ya?
June 1, 2010 1:16 pm by bayu Reply

Tks mas, atas ilmunya.
Apa boleh dikopi dan disebarkan pengetahuaan dan artikelnya.

Tks
June 16, 2010 7:50 pm by rani Reply

mas,,, mas ada contoh penerapan ajax di codeigniter kaya suggest di google ??? mohon referensi ya mas,,, terima kasih :)
November 8, 2010 12:35 am by stwidyanas Reply

mantap bgt dah tutornya, , ,
February 6, 2011 1:37 pm by Andyra Reply

wuih keren.. kk
May 25, 2011 3:01 pm by abu ahmad Reply

mas kalo membuat query macam di sql taapi database nya xml bisa g mas
August 11, 2011 6:06 am by Puzha Reply

Kang,, hasil driee scriptnyaa liatin dong,, biyaar tau kegunaan nyaa,,,
October 27, 2011 5:10 am by harga blackberry onyx Reply

Ilmu baru nieh, siipp mass, salam
January 30, 2012 9:41 pm by ai Reply

mantapp gan
makasih ya tutorialnya :D