More Step In ajax

Setelah mendengar jejak pendapat di postingan sebelumnya, gw mutusin 2 langkah… pertama, gw selesein dulu mbaca ni buku ampe selesai, baru kemudian gw cari framework ajax nya. Masih dalam rangkaian nyelesaian buku yang pertama gw baca, gw baru mendengar beberapa istilah yang baru, sbg pengetahuan dasar dalam mengembangkan ajax :

1. XMLHTTPRequest

Apaan tuh XMLHTTPRequest?.

Ketika kita berhubungan dengan link dihalaman web atau sebuah form, sebenarnya kita mengirimkan HTTP Request ke server. Fungsi HTTP Request, seperti yang gw posting sebelumnya, yakni mengirim permintaan suatu page baru. Sehingga http request bersifat synchronously artinya setiap permintaan akan direspon dengan memberikan halaman baru (seluruhnya). Bedanya dengan XMLHTTPRequest, yang ni bersifat asynchronously, maksudnya pengiriman permintaan ke server tanpa disertai dengan permintaan page baru. Sehingga XMLHTTPRequest hanya akan meminta dokumen yang diperlukan saja, tanpa adanya permintaan memunculkan page baru. Inilah yang membedakan ajax dengan web biasa.

2. DOM (Document Object Model).

Klo yang ni gw masih ngeraba-raba mksudnya apa. Dari yang gw baca, DOM sendiri merupakan platform yang independent yang merepresentasikan sebuah object model yang digunakan untuk HTML & XML. DOM ni yang bakalan membantu untuk mengakses dan memanipulasi method & properties yang ada di object tsb (weleeeh yang ni gw njiplak banget neeeh dari bukunya). Jd menurut pengetahuan gw, DOM merupakan document yang menunjukan suatau model dari object yang dibuat, untuk ajax dia berhubungan dengan XMLHTTPRequest yang dikirimkan.

3. Sending the Server Request

Nah dalam XMLHTTPRequest, ternyata ada mekanisme sendiri dalam mengirimkan sebuah request ke server. Disini kita memanfaatkan method bawaan dari XMLHTTPRequest sendiri yakni “method open” & “method send” juga property nya yakni “onreadystatechange”. Apa fungsinya, open digunakan untuk membuka hubugan dengan server (berkomunikasi dengan server), & send untuk mengirimkan request setelah hubungan terjalin, sedangkan property “onreadystatechange” berfungsi sebagai progress report. Sehingga sebenarnya mekanisme sending server request seperti ini :

Buat object XMLHTTPRequest => Buka hubungan dengan server => progress report => send request

4. Callback Function

Nah yang satu ni, digunakan untuk merespon terhadap status yang didapat dari progress report sebelum sending request diatas. Yang dicek adalah status dari property “onreadystatechange”. Kalau complete, artinya pembukaan hubungan berhasil dan siap request. Kalau gagal maka request tidak dikirimkan, dan dari java script akan memunculkan alert. Sehingga dari sini, kita bisa mengontrol nih, kapan suatu request itu kita kirim ke server. Kenapa ?!!?! karena call back function inilah yang nantinya akan di bangkitkan, ketika user melakukan sesuatu (seperti memencet tombol, melakukan link dsb).

Hahaha……..akhirnya gw, nyelesain juga neeeeh buku (walopun gw masih ngejiplak source codenya buat ngecoba2). Gw baru ngerti prinsip ajax yang tidak me-request 1 page penuh, tetapi hanya apa yang diminta aja yang di panggil. Dari sini kelihatan, bahwa pengiriman request tidak bersifat synchronously, tapi asynchronously. Dari format sending request nya, maupun callback functionnya terlihat disana.

wah klo dipikir-pikir memang prosesnya gak gampang…karena memang hal inilah yang membedakan dengan halaman web biasa……. setelah ni, kayaknya gw bakalan coba-coba framework yang udah-udah sperti Jquery (seperti diusulkan oleh deniar),maupun prototype seperti di usulkan oleh rizal. “For ajax, I’m still wait”