Belajar Ajax dari Dasar
Ajax, kita tentu sudah sering mendengar kata-kata tersebut. Apalagi bagi Web Programmer, Ajax sudah menjadi teknologi yang wajib digunakan dalam membuat website moderen. Tapi sebenarnya apa sih Ajax itu? dan dari mana sebenarnya Ajax berasal? Mari kita bahas satu persatu.
Asal mula Ajax
Apa perbedaan antara aplikasi website dan aplikasi desktop pada komputer? Jawabannya hanya satu, aplikasi desktop lebih interaktif dan responsif dibanding aplikasi web. Jika anda pernah melihat aplikasi pada desktop, jika kita mengklik suatu tombol maka reaksi perubahannya akan langsung terlihat pada aplikasi tersebut yang membuat aplikasi desktop sangat interaktif. Tetapi pada website jika kita mengklik suatu tombol/link maka browser akan melakukan refresh pada browser dimana layar browser akan menjadi putih sesaat karena pada saat itu browser sedang meminta/merequest data dari server
Google Suggest merupakan aplikasi web pertama yang menggunakan Ajax. Istilah Ajax sendiri diperkenalkan oleh Jesse James Garrett
Hal itulah yang membuat aplikasi website menjadi kurang interaktif dan responsif dibanding aplikasi desktop. Ajax digunakan untuk memecahkan masalah tersebut, Ajax membuat aplikasi website menjadi lebih interaktif dan responsif seperti aplikasi desktop. Saat ini Ajax sudah menjadi teknologi yang wajib ada bagi website-website moderen (atau istilahnya Web 2.0).
Asal mula Ajax
Ajax merupakan kepanjangan dari Asynchronous JavaScript + XML dan bukan merupakan bahasa pemrograman baru tetapi suatu metode/teknik baru yang menggunakan teknologi yang telah ada. Ajax menggunakan teknologi lama yaitu Javascript yang melakukan request ke server untuk meminta data dalam bentuk Text/XML. Coba anda bandingkan diagram proses suatu website keserver pada website konvensional dan website yang menggunakan Ajax:
Sekarang bandingkan dengan website yang menggunakan Ajax:
Jika anda lihat pada website yang menggunakan Ajax, proses request ke server dilakukan oleh Javascript. Sehingga tampilan pada browser client tidak mengalami perubahan (refresh). Kemudian hasilnya akan dikirim oleh server dalam bentuk Text/XML dan ditampilkan dibrowser client
Bagian mana dari tampilan website yang akan berubah? Ajax menggunakan CSS untuk menentukan bagian mana dari website untuk diisi oleh tampilan baru yang baru saja diambil dari server.
Ajax menggunakan Javascript, jadi jika Javascript pada browser tidak aktif aplikasi Ajax anda tidak berfungsi. Karena itu gunakan aplikasi Ajax sebagai pendukung website anda, maksudnya disini anda membuat website biasa tanpa Ajax, setelah jadi baru anda menambahkan Ajax pada website anda. Jadi jika kemungkinan terburuk terjadi yaitu browser pengunjung tidak mengaktifkan Javascript, maka pengunjung masih dapat menikmati website anda.
Aplikasi Ajax
Pada aplikasi Javascript konvensional jika kita menginginkan data dari server kita menggunakan Form dan memanggilnya dengan method GET atau POST. Sehingga pengunjung perlu mengklik tombol dan kemudian halaman akan kerefresh untuk menampilkan hasil dari request tersebut.
Nah, kalau dengan Ajax, Javascript berkomunikasi langsung keserver dengan fungsi XMLHttpRequest. dengan XMLHttpRequest suatu halaman web dapat meminta data dari server dan menerima hasilnya tanpa perlu terjadi refresh pada halaman web tersebut. XMLHttpRequest telah disupport oleh IE 5 keatas, Safari 1.2 keatas, Mozilla Firefox keatas dan Opera 8 keatas.
Ajax merupakan penggabungan teknologi-teknologi berikut ini:
* Javascript
* HTML/XHTML
* XML
* CSS
Jadi jika anda belum menguasai salah satu dari teknologi tersebut saya sarankan anda pelajari terlebih dahulu sebelum meneruskan membaca artikel ini. Percaya sama saya, Ajax bukan sesuatu yang mudah untuk dipelajari, anda perlu memahami ke empat teknologi tersebut.
Contoh aplikasi Ajax
Langsung saja akan saya berikan contoh aplikasi Ajax, saya akan berikan contoh dan nanti akan saya jelaskan dibawahnya. Sekarang anda tuliskan kode dibawah ini dan simpan dengan nama coba.html
(html)
(head)
(title)Request file dengan Ajax(/title)
(script language = "javascript")
var XMLHttpRequestObject=false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
function getdata(url,divhasil) {
if (XMLHttpRequestObject) {
var obj = document.getElementById(divhasil);
XMLHttpRequestObject.open("GET", url);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
(/script)
(/head)
(body)
(h1)Mengambil data dari file HTML(/h1)
(form)
(input type="button" value="Tampilkan Data" onclick="getdata
('tampil.html','divhasil')")
(/form)
(div id="divhasil")
Isi dari tampil.html akan ditampilkan disini
(/div)
(/body)
(/html)
Sekarang buat file tampil.html dan isilah dengan kode berikut ini:
Text ini diambil dengan (strong)Ajax(/strong)
Sekarang lihat hasilnya.
Jika anda lihat hasilnya, dan anda klik tombol “Tampilkan Data” maka text dibawahnya akan berubah tanpa me refresh halaman, text tersebut diambil dari file tampil.html.
Kita memanggil fungsi getdata pada tombol tersebut serta mengirim url yang akan ditampilkan. Inilah kode yang digunakan untuk memanggil fungsi getdata:
(input type="button" value="Tampilkan Data" onclick="getdata('tampil.html','divhasil')")
Oke sekarang kita perlu membuat object XMLHttpRequest, objek ini wajib dipanggil jika kita ingin menggunakan Ajax. Untuk memanggilnya kita perlu menggunakan kode berikut ini:
var XMLHttpRequestObject=false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
Pertama-tama kita set XMLHttpRequestObject=false ini untuk berjaga-jaga jika sebelumnya XMLHttpRequestObject sudah aktif maka kita non aktifkan lagi. Kemudian baru kita aktifkan lagi dengan membuat objek yang baru XMLHttpRequestObject = new XMLHttpRequest();. Perlu diingat bahwa Internet Explorer menggunakan ActiveX untuk membuat XMLHttpRequest, karena itu kita membuat kode XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
Oke setelah kita membuat objek XMLHttpRequest sekarang kita membuat fungsi untuk mengambil file dan menampilkannya. Disini kita membuat fungsi function getdata (url,divhasil), yang didalamnya terdapat XMLHttpRequestObject.open ("GET", url); yang berarti kita mengambil url dengan method get. Perlu diingat jika kita menggunakan method get kita perlu mengirimkan sesuatu keserver, karena kita tidak mengirim apa-apa maka kita kirimkan saja nilai kosong dengan kode: XMLHttpRequestObject.send(null);
XMLHttpRequestObject.onreadystatechange = function() merupakan sebuah fungsi dimana nanti kita akan memperoleh status dari request yang kita lakukan. XMLHttpRequestObject.readyState memiliki 4 status yaitu:
* 0 Request kita belum dibuat
* 1 Request kita sedang dalam proses (biasanya kita buat loading dengan ini)
* 2 Request kita sudah dikirim tapi hasil belum diterima
* 3 Request kita sedang diproses dikomputer klien
* 4 Request sudah sukses dikirim dan kita sudah sukses menerimanya
Sementara XMLHttpRequestObject.status merupakan status http standard. Jadi jika statusnya 200 berarti file html nya ada dan siap ditampilkan. Sehingga kita perlu mengecek kedua status tersebut dengan kode if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200). Jika kedua statusnya oke, maka kita perlu menampilkannya dengan perintah obj.innerHTML = XMLHttpRequestObject.responseText. Dimana ini berarti kita menampilkannya di obj, sementara variabel obj telah kita isi dengan divhasil, ini kode ketika kita mengisi obj dengan divhasil, var obj = document.getElementById(divhasil).
Dan karena pada kode HTML kita memiliki tag div dengan id="divhasil", maka isi dari tampil.html akan ditampilkan didalam tag div tersebut. Bagaimana mudah bukan? atau malah bingung? Pelajari lagi dan pahami berulang- ulang, karena yang tadi baru dasar dari Ajax.
Jika kita ingin menambahkan loading ketika request sedang berlangsung maka kita perlu menambahkan if lagi untuk mengecek status dari XMLHttpRequestObject.readyState. Ubahlah kode coba.html menjadi:
(html)
(head)
(title)Request file dengan Ajax(/title)
(script language = "javascript")
var XMLHttpRequestObject=false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
function getdata(url,divhasil) {
if (XMLHttpRequestObject) {
var obj = document.getElementById(divhasil);
XMLHttpRequestObject.open("GET", url);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 1) {
obj.innerHTML = "Loading";
}
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
(/script)
(/head)
(body)
(h1)Mengambil data dari file HTML(/h1)
(form)
(input type="button" value="Tampilkan Data" onclick="getdata
('tampil.html','divhasil')")
(/form)
(div id="divhasil")
Isi dari tampil.html akan ditampilkan disini
(/div)
(/body)
(/html)
Sekarang lihat hasilnya.
Bagaimana mudah bukan? Jika anda ingin menambilnya dari file php maka anda cukup mengganti tampil.html menjadi file php saja, cukup mudah. Pelajarilah dasarnya sebelum membuat aplikasi yang lebih canggih. Walaupun hanya dasarnya saja anda bisa mengembangkannya hingga menjadi aplikasi yang luar biasa. Perlu diingat karena kita mengambil data dari klien maka kemungkinan website kita untuk diserang menjadi lebih mudah karena kode Javascript kita terlihat dibrowser. Untuk itu berhati-hatilah dengan kode Javascript anda jangan tampilkan informasi rahasia pada kode Javascript anda.
Pada aplikasi web biasa ibaratnya kita memiliki sebuah ruangan dengan pintu besar yang harus kita kunci dan lindungi agar orang tidak masuk melalui pintu tersebut. Pada aplikasi Ajax selain memiliki pintu, ruangan tersebut juga memiliki banyak jendela untuk dimasuki, karena itu kita harus waspada.
Tidak ada komentar:
Posting Komentar