Belajar Ajax – Contoh sederhana AJAX

Belajar Ajax – Contoh sederhana 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

1
2
3
4
5
6
7
8
9
10
11
12

<!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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

//////////////////////////////////////////////////////////////
// $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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?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

Artikel yang berhubungan

About ibnoe
Hi, my name is Ibnu Daqiqil Id and I’m an indonesian Web Developer. I love creating simple, unique and easy-to-use web application and what most counts for me is to work with people who are passionate about what they do.

6 Responses to “Belajar Ajax – Contoh sederhana AJAX”

  1. Sofian says:
    May 11, 2010 at 1:36 pm

    Bagus mas tutornya.. keep posting..
    Ngomong-ngomong mas pakai DW ya?

  2. bayu says:
    June 1, 2010 at 1:16 pm

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

    Tks

  3. rani says:
    June 16, 2010 at 7:50 pm

    mas,,, mas ada contoh penerapan ajax di codeigniter kaya suggest di google ??? mohon referensi ya mas,,, terima kasih :)


Leave a Reply

Posted on April 4th, 2010

Archived in Javascript

Written by ibnoe

Leave a comment

Tags

, ,

Postingan Terbaru

Copyright © 2010 Tutorial PHP Jquery Codeigniter Ajax javascript