Ajax
Alasan paling kuat untuk menggunakan kerangka JavaScript adalah untuk menstandarkan permintaan Ajax di seluruh browser. Permintaan Ajax adalah permintaan HTTP asinkron yang mengirimkan permintaan ke skrip sisi server dan kemudian mendapatkan hasil respons, seperti data dalam format XML, JSON, HTML, atau teks biasa. Kebanyakan kerangka kerja JavaScript memiliki beberapa bentuk objek permintaan Ajax yang menerima serangkaian opsi sebagai parameter. Opsi ini mencakup fungsi panggilan balik yang dipanggil ketika respons diterima dari server web. Permintaan Ajax untuk ExtJS, MooTools, dan Prototype terlihat seperti ini:
Listing 11: Permintaan Ajax di perpustakaan ExtJS
Ext.Ajax.permintaan({
url: 'server_script.php',
parameter: {
nama1: 'nilai1',
nama2: 'nilai2'
},
metode: 'POSTING',
sukses: fungsi(transportasi) {
alert(transport.responseText);
}
});
ExtJS menerima parameter, termasuk bidang seperti url, params, metode, dan fungsi pemrosesan sukses. Bidang url berisi alamat skrip sisi server, yang dipanggil oleh permintaan Ajax. Params sendiri merupakan objek yang terdiri dari pasangan kunci/nilai, yang kemudian diteruskan ke server. Bidang metode memiliki dua nilai opsional: GET atau POST, dan defaultnya adalah metode posting. Bidang terakhir adalah sukses, yang dipanggil setelah server mendapat respon sukses. Dalam contoh ini, diasumsikan bahwa server mengembalikan teks biasa, dan teks ini disajikan kepada pengguna melalui metode alert().
Selanjutnya, mari kita jelajahi lebih jauh permintaan Ajax di MooTools.
Daftar 12: Permintaan Ajax di MooTools
Permintaan baru({
url: 'skrip-server.php',
data: {
nama1: 'nilai1',
nama2: 'nilai2'
},
metode: 'posting',
onComplete: fungsi(respon) {
peringatan(respon);
}
}).mengirim();
Seperti yang Anda lihat, MooTools sangat mirip dengan ExtJS. Anda akan melihat bahwa variabel dilewatkan melalui kolom data, dan kolom metode harus menggunakan huruf kecil. Selain itu, tidak seperti fungsi pengendali sukses, MooTools menggunakan fungsi onComplete. Terakhir, tidak seperti ExtJS, MooTools sebenarnya mengirimkan permintaan menggunakan fungsi Request send().
Terakhir, mari kita lihat perbedaan nyata antara Prototipe.
Listing 13: Permintaan Ajax di Prototipe
new Ajax.Permintaan('server-script.php', {
parameter: {
nama1: 'nilai1',
nama2: 'nilai2'
},
metode: 'posting',
onSuccess: fungsi(transportasi) {
alert(transport.responseText);
}
});
Lihat, Prototipe bekerja dengan cara yang sama, tetapi dengan sedikit perbedaan sintaksis. Sebagai permulaan, objek Permintaan prototipe menerima dua parameter untuk diteruskan ke konstruktor. Parameter pertama adalah URL tujuan pengiriman permintaan, seperti yang Anda lihat pada dua contoh sebelumnya, dan parameter kedua adalah objek yang berisi opsi untuk setiap permintaan Ajax. Tentu saja, URL diteruskan sebagai parameter terpisah dan tidak ada dalam daftar opsi. Selain itu, perlu dicatat bahwa, tidak seperti MooTools, konstruktor objek Prototipe mengirimkan permintaan secara implisit, jadi tidak perlu memanggil metode apa pun untuk memicu permintaan HTTP.
Kebanyakan kerangka kerja JavaScript mendukung Ajax melebihi apa yang saya sebutkan di sini. Beberapa peningkatan penting termasuk memperbarui elemen secara otomatis setelah menerima respons, tanpa memerlukan fungsi onSuccess khusus. Beberapa perpustakaan memiliki fungsi pelengkapan otomatis yang telah dibuat sebelumnya, seperti yang Anda lihat pada mesin pencari Google, yang memberi Anda beberapa saran kueri saat Anda mengetik.
Pada bab berikut, Anda akan mempelajari tentang peningkatan pengalaman pengguna (UE) yang dibawa oleh kerangka kerja JavaScript untuk pengembang web.
Alamat cetak ulang: http://www.denisdeng.com/?p=729
Alamat asli: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html