AJAX
Seperti perkembangan teknologi saat ini saya akan membahas
lebih detail lagi mengenai AJAX, apakah itu AJAX? Yuk kita bahas bersama. Beberapa
web komersial sudah menggunakan teknologi AJAX untuk menaikkan pelayanan
terhadap user. Apa itu AJAX? AJAX adalah aplikasi web yang lebih baik. Aplikasi
web menambah keuntungan disbanding aplikasi desktop yang dapat menjangkau
pengguna yang luas dan mudah di install. Seperti yang kita ketahui aplikasi
internet tidak selalu susah dan user friendly, dengan AJAX aplikasi internet
semakin cepat dan mudah. Berikut ini beberapa contoh web yang menggunakan AJAX
yaitu yang seperti kita tahu adalah gmail, google maps, dan lain lain. Sebelum membahas
lebih detail mari kita cari tahu sejarah nya terlebih dahulu. AJAX di
perkenalkan oleh jesse james garret dari Adaptive Path pada tahun 2005. Ia mendeskripsikan
bagaimana mengembangkan web yang berbeda dengan metode tradisional. Aplikasi web
yang bekerja dengan AJAX secara asynchronously,
yang berarti mengirim dan menerima data dari user ke server tanpa perlu
me-load kembali seluruh halaman, melainkan hanya melakukan penggantian pada
bagian web yang hendak di ubah. Penggunaan AJAX ini ini mulai popular ketika di
gunakan google pada tahun 2005. AJAX bukan saja sebagai bahasa pemrograman baru
melainkan teknik baru penggunaan standar yang telah ada. AJAX berbasiskan pada
JavaScript dan request HTTP. AJAX berbasiskan standar terbuka seperti:
JavaScript, XML, HTML/XHTML, & CSS. Dengan menggunakan JavaScript AJAX
dapat mengirim dan menerima data antara web server dan web browser, dengan
teknik yang dimiliki AJAX ini akan bergantian bertukar data dan mereload ulang
seluruh halaman.dengan demikian untuk mempelajari AJAX harus memahami pula
konsep standar di atas. AJAX menggunakan asyncronouse
data transfer (pada HTTP request) antara browser dan web server, yang
memperbolehkan halaman web me-request bit yang kecil atau seluruh informasi
dari server. Untuk mengetahui bagaimana konsep dari Ajax anda perlu mengetahui
bagaimana sebuah web browser memproses sebuah request dan menerima sebuah
response dari web server. Standar yang digunakan web browser pada saat ini
adalah HTTP(HyperText Transfer Protocol). HTTP digunakan oleh web browser untuk
mengirim request dari website ke web server dan kemudian menerima response dari
web server. HTTP request berkerja seperti email, memberitahukan kapan request
dikirim, berisi header yang memberitahu apa yang harus dilakukan server dan
bagaimana menghandle request tersebut.
Sekali sebuah request diterima, web server kemudian
menentukan response apa yang akan diberikan.
Terdapat banyak request method yang ada, tetapi yang paling
sering digunakan adalah GET dan POST. Sekarang anda telah memiliki
bayangan bagaimana request dikirim ke web server dan kemudian web server
mengirim response dari request tersebut ke web browser, akan mudah bagi anda
untuk memahami bagaimana XMLHttpRequest berkerja. Keduanya sangat mirip, tetapi
XMLHttpRequest dioperasikan di belakang layar dan tanpa memerlukan refresh
halaman.
Ajax bisa dibilang adalah
sebuah konsep untuk menerangkan interaksi antara client-side XMLHttpRequest
Object dengan script server-side. Untuk membuat request ke web server menggunakan
Ajax, anda harus membentuk Object XMLHttpRequest terlebih dahulu. Untuk
membentuk object XMLHttpRequest berbeda pada setiap browser. Pada microsoft
internet explorer object dibentuk sebagai ActiveX control, sedang pada browser
seperti Firefox dan safari menggunakan basic javascript object. Setelah
XMLHttpRequest terbentuk, terdapat beberapa method atau fungsi yang bisa
digunakan. Method-method tersebut dijelaskan di bawah ini.
- abort()
Method abort() digunakan untuk menghentikan request yang
sedang berjalan. Method ini sangat berguna jika anda memperhitungkan lama
waktu koneksi, misalnya jika waktu koneksi melebihi rentang waktu tertentu
anda bisa menggunakan method abort() untuk menghentikan
request secara prematur.
- getAllResponseHeader()
Anda dapat menggunakan method ini untuk memperoleh semua informasi dari
semua header HTTP yang sedang diberikan oleh server
- getResponseHeader("headername")
Method ini dapat digunakan untuk memperoleh isi dari begian sebuah header,
sebagai contoh untuk memperoleh ukuran dari document yang sedang
direquest, anda dapat menggunakan getResponseHeader("Content-Length").
- open("method","URL","async","username","pswd")
Method ini merupakan method yang paling penting dan berguna pada XMLHttpRequest.
Method ini digunakan untuk membuka koneksi dengan document yang ada di
server. Dengan method ini anda memberitahukan kepada web server method apa
yang digunakan untuk membuka file ("GET" atau "POST").
Sebagai catatan tidak semua argument pada method ini harus diisi,
tergantung dengan situasi dan kebutuhan.
- setRequestHeader("label","value")
Method ini dapat digunakan
untuk menentukan header pada saat melakukan request. Sebagai catatan,
method ini hanya bisa dipanggil setelah methodopen digunakan
dan sebelum method send dipanggil.
- send("content")
method ini digunakan untuk
mengirim request ke server. Jika request dikirim secara asynchronous, maka
response akan datang secepatnya. Jika tidak, response akan datang setelah
response diterima oleh web browser. Parameter pada method ini tidak harus
diisi, parameter ini sangat berguna untuk memproses HTML form dan
memberikan anda untuk mengirim nilai dari element form ke web server.
XMLHttpRequest
memiliki properti yang dapat digunakan dan dimanipulasi, seperti dijelaskan di
bawah.
- onreadystatechange
Properti ini adalah sebuah
event handler yang memberikan anda untuk men-trigger sebuah blok kode atau function,
ketika state (sampai dimana proses request berlangsung pada waktu
tertentu) berubah. Contoh, misalnya anda ingin menampilkan pesan (alert)
pada saat state telah berubah menjadicomplete state.
- readyState
berisi informasi state dari
object XMLHttpRequest pada saat properti ini digunakan (0: uninitialized,
1: loading,
2: loaded, 3: interactive, 4: complete). Properti ini bisa digunakan untuk
menangani kesalahan, memanggil blok kode atau function untuk setiapreadyState. Misalnya,
untuk menampilkan text "loading" pada saat readyState sama
dengan 1 (fase loading) dan memanggil sebuah function pada saat
readyState=4 (complete).
- responseText
Properti ini akan dihasilkan
pada saat request telah berhasil/complete. Misalnya anda melakukan request
terhadap sebuah document di server, respon dari server akan disimpan pada
properti ini. Biasanya properti ini digunakan untuk mengganti properti innerHTML dari
sebuah element HTML.
- responseXML
Properti ini sama dengan responseText, tetapi
respon yang dihasilkan dalam format XML.
- status
Properti ini memberitahukan
response code yang dihasilkan dari direquest yang dilakukan. Misalkan,
jika file yang direquest ke server tidak ditemukan maka status akan
berisi 404.
- statusText
Properti ini merupakan textual
dari properti status, misal status sama dengan 404 maka statusText akan
sama dengan Not Found.
Setelah selesai membuat object
XMLHttpRequest anda dapat mengirim request ke server. Saat mengirim request ke
server anda harus menentukan request method yang digunakan, apakah akan
menggunakan GET atau POST. Jika anda ingin menampilkan informasi dari server
maka anda akan menggunakan method GET, sedangkan jika anda mengirim informasi
ke server maka gunakan method POST
sekian dari informasi mengenai AJAX kali ini semoga bermanfaat.