Berikut ini kita akan membuat aplikasi AJAX yang sangat-sangat sederhana dengan menggunakan domino designer. Karena sederhananya di harapkan kita bisa mengerti konsep dasar dari pemrograman AJAX.
Yang akan kita buat kali ini adalah, kita akan membuat satu form dengan dua field, di mana satu field akan kita beri nama “username” dan field yang lain kita beri nama field “time”. field “time” akan terisi otomatis bila pengguna (user) mengetik-kan sesuatu di field “username”.
Selain itu kita juga akan membuat suatu page untuk memuat informasi jam. simple.
Oke, silahkan buat satu form dengan dua field “username” dan “time”.
Sudah?
Sisipkan fungsi “ajaxFunction()” di field “username” di event onKeyUp. Ketikan isi lengkap dari fungsi “ajaxFunction()” di jsheader. Lihat gambar di bawah ini.
Sekali lagi saya ingatkan untuk menyisipkan fungsi “ajaxFunction()” di field “username” di event onKeyUp. Ini tidak tampak pada gambar di atas.
Mari kita kupas maksud dari ajaxFunction() ini.
Di sini kita akan membuat suatu object xmlHTTPRequest yang akan melakukan request ke web server.
Dalam contoh ini request yang akan di lakukan adalah request untuk membuka page “time” yang mana outputnya berupa informasi jam pada saat ini dan nilai-nya akan di transfer ke field “time”.
Perhatikan pada baris xmlHttp.readyState == 4, maksudnya adalah ketika request itu telah selesai di lakukan (completed) maka response dari request tadi akan di salin kembali di field “time”.
Langkah selanjutnya buat page dan berikan name “time”. Isi dari page ini adalah suatu
Saat ini aplikasi sudah siap untuk di jalankan. Bila semuanya berjalan dengan mulus, maka akan tampil kurang lebih seperti gambar di bawah ini.
Ketikkan sesuatu di kolom username, kolom time akan terisi otomatis setiap key yang di input di kolom username.
Tidak ada komentar:
Posting Komentar