Home
Downloads
RSS
Ajax, akronim dari Asynchronous JavaScript and XML, Asynchronous yang berarti bahwa kita bisa melakukan request ke dalam suatu server menggunakan Hypertext Transfer Protocol (HTTP) dan melanjutkan memproses data yang lain sambil menunggu respon dari server. Maksudnya, sebagai contoh, kita bisa memanggil server-side script untuk menerima data dari database XML, mengirim data ke server-side script untuk menyimpan data dalam database, atau hanya sekedar meload data file XML untuk ditampilkan di web site kita tanpa me-refresh kembali halaman web.
Saya asumsikan Anda telah mengerti dasar-dasar dari JavaScript dan XML. Walaupun Anda bisa menggunakan tipe file apapun dari file teks untuk digunakan dengan Ajax, Saya hanya akan fokus pada XML. Saya akan menjelaskan bagaimana menggunakan Ajax dalam dunia nyata. Anda akan mulai belajar bagaimana membuat object, request dan mengatur respon. Saya telah membuat contoh project untuk artikel ini (bisa didownload di sini). Contoh tersebut merupakan request sederhana yang akan memanggil file XML berisi halaman web yang akan ditampilkan dalam halaman HTML.
Properti dan Method
Tabel 1 dan 2 menampilkan kilasan dari properti dan method yang didukung oleh Windows Internet Explorer 5, Mozilla, Netscape 7, Safari 1.2, and Opera.
Tabel 1 Properti
Properti | Keterangan |
Onreadystatechange | Event handler yang akan diproses ketika terjadi perubahan dalam kondisi request dari suatu object. |
readyState | Mengembalikan nilai yang menjelaskan tentang kondisi dari suatu object. |
responseText | Respon String dari server. |
responseXML | Respon object dokumen DOM-compatible dari server. |
Status | Respon status dari server. |
statusText | Pesan status dikembalikan sebagai string. |
Tabel 2 Method
Method | Keterangan |
Abort() | Membatalkan HTTP-request yang sedang berlangsung. |
getAllResponseHeaders() | Meminta nilai dari semua HTTP-header. |
getResponseHeader("headerLabel") | Menerima nilai dari suatu HTTP-header dari respon dalam body. |
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) | Inisialisasi MSXML2.XMLHTTP-request, mengatur method, URL, dan informasi otentifikasi untuk request. |
send(content) | Mengirim suatu HTTP-request ke dalam server dan kemudian menerima respon. |
setRequestHeader("label", "value") | Pengaturan nama dari sebuah HTTP-header. |
Dari mana memulai?
Pertama, yang kita butuhkan adalah membuat file XML yang kemudian akan digunakan untuk meminta dan menampilkan data ke dalam halaman web. File yang kita minta, haruslah terdapat pada server yang sama dengan project.
Next, buat file HTML yang akan melakukan permintaan(request). Request akan terjadi ketika halaman diload menggunakan method onload pada tag body. File tersebut akan memerlukan tag div dengan suatu ID sehingga kita bisa mengatur target tersebut ketika kita ingin menampilkan isinya. Bila telah selesai, body dari halaman kita akan terlihat seperti ini:
<body onload="makeRequest('xml/content.xml');">
<div id="copy"></div>
</body>
Membuat Object Request
Untuk membuat object request, kita harus mengetahui apakah browser web menggunakan XMLHttpRequest atau ActiveXObject. Perbedaan utama dari kedua object tersebut adalah tipe browser yang digunakan. Windows IE 5 menggunakan ActiveX object; Mozilla, Netscape 7, Opera, dan Safari 1.2 XMLHttpRequest object. Perbedaan lain adalah cara bagaimana dan dimana kita membuat object: Opera, Mozilla, Netscape, dan Safari mengijinkan kita dengan mudah memanggil konstruktor object, tapi Windows IE membutuhkan nama dari object yang akan digunakan dalam konstruktor ActiveX. Berikut adalah contoh bagaimana menulis kode untuk menentukan object mana yang akan digunakan dan bagaimana membuatnya:
if(window.XMLHttpRequest)
{
request = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
request = new ActiveXObject("MSXML2.XMLHTTP");
}
Membuat Request
Setelah object request kita telah terbentuk, kita siap melakukan request terhadap server. Buat referensi untuk suatu event handler agar bisa mengawasi onreadystatechange. Method event handler akan bereaksi bilamana terjadi perubahan. Kita akan menulis method ini setelah kita membuat request. Buka koneksi untuk GET atau POST suatu URL, dalam hal ini content.xml, dan atur suatu Boolean yang mendefinisikan bilamana kita ingin membuat request tersebut bisa asynchronous.
Saatnya mengirim request. Dalam contoh, saya menggunakan null dengan GET; untuk menggunakan POST, kita perlu menggunakan string query menggunakan method ini:
request.onreadystatechange = onResponse;
request.open("GET" . url, true);
request.send(null);
Loading dan Pesan Error Handling
Event handler yang kita buat untuk method onreadystatechange adalah tempat dimana terdapat loading dan error handling. Saatnya kita mulai berpikir tentang user dan menyediakan feedback tentang status dari halaman yang sedang user gunakan. Dalam contoh ini, saya menyediakan feedback untuk semua status loading dan beberapa feedback dasar untuk status kode error handling yang akan sering terjadi. Untuk mengetahui status dari object request saat ini, properti readyState terdiri dari nilai-nilai seperti pada tabel di bawah ini.
Nilai | Keterangan |
0 | Uninitialized. Object tidak diinisialisasi dengan data. |
1 | Loading. Object sedang meload data. |
2 | Loaded. Object telah selesai meload datanya. |
3 | Interactive. User bisa berinteraksi dengan object walaupun belum sepenuhnya diload. |
4 | Complete. Object telah berhasil diinisialisasi. |
W3C memiliki begitu banyak HTTP status code definitions. Saya memilih dua status kode:
- 200: Request telah berhasil.
- 404: Bilamana server tidak menemukan request yang sesuai.
Finally, kita akan mencoba mengecek status kode yang lain yang memungkinkan terjadinya error yang kemudian akan menampilkan pesan error. Berikut adalah contoh yang akan digunakan untuk menangani situasi tersebut. Perhatikan bahwa saya menargetkan tag div ID yang telah saya buat dalam body pada file HTML dan menampilkan pesan loading dan/atau error untuk ID menggunakan method innerHTML, yang dibuat dalam HTML pada tag mulai dan tag akhir dari object div:
if(obj.readyState == 0)
{
document.getElementById('copy').innerHTML = "Mengirim Request...";
}
if(obj.readyState == 1)
{
document.getElementById('copy').innerHTML = "Loading Respon...";
}
if(obj.readyState == 2)
{
document.getElementById('copy').innerHTML = "Respon diload...";
}
if(obj.readyState == 3)
{
document.getElementById('copy').innerHTML = "Respon Ready...";
}
if(obj.readyState == 4)
{
if(obj.status == 200)
{
return true;
}
else if(obj.status == 404)
{
// Menambahkan pesan atau me-redirect user ke halaman lain
document.getElementById('copy').innerHTML = "File not found";
}
else
{
document.getElementById('copy').innerHTML = "Terjadi masalah dengan permintaan file XML";;
}
}
Ketika status kode sama dengan 200, berarti request telah berhasil, respon siap ditampilkan.
Menampilkan respon
Pekerjaan yang sesungguhnya dimulai ketika kita siap menampilkan data dari object yang diminta. Disini sebenarnya kita telah mulai bekerja dengan data-data yang diminta. Untuk percobaan selama pengembangan program, properti responseText dan responseXML bisa digunakan untuk menampilkan data raw (raw data) dari respon. Untuk memulai mengakses node dalam respon XML, mulai dengan request object yang telah dibuat, targetkan pada properti responseXML untuk menerima XML dari respon. Targetkan pada documentElement, untuk menerima referensi dari dalam node root pada XML.
var response = request.responseXML.documentElement;
Now, setelah kita memperoleh referensi tersebut, kita bisa menggunakan getElementsByTagName() untuk menerima nodeAnak menggunakan nama nodenya. Baris berikut akan menentukan nodeAnak dengan header nodeNama:
response.getElementsByTagName('header')[0].firstChild.data;
Menggunakan data firstChild akan memperbolehkan kita supaya dapat mengakses teks dalam elemen tesebut:
response.getElementsByTagName('header')[0].firstChild.data;
Inilah contoh bagaimana menulis kode:
var response = request.responseXML.documentElement;
var header = response.getElementsByTagName('header')[0].firstChild.data;
document.getElementById('copy').innerHTML = header;
Sesuaikan dengan keperluan kita
Walaupun AJAX memungkinkan kita untuk membuat aplikasi baru yang bisa berinteraksi dengan halaman web, sebagai developer kita perlu ketahui bahwa berbicara Ajax bukanlah berbicara tentang teknologi; tapi tentang user dan bagaimana mereka bisa berinteraksi dengan produk kita. Tanpa user, project kita tidak akan berguna. Dengan prinsip tersebut, kita bisa menentukan teknologi apa yang akan digunakan dan kapan akan digunakan dengan tujuan yang berguna bagi siapa saja yang menggunakannya. Thanks.
| Continue Reading..
