Terdiri dari teknologi HTML, JavaScript™, DHTML, dan DOM, Ajax adalah cara brilian untuk mengubah antarmuka Web yang rumit menjadi aplikasi Ajax yang interaktif. Artikel ini, yang ditulis oleh pakar Ajax, menunjukkan bagaimana teknologi ini bekerja sama—mulai dari gambaran umum hingga diskusi mendetail—untuk mewujudkan pengembangan Web yang efisien. Dia juga mengungkap konsep inti Ajax, termasuk objek XMLHttpRequest.
Lima tahun yang lalu, jika Anda tidak tahu XML, Anda adalah anak itik jelek yang tidak dianggap serius oleh siapa pun. Delapan belas bulan yang lalu, Ruby menjadi pusat perhatian, dan programmer yang tidak mengenal Ruby hanya bisa duduk di bangku cadangan. Saat ini, jika Anda ingin mengikuti tren teknologi terkini, tujuan Anda adalah Ajax.
Namun Ajax lebih dari sekedar iseng saja, ini adalah cara ampuh untuk membangun situs web yang tidak sesulit mempelajari bahasa baru.
Namun sebelum kita masuk ke detail tentang apa itu Ajax, mari kita luangkan waktu beberapa menit untuk memahami apa yang dilakukan Ajax. Saat ini, ada dua pilihan dasar saat menulis aplikasi:
· Aplikasi desktop · Aplikasi web
Keduanya serupa, aplikasi desktop biasanya datang dalam bentuk CD (terkadang dapat diunduh dari situs web) dan terinstal sepenuhnya di superior komputer Anda. Aplikasi desktop mungkin menggunakan Internet untuk mengunduh pembaruan, namun kode yang menjalankan aplikasi ini ada di komputer desktop. Aplikasi web berjalan di server Web di suatu tempat—tidak mengherankan, aplikasi semacam itu diakses melalui browser Web.
Namun, yang lebih penting daripada penempatan kode yang menjalankan aplikasi ini adalah bagaimana aplikasi tersebut berfungsi dan berinteraksi dengannya. Aplikasi desktop umumnya cepat (berjalan langsung di komputer Anda tanpa menunggu koneksi Internet), memiliki antarmuka pengguna yang indah (biasanya bergantung pada sistem operasi), dan sangat dinamis. Anda dapat mengklik, memilih, mengetik, membuka menu dan submenu, bernavigasi, dan pada dasarnya tidak pernah menunggu.
Aplikasi web, di sisi lain, adalah tren terkini, menyediakan layanan yang tidak mungkin dilakukan di desktop (seperti Amazon.com dan eBay). Namun, dengan kekuatan Web muncul kebutuhan untuk menunggu, menunggu server merespons, menunggu layar disegarkan, menunggu permintaan kembali, dan membuat halaman baru.
Jelas ini adalah penyederhanaan yang berlebihan, namun konsep dasarnya adalah ini. Seperti yang sudah Anda duga, Ajax berupaya menjembatani fungsionalitas dan interaktivitas aplikasi desktop dengan aplikasi Web yang terus berkembang. Anda dapat menggunakan antarmuka pengguna yang dinamis dan kontrol yang indah seperti yang ditemukan di aplikasi desktop, tetapi di aplikasi Web.
Apa yang kamu tunggu? Mari kita lihat bagaimana Ajax dapat mengubah antarmuka Web yang kikuk menjadi aplikasi Ajax yang responsif.
Teknologi lama, trik baru
Ketika berbicara tentang Ajax, sebenarnya ini melibatkan beragam teknologi, dan penggunaannya secara fleksibel memerlukan pemahaman mendalam tentang berbagai teknologi ini (beberapa artikel pertama dalam seri ini akan membahas masing-masing teknologi ini secara terpisah). Kabar baiknya adalah Anda mungkin sudah sangat familiar dengan sebagian besar teknologi ini, dan yang lebih baik lagi adalah teknologi tersebut mudah dipelajari dan tidak sesulit bahasa pemrograman lengkap seperti Java atau Ruby.
Berikut ini adalah teknologi dasar yang digunakan dalam aplikasi Ajax:
·HTML digunakan untuk membangun formulir Web dan menentukan bidang yang digunakan oleh bagian lain dari aplikasi.
· Kode JavaScript adalah kode inti yang menjalankan aplikasi Ajax dan membantu meningkatkan komunikasi dengan aplikasi server.
·DHTML atau HTML Dinamis untuk memperbarui formulir secara dinamis. Kami akan menggunakan div, span, dan elemen HTML dinamis lainnya untuk menandai HTML.
·Document Object Model DOM digunakan untuk memproses (melalui kode JavaScript) struktur HTML dan (dalam beberapa kasus) XML yang dikembalikan oleh server.
Definisi Ajax
Ngomong-ngomong, Ajax adalah singkatan dari Asynchronous JavaScript and XML (dan DHTML, dll.). Frasa ini diciptakan oleh Jesse James Garrett dari Adaptive Path (lihat Sumberdaya), dan seperti yang dijelaskan Jesse, ini bukanlah akronim.
Mari kita analisa lebih lanjut tanggung jawab teknologi ini. Saya akan membahas teknologi ini secara mendalam di artikel mendatang, namun untuk saat ini, kenali saja komponen dan teknologinya. Semakin akrab Anda dengan kode-kode ini, semakin mudah untuk beralih dari pemahaman yang tersebar tentang teknologi ini ke pemahaman yang sebenarnya tentang teknologi ini (yang juga benar-benar membuka pintu bagi pengembangan aplikasi Web).
Objek XMLHttpRequest
Satu-satunya objek yang perlu dipahami mungkin juga merupakan objek yang paling asing bagi Anda, XMLHttpRequest. Ini adalah objek JavaScript, dan pembuatannya sederhana, seperti yang ditunjukkan pada Listing 1.
Listing 1. Membuat objek XMLHttpRequest baru
<script Language="javascript" type="text/javascript">
var xmlHttp = XMLHttpRequest baru();
</script>
Objek ini akan kita bahas lebih lanjut pada artikel berikutnya, namun untuk saat ini ketahuilah bahwa objek inilah yang menangani semua komunikasi server. Sebelum Anda melanjutkan membaca, berhentilah dan pikirkan hal ini: Teknologi JavaScript adalah teknologi yang berbicara ke server melalui objek XMLHttpRequest. Ini bukan alur aplikasi biasa, dan dari sinilah kekuatan Ajax berasal.
Dalam aplikasi Web pada umumnya, pengguna mengisi kolom formulir dan mengklik tombol Kirim. Seluruh formulir kemudian dikirim ke server, yang meneruskannya ke skrip yang menangani formulir tersebut (biasanya PHP atau Java, mungkin proses CGI atau yang serupa), dan kemudian mengirimkan kembali halaman baru ketika skrip sudah selesai. Halaman tersebut mungkin berupa HTML dengan formulir baru yang sudah diisi dengan beberapa data, mungkin halaman konfirmasi, atau mungkin halaman dengan beberapa opsi yang dipilih berdasarkan data yang dimasukkan dalam formulir asli. Tentu saja pengguna harus menunggu sementara skrip atau program di server memproses dan mengembalikan bentuk baru. Layar menjadi kosong dan menunggu hingga data dikembalikan dari server sebelum menggambar ulang. Inilah sebabnya mengapa interaktivitas buruk, pengguna tidak mendapatkan umpan balik langsung, sehingga terasa berbeda dibandingkan aplikasi desktop.
Ajax pada dasarnya menempatkan teknologi JavaScript dan objek XMLHttpRequest antara formulir Web dan server. Saat pengguna mengisi formulir, data dikirim ke beberapa kode JavaScript, bukan langsung ke server. Sebaliknya, kode JavaScript menangkap data formulir dan mengirimkan permintaan ke server. Pada saat yang sama, formulir di layar pengguna tidak akan berkedip, hilang, atau tertunda. Dengan kata lain, kode JavaScript mengirimkan permintaan di belakang layar tanpa pengguna mengetahui bahwa permintaan tersebut sedang dibuat. Lebih baik lagi, permintaan dikirim secara asinkron, yang berarti kode JavaScript (dan pengguna) tidak perlu menunggu respons dari server. Sehingga pengguna dapat terus memasukkan data, menggulir, dan menggunakan aplikasi.
Server kemudian mengembalikan data ke kode JavaScript (masih dalam bentuk Web), yang memutuskan apa yang harus dilakukan dengan data tersebut. Ini memperbarui data formulir dengan cepat, memberikan kesan bahwa aplikasi selesai secara instan, tanpa formulir dikirimkan atau disegarkan dan pengguna mendapatkan data baru. Kode JavaScript bahkan dapat melakukan beberapa penghitungan pada data yang diterima dan mengirim permintaan lain, semuanya tanpa campur tangan pengguna! Inilah kekuatan XMLHttpRequest. Ia dapat berinteraksi dengan server sendiri sesuai kebutuhan, dan pengguna bahkan mungkin sama sekali tidak menyadari apa yang terjadi di balik layar. Hasilnya adalah pengalaman yang dinamis, responsif, dan sangat interaktif yang mirip dengan aplikasi desktop, namun dengan seluruh kekuatan Internet di belakangnya.
Setelahmenambahkan beberapa JavaScript
untuk menangani XMLHttpRequest, kode JavaScript lainnya sangat sederhana. Faktanya, kita akan menggunakan kode JavaScript untuk menyelesaikan tugas-tugas yang sangat mendasar:
· Mendapatkan data formulir: Kode JavaScript dapat dengan mudah mengekstrak data dari formulir HTML dan mengirimkannya ke server.
·Memodifikasi data pada formulir: Memperbarui formulir juga mudah, mulai dari mengatur nilai bidang hingga mengganti gambar dengan cepat.
·Parse HTML dan XML: Gunakan kode JavaScript untuk memanipulasi DOM (lihat bagian selanjutnya) dan memproses struktur data XML yang dikembalikan oleh server formulir HTML.
Untuk dua poin pertama, Anda harus sangat familiar dengan metode getElementById(), seperti yang ditunjukkan pada Listing 2.
Listing 2. Menangkap dan mengatur nilai field dengan kode JavaScript
// Dapatkan nilai dari field "telepon" dan masukkan ke dalam variabel bernama telepon
var phone = document.getElementById("phone").value;
// Tetapkan beberapa nilai pada formulir menggunakan array yang disebut respon
document.getElementById("pesanan").nilai = respons[0];
document.getElementById("address").value = respon[1];
Tidak ada yang istimewa untuk diperhatikan di sini, bagus! Anda harus menyadari bahwa tidak ada yang terlalu rumit di sini. Setelah Anda menguasai XMLHttpRequest, sisa aplikasi Ajax Anda adalah kode JavaScript sederhana, seperti yang ditunjukkan pada Listing 2, dicampur dengan sedikit HTML. Pada saat yang sama, kita juga perlu menggunakan sedikit DOM, jadi mari kita lihat.
Diakhiri dengan DOM
Terakhir ada DOM, Model Objek Dokumen. DOM mungkin sedikit menakutkan bagi sebagian pembaca. Desainer HTML jarang menggunakannya, dan bahkan pemrogram JavaScript pun jarang menggunakannya kecuali mereka ingin menyelesaikan tugas pemrograman kelas atas. Program Java dan C/C++ yang kompleks banyak menggunakan DOM, itulah sebabnya DOM dianggap sulit dipelajari.
Untungnya, bekerja dengan DOM dalam teknologi JavaScript mudah dan sangat intuitif. Sekarang, secara konvensional Anda mungkin harus menjelaskan cara menggunakan DOM, atau setidaknya memberikan beberapa contoh kode, tetapi hal itu mungkin juga menyesatkan Anda. Bahkan jika Anda mengabaikan DOM, Anda masih bisa mempelajari Ajax, dan itulah pendekatan yang akan saya ambil. Kami akan meninjau kembali DOM di artikel mendatang, namun untuk saat ini cukuplah untuk mengetahui bahwa Anda mungkin memerlukannya. Kita akan mempelajari DOM lebih dalam ketika kita perlu meneruskan XML antara kode JavaScript dan server dan mengubah bentuk HTML. Anda dapat melakukan beberapa pekerjaan menarik tanpanya, jadi kesampingkan DOM untuk saat ini.
Mendapatkan objek Permintaan
Dengan pengetahuan dasar di atas, mari kita lihat beberapa contoh spesifik. XMLHttpRequest adalah inti dari aplikasi Ajax dan mungkin asing bagi banyak pembaca, jadi mari kita mulai dari sana. Seperti yang Anda lihat dari Listing 1, membuat dan menggunakan objek ini sangat sederhana bukan? Tunggu.
Ingat perang browser yang kejam beberapa tahun lalu? Tidak ada yang memberikan hasil yang sama di berbagai browser. Percaya atau tidak, perang ini masih terus terjadi, meski dalam skala yang lebih kecil. Namun anehnya, XMLHttpRequest menjadi salah satu korban perang ini. Oleh karena itu, mendapatkan objek XMLHttpRequest mungkin memerlukan pendekatan yang berbeda. Saya akan menjelaskannya secara detail di bawah ini.
Menggunakan browser Microsoft
Browser Microsoft Internet Explorer menggunakan parser MSXML untuk memproses XML (Anda dapat mempelajari lebih lanjut tentang MSXML di Sumberdaya). Oleh karena itu, jika Anda menulis aplikasi Ajax yang berinteraksi dengan Internet Explorer, Anda harus membuat objek dengan cara khusus.
Tapi itu tidak sesederhana itu. Sebenarnya ada dua versi MSXML yang berbeda tergantung pada versi teknologi JavaScript yang diinstal di Internet Explorer, jadi Anda harus menulis kode terpisah untuk setiap kasus. Lihat Listing 3, yang berisi kode yang membuat XMLHttpRequest di browser Microsoft.
Listing 3. Buat objek XMLHttpRequest di browser Microsoft
var xmlHttp = false;
mencoba {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} tangkapan (e) {
mencoba {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} tangkapan (e2) {
xmlHttp = salah;
}
}
Anda mungkin belum sepenuhnya memahami kodenya, tapi tidak apa-apa. Di akhir rangkaian artikel ini, Anda akan memiliki pemahaman lebih dalam tentang pemrograman JavaScript, penanganan kesalahan, kompilasi bersyarat, dan banyak lagi. Sekarang ingat saja dua baris kode:
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
dan
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");.
Kedua baris kode ini pada dasarnya mencoba membuat objek menggunakan satu versi MSXML, dan jika gagal, buat objek menggunakan versi lain. Tidak buruk, bukan? Jika tidak ada yang berhasil, variabel xmlHttp disetel ke false, memberi tahu kode Anda bahwa ada masalah. Jika ini terjadi, mungkin karena browser non-Microsoft yang diinstal memerlukan kode berbeda.
Menangani browser Mozilla dan non-Microsoft
Jika Anda memilih browser selain Internet Explorer, atau jika Anda menulis kode untuk browser non-Microsoft, Anda perlu menggunakan kode yang berbeda. Ini sebenarnya adalah baris kode sederhana yang ditunjukkan pada Listing 1:
var xmlHttp = new XMLHttpRequest object;.
Baris kode yang lebih sederhana ini membuat objek XMLHttpRequest di Mozilla, Firefox, Safari, Opera, dan pada dasarnya semua browser non-Microsoft yang mendukung Ajax dalam bentuk atau cara apa pun.
Kunciuntuk menggabungkan ini
adalah mendukung semua browser. Siapa yang ingin menulis aplikasi yang hanya bekerja dengan Internet Explorer atau browser non-Microsoft? Atau lebih buruk lagi, menulis lamaran dua kali? Tentu saja tidak! Oleh karena itu, kode tersebut harus mendukung browser Internet Explorer dan non-Microsoft. Listing 4 menunjukkan kode seperti itu.
Listing 4. Membuat objek XMLHttpRequest dengan cara yang mendukung banyak browser
/* Membuat objek XMLHttpRequest baru untuk berkomunikasi dengan server Web */
var xmlHttp = salah;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
mencoba {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} tangkapan (e) {
mencoba {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} tangkapan (e2) {
xmlHttp = salah;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'tidak terdefinisi') {
xmlHttp = XMLHttpRequest baru();
}
Untuk saat ini, abaikan simbol aneh yang dikomentari, seperti @cc_on, yang merupakan perintah kompiler JavaScript khusus yang akan dibahas secara rinci pada artikel berikutnya di XMLHttpRequest. Inti dari kode ini dibagi menjadi tiga langkah:
1. Membuat variabel xmlHttp untuk mereferensikan objek XMLHttpRequest yang akan dibuat.
2. Cobalah untuk membuat objek di browser Microsoft:
1) Cobalah membuatnya menggunakan objek Msxml2.XMLHTTP.
2) Jika gagal, coba lagi objek Microsoft.XMLHTTP.
2. Jika xmlHttp masih belum dibuat, buatlah objek dengan cara non-Microsoft.
Terakhir, xmlHttp harus mereferensikan objek XMLHttpRequest yang valid, apa pun browser yang dijalankannya.
Sedikit catatan tentang keamanan
. Browser kini memungkinkan pengguna untuk meningkatkan tingkat keamanannya, mematikan teknologi JavaScript, dan menonaktifkan opsi apa pun di browser. Dalam hal ini kodenya tidak akan berfungsi. Pada titik ini masalah perlu ditangani dengan tepat, yang memerlukan artikel tersendiri untuk nanti (seri ini cukup panjang ya? Jangan khawatir, Anda mungkin mendapatkannya sebelum selesai membaca). Sekarang mari kita menulis sepotong kode yang kuat namun tidak sempurna, yang bagus untuk menguasai Ajax. Kami akan membahas ini lebih detail nanti.
Permintaan/Respon di Dunia Ajax
Sekarang kita telah memperkenalkan Ajax, kita memiliki pemahaman dasar tentang objek XMLHttpRequest dan cara membuatnya. Jika Anda telah membaca dengan cermat, Anda mungkin sudah mengetahui bahwa teknologi JavaScript-lah yang berhubungan dengan aplikasi Web di server, bukan formulir HTML yang dikirimkan langsung ke aplikasi tersebut.
Apa yang hilang? Persisnya bagaimana menggunakan XMLHttpRequest. Karena kode ini sangat penting sehingga setiap aplikasi Ajax yang Anda tulis akan menggunakannya dalam beberapa bentuk, mari kita mulai dengan melihat seperti apa model permintaan/respons dasar Ajax.
Membuat permintaan
Sekarang setelah Anda memiliki objek XMLHttpRequest yang baru, biarkan ia melakukan beberapa pekerjaan. Pertama, Anda memerlukan metode JavaScript yang dapat dipanggil oleh halaman Web (misalnya, saat pengguna memasukkan teks atau memilih item dari menu). Berikutnya adalah proses yang pada dasarnya sama di semua aplikasi Ajax:
1. Dapatkan data yang diperlukan dari formulir Web.
2. Buat URL yang akan dihubungkan.
3. Buka koneksi ke server.
4. Mengatur fungsi yang akan dijalankan oleh server setelah selesai.
5. Kirim permintaan.
Contoh metode Ajax di Listing 5 disusun dalam urutan berikut:
Listing 5. Membuat permintaan Ajax
fungsi panggilanServer() {
// Dapatkan kota dan negara bagian dari formulir web
var kota = document.getElementById("kota").nilai;
var state = document.getElementById("status").nilai;
// Hanya lanjutkan jika ada nilai untuk kedua bidang
if ((kota == null) || (kota == "")) kembali;
if ((state == null) || (state == "")) return
// Buat URL untuk dihubungkan
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
// Buka koneksi ke server
xmlHttp.open("GET", url, true);
// Siapkan fungsi agar server dapat dijalankan setelah selesai
xmlHttp.onreadystatechange = updatePage;
// Kirim permintaan
xmlHttp.kirim(null);
}
Arti dari sebagian besar kode sangat jelas. Kode di awal menggunakan kode JavaScript dasar untuk mendapatkan nilai dari beberapa kolom formulir. Kemudian tetapkan skrip PHP sebagai target tautan. Perhatikan cara URL skrip ditentukan, kota dan negara bagian (dari formulir) ditambahkan ke URL menggunakan parameter GET sederhana.
Kemudian koneksi dibuka, yang merupakan pertama kalinya Anda melihat XMLHttpRequest digunakan. Metode koneksi (GET) dan URL yang akan dihubungkan ditentukan. Parameter terakhir, jika disetel ke true, akan meminta koneksi asinkron (ini adalah asal mula Ajax). Jika false digunakan, kode akan menunggu respon dari server setelah membuat permintaan. Jika disetel ke true, pengguna masih dapat menggunakan formulir (dan bahkan memanggil metode JavaScript lainnya) saat server menangani permintaan di latar belakang.
Atribut onreadystatechange dari xmlHttp (ingat, ini adalah contoh objek XMLHttpRequest) memberi tahu server apa yang harus dilakukan setelah selesai dijalankan (yang mungkin memakan waktu lima menit atau lima jam). Karena kode tidak menunggu server, kode harus memberi tahu server apa yang harus dilakukan agar Anda dapat merespons. Dalam contoh ini, jika server telah selesai memproses permintaan, metode khusus yang disebut updatePage() akan dipicu.
Terakhir, send() dipanggil dengan nilai null. Karena data yang akan dikirim ke server (kota dan negara bagian) telah ditambahkan ke URL permintaan, tidak ada data yang perlu dikirim dalam permintaan tersebut. Dengan cara ini permintaan dibuat dan server berfungsi sesuai permintaan Anda.
Jika Anda tidak menemukan sesuatu yang baru, Anda harus menghargai betapa sederhana dan lugasnya hal ini! Selain mengingat sifat Ajax yang tidak sinkron, ini semua cukup sederhana. Bersyukurlah bahwa Ajax memungkinkan Anda fokus pada penulisan aplikasi dan antarmuka yang indah daripada mengkhawatirkan kode permintaan/respons HTTP yang rumit.
Kode pada Listing 5 menggambarkan kemudahan penggunaan Ajax. Datanya berupa teks sederhana dan dapat digunakan sebagai bagian dari URL permintaan. Kirim permintaan dengan GET, bukan POST yang lebih kompleks. Tidak ada XML dan tidak ada header konten untuk ditambahkan, dan tidak ada data untuk dikirim ke badan permintaan; dengan kata lain, ini adalah utopia Ajax.
Jangan khawatir, segalanya akan menjadi lebih rumit seiring dengan terungkapnya rangkaian artikel ini. Anda akan melihat cara mengirim permintaan POST, cara mengatur header permintaan dan tipe konten, cara menyandikan XML dalam pesan, cara meningkatkan keamanan permintaan, dan masih banyak lagi yang dapat Anda lakukan! Jangan khawatir tentang kesulitan-kesulitan itu untuk saat ini, cukup kuasai hal-hal dasar, dan segera kami akan membangun satu set lengkap perpustakaan alat Ajax.
Menangani Respons
Kini muncul respons server. Hanya dua hal yang perlu diketahui untuk saat ini:
· Jangan lakukan apa pun hingga nilai properti xmlHttp.readyState sama dengan 4.
·Server akan mengisi properti xmlHttp.responseText dengan responnya.
Yang pertama, status siap, akan dibahas secara rinci di artikel berikutnya, dan Anda akan mempelajari lebih lanjut tentang tahapan permintaan HTTP daripada yang mungkin Anda bayangkan. Untuk saat ini cukup memeriksa nilai tertentu (4) (nilai lainnya akan dibahas di artikel berikutnya). Poin kedua, gunakan properti xmlHttp.responseText untuk mendapatkan respon server, caranya sangat sederhana. Contoh metode di Listing 6 dapat dipanggil oleh server berdasarkan data yang dikirim di Listing 5.
Listing 6. Menangani
fungsi respon server updatePage() {
if (xmlHttp.readyState == 4) {
var respon = xmlHttp.responseText;
document.getElementById("zipCode").value = respons;
}
}
Kode-kodenya juga tidak sulit dan rumit. Ia menunggu server untuk memanggil, dan jika sudah siap, menetapkan nilai bidang formulir lain menggunakan nilai yang dikembalikan oleh server (di sini kode pos kota dan negara bagian yang dimasukkan oleh pengguna). Jadi tiba-tiba kolom zipCode yang berisi kode ZIP muncul tanpa pengguna menekan tombol apa pun! Inilah yang saya sebutkan sebelumnya sebagai aplikasi desktop. Respon cepat, perasaan dinamis, dll., semua karena sepotong kecil kode Ajax.
Pembaca yang cermat mungkin memperhatikan bahwa kode pos adalah kolom teks biasa. Setelah server mengembalikan pengkodean ZIP, metode updatePage() menetapkan nilai bidang tersebut dengan pengkodean ZIP kota/negara bagian, yang dapat diganti oleh pengguna. Hal ini dilakukan karena dua alasan: untuk menjaga contoh tetap sederhana dan untuk mengilustrasikan bahwa terkadang Anda mungkin ingin pengguna dapat mengubah data yang dikembalikan oleh server. Ingatlah dua hal ini, keduanya penting untuk desain antarmuka pengguna yang baik.
Apa lagi yang ada
untuk terhubung ke formulir web
?Sebenarnya tidak banyak yang tersisa. Satu metode JavaScript menangkap informasi yang dimasukkan pengguna ke dalam formulir dan mengirimkannya ke server, dan metode JavaScript lainnya mendengarkan dan memproses respons serta menetapkan nilai bidang saat respons muncul kembali. Semua ini sebenarnya bergantung pada pemanggilan metode JavaScript pertama, yang memulai seluruh proses. Solusi yang paling jelas adalah dengan menambahkan tombol ke formulir HTML, tapi itu tahun 2001, bukan? Mari gunakan teknologi JavaScript seperti Listing 7.
Listing 7. Memulai proses Ajax
<form>
<p>Kota: <input type="text" name="city" id="city" size="25"
onChange="panggilanServer();" /></p>
<p>Negara: <input type="text" name="state" id="state" size="25"
onChange="panggilanServer();" /></p>
<p>Kode Pos: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>
Jika ini tampak seperti sebuah kode yang cukup umum, Anda benar! Ketika pengguna memasukkan nilai baru di bidang kota atau negara bagian, metode callServer() dipicu dan Ajax mulai berjalan. Apakah Anda mengerti sedikit apa yang terjadi? Ya, itu dia!
Kesimpulan
Sekarang Anda mungkin siap untuk mulai menulis aplikasi Ajax pertama Anda, dan setidaknya ingin membaca artikel di sumber dengan cermat, bukan? Namun Anda bisa memulai dengan gambaran dasar tentang cara kerja aplikasi ini dan pemahaman dasar tentang objek XMLHttpRequest. Pada bagian berikutnya, Anda akan menguasai objek ini dan mempelajari cara menangani komunikasi antara JavaScript dan server, cara menggunakan formulir HTML, dan cara mendapatkan pegangan DOM.
Sekarang luangkan waktu sejenak untuk mempertimbangkan betapa hebatnya aplikasi Ajax. Bayangkan formulir Web yang langsung merespons ketika Anda mengklik tombol, memasukkan kolom, memilih opsi dari kotak kombo, atau menyeret mouse melintasi layar. Pikirkan tentang apa sebenarnya arti async, pikirkan tentang kode JavaScript yang berjalan dan tidak menunggu server merespons permintaannya. Masalah apa saja yang akan Anda temui? Bidang apa yang akan dimasukinya? Mengingat pendekatan baru ini, bagaimana kita harus mengubah desain formulir saat memprogram?
Jika Anda meluangkan sedikit waktu untuk masalah ini, Anda akan mendapatkan lebih dari sekadar memotong/menempelkan beberapa kode ke dalam aplikasi yang tidak Anda pahami sama sekali. Pada bagian berikutnya, kami akan mempraktikkan konsep ini, merinci kode yang diperlukan agar aplikasi berfungsi seperti ini. Jadi untuk saat ini, nikmati kemungkinan yang ditawarkan Ajax.