Modul 5 AJAX TUJUAN PRAKTIKUM : 1. Praktikan mengetahui dan mengerti konsep Ajax dalam Java J2EE. 2. Praktikan dapat memahami manfaat dan batasan Ajax. 3. Praktikan mampu mengimplementasikan Ajax dalam Java J2EE. PERLENGKAPAN PRAKTIKUM 1. Modul Praktikum 2. Eclipse Juno 3. Tomcat Server 4. Browser (Chrome atau Mozilla Firefox) LANDASAN TEORI Latar Belakang Munculnya Ajax Pada website tradisional biasa, jika kita mengklik suatu tombol/link tertentu maka browser akan melakukan refresh dimana dokumen HTML akan dibaca dari awal dan layar browser akan menjadi blank sesaat karena pada saat itu browser sedang merequest data dari web server sehingga aplikasi website menjadi kurang interaktif dan responsif. Oleh karena itu, solusi dari para programmer web adalah mengimplementasikan AJAX pada website mereka. Definisi Ajax AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan sebuah teknik baru dalam dunia web tetapi bukan sebuah bahasa pemrograman dalam menciptakan halaman web yang cepat dan dinamis. Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa. Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain. AJAX dapat diintegrasikan dengan serverside programming seperti PHP, ASP, JSP dan lain-lain. Kelebihan AJAX Kelebihan dari AJAX yaitu : Dari sisi user experience, aplikasi website menjadi lebih interaktif dan responsif. Dari sisi bandwidth, lebih cepat dalam memproses request ke server.
Kombinasi AJAX AJAX diciptakan berdasarkan standar internet dan menggunakan kombinasi dari : 1. XMLHttpRequest object untuk pertukaran data secara asynchronous dengan sebuah server. 2. JavaScript/DOM untuk menampilkan dan berinteraksi dengan informasi. 3. CSS untuk memberikan style pada halaman. 4. XML sering digunakan sebagai format untuk mentransfer data. Cara Kerja AJAX Cara kerja Ajax yaitu : Implementasi Ajax pada J2EE Sekarang saatnya untuk melakukan implementasi teknologi Ajax pada teknologi J2EE. Berikut ini merupakan beberapa proses dasar yang dilakukan oleh javascript dan HTML untuk bisa melakukan implementasi tersebut: 1. Javascript Mendefinisikan obyek untuk mengirim HTTP request. Mengirim HTTP request Mendapatkan obyek untuk mengirim HTTP request (sesuai dengan browser yang dipakai) Melakukan request, bisa berupa GET maupun POST. Mengirimkan data ke server Membuat fungsi untuk menangani response (onreadystatechange)
Menangani response dari server Tunggu sampai readystate=4 dan HTTP status=200. Penjelasan tentang readystate : 0, berarti request belum dibuat. 1, berarti request sedang dalam proses (biasanya digunakan gambar loading). 2, berari request sudah dikirim tapi hasil belum diterima 3, berarti request sedang diproses dikomputer client 4, berarti request sukses dikirim dan client sukses menerimanya. Selain itu juga perlu diperhatikan nilai dari HTTP status == 200, yang berarti bahwa response sudah siap dikirim dari server tanpa error. Ekstrak response server dengan menggunakan responsetext atau responsexml. Lakukan manipulasi pada hasil ekstraksi tersebut. 2. HTML Memuat javascript. Buat obyek yang dapat disisipi javascript sebagai pemicu untuk melakukan request, misalnya button, textfield, atau radio button dimana dapat disisipi bermacam-macam event javascript, seperti: onload, onkeyup, onmouseup, onkeydown, onclick, dll. Berikan id untuk obyek yang dipakai sebagai input (data untuk dikirim ke server) dan obyek yang digunakan untuk meletakkan output (menerima response dari server).
CONTOH : Buatlah tampilan seperti di bawah ini yaitu : 1. Sesuaikan seperti direktori yang ada di bawah ini
2. Buatlah package model-customer.java- isi seperti kodingan di bawah ini! 3. Buatlah package controllersearch.java-isi seperti kodingan di samping!
4. Setelah itu, lanjutkan pada halaman index.jsp dan sesuaikan dengan kodingan di bawah ini!