Sebelum
membahas lebih jauh tentang AJAX. Apa sih sebenarnya AJAX? AJAX bukanlah barang
baru dan bukan teknologi baru. AJAX merupakan paduan dari beberapa teknologi
yang sudah dikenal sebalumnya yaitu HTML, DOM, XML, Javascript dan teknologi
pendukung lainnya. AJAX adalah akronim dari Asynchronous JavaScript and XML, komponen-komponen AJAX
meliputi:
· HTML (HyperText Markup Language) digunakan dalam membuat
halaman web dan dokumen-dokumen lain yang dapat ditampilkan dalam browser.
HTML merupakan standar internasional dengan spesifikasi yang ditetapkan oleh World
Wide Web Consortium (W3C). Versi terakhir saat tulisan ini dibuat adalah
HTML 4.01.
· XHTML (Extensible HyperText Markup Language), adalah
bahasa markup sebagaimana HTML, tetapi dengan gaya bahasa lebih baik.
Versi terakhir saat tulisan ini dibuat adalah XHTML 2.0.
· CSS (Cascading Style Sheets ) adalah sebuah mekanisme
sederhana untuk memberikan style (seperti font, warna, jarak spasi, dll)
kepada dokumen web yang ditulis dalam HTML atau XML (termasuk beberapa variasi
bahasa XML seperti XHTML dan SVG).
· JavaScript adalah bahasa scripting kecil,
ringan, berorientasi-objek dan lintas platform. JavaScript tidak dapat berjalan
dengan baik sebagai bahasa mandiri, melainkan dirancang untuk ditanamkan pada
produk dan aplikasi lain seperti peramban web.
· DOM (Document Object Model) adalah sebuah API (Application
Program Interface) untuk dokumen HTML dan XML. DOM menyediakan representasi
dokumen secara terstruktur, dimungkinkan untuk merubah isi dan presentasi
visual. Pada dasarnya, DOM menghubungkan halaman web dengan script atau bahasa
pemprograman.
· XML (Extensible Markup Language) adalah bahasa markup
untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup
keperluan khusus. Keperluan utama XML adalah untuk pertukaran data antar
sistem yang beraneka ragam.
· XSLT (Extensible Stylesheet Language Transformations )
adalah sebuah bahasa berbasis-XML untuk transformasi dokumen XML. Walaupun
proses merujuk pada transformasi, dokumen asli tidak berubah melainkan dokumen
XML baru dibuat dengan basis isi dokumen yang sudah ada. XSLT biasanya
digunakan untuk merubah skema XML ke halaman web atau dokumen PDF.
· Objek XMLHttpRequest untuk melakukan pertukaran data
secara asinkron dengan peladen (server) web. Beberapa kerangka-kerja Ahax dan
dalam beberapa situasi, objek IFrame digunakan selain objek XMLHttpRequest
untuk melakukan pertukaran data dengan peladen web.
· JSON (JavaScript Object Notation) yaitu format pertukaran
data komputer yang ringan dan mudah. Keuntungan JSON dibandingkan dengan XML
adalah pada proses penterjemahan data menggunakan Javascript. Javascript dapat
menterjemahkan JSON menggunakan built-in procedure eval().
Dalam
penerapannya, tidak semua teknologi di atas digunakan. Terdapat beberapa teknik
komunikasi yang digunakan untuk implementasi AJAX. Teknik yang umum digunakan
adalah dengan menggunakan:
·
Hidden Frame
Metode ini memanfaatkan frame yang tersembunyi. Biasanya salah satu frame diset dengan ukuran tinggi/lebar 0 sehingga tidak terlihat di halaman. Frame tersembunyi inilah yang sebenarnya melakukan request ke dan menerima respon dari server, sehingga frame yang tampil kelihatan tidak melakukan postback ke server. Javascript digunakan untuk mengambil data dan mengisi data yang ada di frame tersembunyi ini.
Metode ini memanfaatkan frame yang tersembunyi. Biasanya salah satu frame diset dengan ukuran tinggi/lebar 0 sehingga tidak terlihat di halaman. Frame tersembunyi inilah yang sebenarnya melakukan request ke dan menerima respon dari server, sehingga frame yang tampil kelihatan tidak melakukan postback ke server. Javascript digunakan untuk mengambil data dan mengisi data yang ada di frame tersembunyi ini.
·
Hidden IFrame
Metode ini hampir sama dengan hidden frame, perbedaannya hanya pada elemen yang digunakan yaitu IFrame, bukan Frame.
Metode ini hampir sama dengan hidden frame, perbedaannya hanya pada elemen yang digunakan yaitu IFrame, bukan Frame.
·
Objek XMLHttpRequest
Metode yang satu ini memanfaatkan ActiveX Objek (IE) atau objek javascript XMLHttpRequest (Mozilla/Firefox, Safari, Opera). Objek ini yang akan melakukan postback ke server dan menerima respon balik berupa data (bukan halaman). Data yang didapat dari server kemudian diolah di klien untuk ditampilkan ke halaman.
Metode yang satu ini memanfaatkan ActiveX Objek (IE) atau objek javascript XMLHttpRequest (Mozilla/Firefox, Safari, Opera). Objek ini yang akan melakukan postback ke server dan menerima respon balik berupa data (bukan halaman). Data yang didapat dari server kemudian diolah di klien untuk ditampilkan ke halaman.
Teknik
pemprosesan halaman secara umum ada dua:
·
Pemprosesan halam dengan pembuatan/manipulasi objek dokumen
menggunakan javascript.
Klien mengirimkan data dalam format XML/JSON kepada server dan mendapatkan data dari server berupa XML/JSON. Data XML/JSON kemudian diolah untuk memanipulasi objek dokumen menggunakan DOM dan javascript.
Klien mengirimkan data dalam format XML/JSON kepada server dan mendapatkan data dari server berupa XML/JSON. Data XML/JSON kemudian diolah untuk memanipulasi objek dokumen menggunakan DOM dan javascript.
·
Parsial rendering.
Pada teknik ini UI dan behaviour tidak diproses di klien melainkan diproses di server. Klien menerima UI dan behaviour kemudian melakukan rendering pada bagian halaman tertentu.
Pada teknik ini UI dan behaviour tidak diproses di klien melainkan diproses di server. Klien menerima UI dan behaviour kemudian melakukan rendering pada bagian halaman tertentu.
Perpaduan
teknologi-teknologi tersebut dapat meningkatkan kinerja aplikasi web dan lebih
responsif terhadap aksi pengguna. Dengan AJAX pertukaran data antara klien dan
server lebih ringan karena hanya data yang dipertukarkan (bukan halaman)
sehingga aplikasi web dapat berjalan lebih cepat.
Penggunaan Dasar
Dua
keistimewaan Ajax adalah dapat:
·
Membuat permintaan kepada server tanpa memuat kembali
(reload) halaman.
·
Mengurai (parse) dan bekerja dengan dokumen XML dan
atau JSON.
1. Membuat
Permintaan HTTP (HTTP Request)
Untuk
membuat permintaan HTTP kepada server menggunakan JavaScript, diperlukan
sebuah class yang menyediakan fungsi-fungsi ini. Pada Internet
Explorer tersedia objek ActiveX yang disebut XMLHTTP. Pada Mozilla, Safari,
Opera dan beberapa peramban lain, menerapkan sebuah class Javascript
objek XMLHttpRequest yang mendukung method dan properties objek
Microsoft ActiveX.
Untuk
membuat instance (objek) class lintas-browser (cross-browser),
dapat dilakukan dengan:
if (window.XMLHttpRequest) { // Mozilla,
Safari, ...
http_request = new XMLHttpRequest ();
} else if (window.ActiveXObject)
{ // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
Catatan: kode di atas hanya sebagai ilustrasi saja. Kode tersebut
merupakan versi paling sederhana untuk membuat instance XMLHttp. Untuk
penggunaan secara nyata dapat lihat di bagian 3 artikel ini.
Beberapa versi browser Mozilla tidak bekerja dengan baik jika respon
dari server tidak mengandung header mime-type XML. Untuk memenuhi
kebutuhan ini, panggil method untuk mengganti/menambahkan header yang
dikirim oleh server.
http_request = new XMLHttpRequest();
http_request overrideMimeType('text/xml');
Setelah itu,
buat fungsi untuk mengolah setelah data diterima dari server berdasarkan
permintaan yang dibuat sebelumnya. Tahap ini, daftarkan fungsi JavaScript yang
menangani respon dari server. Setting properties onreadystatechange objek dengan nama fungsi Javascript yang disiapkan untuk mengerjakan
proses respon.
http_request.onreadystatechange = namaFungsi;
Perlu dicatat
bahwa tidak ada tanda kurung setelah nama fungsi dan tanpa parameter yang
dilewatkan. Selain memberikan nama fungsi, dapat juga digunakan teknik
JavaScript dalam pendefinisian fungsi (tanpa nama) saat program berjalan (run-time)
-- yang disebut fungsi anonymous -- dan mendefinisikan tindakan untuk
melakukan proses, seperti berikut:
http_request.onreadystatechange = function() {
// do the thing
};
Selanjutnya, setelah deklarasi dan
segera setelah menerima respon, kemudian buat permintaan. Panggil
method open() dan send() dari klas permintaan HTTP seperti kode berikut:
method open() dan send() dari klas permintaan HTTP seperti kode berikut:
http_request.open('GET', 'http://www.example.org/somefile', true);
http_request.send(null);
· Parameter panggil pertama dari open()
adalah
method permintaan HTTP GET, POST, HEAD atau method lain yang didukung oleh server.
Gunakan huruf kapital sebagaimana standar HTTP. Untuk informasi lebih lanjut
mengenai method permintaan HTTP dapat dilihat pada spesifikasi W3C.
· Parameter kedua adalah URL dari halaman yang diminta. Demi
keamanan, panggilan tidak dapat dilakukan pada halaman domain pihak ketiga.
Pastikan untuk menggunakan nama domain yang pasti pada semua halaman jika tidak
ingin mendapat error 'permision denied' ketika melakukan panggilan open().
· Parameter ketiga diset ketika permintaan adalah asinkron.
Jika diset TRUE, eksekusi fungsi JavaScript akan berlanjut walau tanggapan dari
peladen belum sampai. Ini adalah A dalam AJAX.
Parameter untuk
method send() dapat berupa sembarang data untuk dikirim ke server saat
mengirimkan permintaan POST. Data harus dalam format query string,
seperti:
name=value&anothername=othervalue&so=on
Catatan bahwa
jika ingin mengirim (POST) data, ganti tipe MIME permintaan menggunakan bari
berikut:
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Bila tidak, server akan
mengabaikan data yang dikirim.
2. Penanganan
Respon Server
Ingat bahwa ketika
permintaan dikirim, fungsi JavaScript harus telah disediakan untuk menangani
respon.
http_request.onreadystatechange = namaFungsi;
Apa yang
seharusnya dikerjakan oleh fungsi ini. Pertama, fungsi untuk memeriksa status
tanggapan. Jika status memiliki nilai 4, berarti bahwa seluruh tanggapan
peladen telah diterima dan siap dilanjutkan proses berikutnya.
if (http_request.readyState == 4) {
// everything is good, the response is received
} else {
// still not ready
}
Berikut adalah daftar nilai status
readyState
·
0
(tidak diinisialisasi)
·
1
(dalam proses memuat)
·
2
(telah dimuat)
·
3
(interaktif)
·
4
(lengkap)
Berikutnya adalah pemeriksaan kode status dari respon HTTP server.
Daftar kode status respon HTTP dapat dilihat di situs W3C. Pada contoh kali ini hanya
digunakan status 200 yaitu respon OK.
if
(httpRequest.status == 200) {
//
perfect!
} else {
//
there was a problem with the request,
// for
example the response may be a 404 (Not Found)
// or
500 (Internal Server Error) response codes
}
Setelah
semua status permintaan diperiksa dan kode status HTTP telah ada respon, data
respon dari server dapat diolah. Terdapat dua pilihan untuk mengakses data.
·
httpRequest.responseText -- akan mengembalikan respon berupa
teks string
· httpRequest.responseXML -- akan mengembalikan respon berupa
objek XMLDocument object yang dapat diakses dengan fungsi DOM JavaScript
3. Contoh
Sederhana
Tulis bagian program menjadi satu
permintaan HTTP sederhana. JavaScript akan meminta sebuah dokumen HTML yaitu
test.html yang hanya mengandung tulisan "I'm a test" dan kemudian
memanggil alert() dengan isi dari berkas test.html
<script type="text/javascript" language="javascript">
var http_request = false;
function makeRequest(url) {
http_request = false ;
if (window.XMLHttpRequest) { // Mozilla, Safari ,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// See note below about this line
}
} else if (window.ActiveXObject) { // IE
var aVersions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "Microsoft.XMLHTTP" ];
for (var i = 0; i < aVersions.length; i++) {
try { http_request = new ActiveXObject(aVersions[i]);
break;
}
catch (e)
{
// Do nothing
}
}
}
if (!http_request) {
alert ('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
</script>
<span style="cursor: pointer; text-decoration: underline" onclick ="makeRequest('test.html')">Make a request
</span >
Pada contoh di atas:
·
Ketika pengguna menekan klik pada link
"e;Make a request"e; maka fungsi makeRequent dipanggil dengan
parameter nama file HTML test.html dalam direktori yang sama.
·
Permintaan dibuat dan kemudian event onreadystatechange
melakukan eksekusi alertContents()
·
alertContents() memeriksa jika tanggapan telah
diterima dalam keadaan baik dan kemudian tampilkan isi berkas test.html
menggunakan fungsi alert()
Contoh di atas dapat
diuji dengan klik di sini
dan juga berkas test dapat dilihat di sini. Catatan: baris http_request.overrideMimeType('text/xml'); di atas mengakibatkan error Console pada Firefox 1.5b seperti
tercantum dalam dokumen pada https://bugzilla.mozilla.org/show_bug.cgi?id=311724
jika halaman yang dipanggil dengan XMLHttpRequestbukan XML yang valid (seperti plaintext).
4. Bekerja
dengan Respon XML
Pada contoh
sebelumnya, setelah tanggapan dari permintaan HTTP diterima, digunakan sifat
responseText dari objek permintaan yang mengandung isi file test.html.
Sekarang, coba gunakan sifat responseXML Buat dokumen XML yang valid dengan
nama test.xml seperti contoh di bawah:
<?xml version ="1.0" ?>
<root>
I'm a test.
</root>
Ganti baris permintaan pada
script untuk melakukan request dengan:
...
onclick ="makeRequest('test.xml')">
...
Kemudian pada alertContents() ganti
pada baris alert(http_request.responseText);
diganti dengan:
var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);
Perintah
tersebut untuk mengambil objek XMLDocument yang diberikan oleh responseXML
dengan menggunakan method DOM untuk mengakses data dalam dokumen XML.
5. Petukaran
data menggunakan JSON
Telah di
sebutkan di atas bahwa JSON merupakan salah satu format pertukaran data yang
dapat secara langsung diterjemahkan ke dalam objek Javascript. Pada contoh
berikut akan dijelaskan bagaimana implementasi JSON pada AJAX dibandingkan
dengan XML.
Pertama, buat data JSON dalam
sebuah file dengan nama test.txt yang isinya:
{ "FirstName" : "Ahmad", "LastName" : "Masykur" }
Ganti baris perintah pada script
untuk melakukan request dengan:
...
onclick ="makeRequest('test.txt')">
...
Kemudian pada alertContents() ganti
pada baris alert(http_request.responseText);
diganti dengan:
eval("jsonObj="+http_request.responseText+";");
alert(jsonObj.FirstName + ' ' + jsonObj.LastName);
Dari contoh di atas terlihat bahwa JSON lebih sederhana dan ringan
dibandingkan dengan XML. Jumlah data yang terkandung lebih banyak dan total byte
yang dikirim lebih kecil. Juga pada penulisan di javascript lebih
sederhana karena notasi data dapat langsung diterjemahkan menjadi objek
Javascript dengan fungsi eval().
Pada implementasi di projek nyata, data (baik XML maupun JSON)
biasanya diambil dari application server atau webservice.
Demikian tulisan singkat dan contoh sederhana mengenai AJAX. Semoga dapat
membuka wawasan mengenai AJAX untuk dapat memulai mengembangkan aplikasi web
yang AJAX-enabled.
0 komentar:
Posting Komentar