Kebanyakan aplikasi Web menggunakan model permintaan/respons untuk mendapatkan halaman HTML lengkap dari server. Seringkali ini merupakan proses berulang-ulang yaitu mengklik sebuah tombol, menunggu server merespons, mengklik tombol lain, dan kemudian menunggu lagi. Dengan Ajax dan objek XMLHttpRequest, Anda dapat menggunakan model permintaan/respons yang tidak mengharuskan pengguna menunggu respons dari server. Dalam artikel ini, Brett McLaughlin menjelaskan cara membuat instance XMLHttpRequest yang dapat beradaptasi dengan browser berbeda, membuat dan mengirim permintaan, serta merespons ke server.
Pada artikel sebelumnya di seri ini (lihat Sumberdaya untuk tautannya), kami memperkenalkan aplikasi Ajax dan memeriksa konsep dasar yang mendorong aplikasi Ajax. Inti dari ini adalah banyak teknologi yang mungkin sudah Anda ketahui: JavaScript, HTML dan XHTML, sedikit HTML dinamis, dan DOM (Document Object Model). Artikel ini akan memperbesar satu poin dan fokus pada detail spesifik Ajax.
Pada artikel ini, Anda akan mulai mengenal objek dan metode pemrograman paling dasar dan mendasar yang terkait dengan Ajax: objek XMLHttpRequest. Objek ini sebenarnya hanyalah benang merah yang mencakup semua aplikasi Ajax, dan seperti yang Anda duga, Anda perlu memahami objek ini secara menyeluruh untuk mewujudkan potensi pemrograman Anda sepenuhnya. Faktanya, terkadang Anda akan menemukan bahwa untuk menggunakan XMLHttpRequest dengan benar, Anda jelas tidak dapat menggunakan XMLHttpRequest. Apa yang sedang terjadi?
Sekilas tentang Web 2.0
Sebelum mempelajari kode ini, mari kita lihat perspektif terkini -- penting untuk memahami konsep Web 2.0 dengan jelas. Ketika Anda mendengar istilah Web 2.0, Anda harus bertanya terlebih dahulu "Apa itu Web 1.0?" Meskipun jarang mendengar orang menyebut Web 1.0, sebenarnya ini mengacu pada Web tradisional dengan model permintaan dan respons yang sama sekali berbeda. Misalnya, buka situs web Amazon.com dan klik tombol atau masukkan istilah pencarian. Permintaan dikirim ke server, dan responsnya dikembalikan ke browser. Permintaannya bukan sekadar daftar buku dan judul, tetapi halaman HTML lengkap lainnya. Oleh karena itu, Anda mungkin melihat kedipan atau jitter saat browser web menggambar ulang halaman dengan HTML baru. Faktanya, permintaan dan tanggapan terlihat jelas di setiap halaman baru yang Anda lihat.
Web 2.0 (sebagian besar) menghilangkan interaksi bolak-balik yang terlihat ini. Misalnya, kunjungi situs seperti Google Maps atau Flickr (lihat Sumberdaya untuk link ke situs Web 2.0 dan Ajax-enabled ini). Di Google Maps, misalnya, Anda dapat menyeret peta untuk memperbesar dan memperkecil dengan sedikit menggambar ulang. Tentu saja tetap ada permintaan dan tanggapan, namun tersembunyi di balik layar. Sebagai pengguna, pengalamannya lebih nyaman dan terasa seperti aplikasi desktop. Perasaan dan paradigma baru inilah yang Anda dapatkan ketika seseorang menyebut Web 2.0.
Kekhawatirannya adalah memungkinkan terjadinya interaksi baru ini. Jelasnya, Anda masih perlu membuat permintaan dan menerima respons, namun penggambaran ulang HTML untuk setiap interaksi permintaan/responslah yang menciptakan interaksi Web yang lambat dan kikuk. Jadi jelas bahwa kita memerlukan cara untuk mengirim permintaan dan menerima respons yang hanya berisi data yang diperlukan, bukan seluruh halaman HTML. Satu-satunya saat Anda perlu mendapatkan seluruh halaman HTML baru adalah saat Anda ingin pengguna melihat halaman baru.
Namun sebagian besar interaksi menambahkan detail ke halaman yang ada, mengubah teks utama, atau menimpa data asli. Dalam kasus ini, metode Ajax dan Web 2.0 memungkinkan data dikirim dan diterima tanpa memperbarui seluruh halaman HTML. Bagi mereka yang menghabiskan banyak waktu online, kemampuan ini dapat membuat aplikasi Anda terasa lebih cepat dan responsif, sehingga membuat aplikasi kembali lagi ke situs Anda dari waktu ke waktu.
Pengantar XMLHttpRequest
Untuk benar-benar mewujudkan keajaiban indah ini, Anda harus sangat familiar dengan objek JavaScript, yaitu XMLHttpRequest. Objek kecil ini sebenarnya telah ada di beberapa browser selama beberapa waktu, dan merupakan inti dari Web 2.0, Ajax, dan banyak hal lainnya yang akan saya bahas di kolom ini selama beberapa bulan ke depan. Untuk memberikan gambaran singkat, berikut adalah beberapa metode dan properti yang akan digunakan pada objek ini.
·open(): Membuat permintaan baru ke server.
·send(): Mengirim permintaan ke server.
·abort(): Membatalkan permintaan saat ini.
·readyState: Memberikan status siap HTML saat ini.
·responseText: Teks respons permintaan dikembalikan oleh server.
Jangan khawatir jika Anda tidak mengetahuinya (atau salah satunya), kami akan membahas setiap metode dan properti dalam beberapa artikel berikutnya. Yang harus Anda ketahui sekarang adalah apa yang harus dilakukan dengan XMLHttpRequest. Perhatikan bahwa metode dan properti ini terkait dengan pengiriman permintaan dan pemrosesan respons. Faktanya, jika Anda melihat semua metode dan properti XMLHttpRequest, Anda akan menemukan bahwa semuanya berhubungan dengan model permintaan/respons yang sangat sederhana. Jelasnya, kita tidak akan menemukan objek GUI yang baru atau cara yang sangat misterius dalam menciptakan interaksi pengguna, kita akan menggunakan permintaan yang sangat sederhana dan respons yang sangat sederhana. Mungkin kedengarannya tidak banyak, namun menggunakan objek ini dengan baik dapat merevolusi aplikasi Anda.
Sederhana baru
terlebih dahulu memerlukan pembuatan variabel baru dan menetapkannya sebagai instance objek XMLHttpRequest. Ini semudah menggunakan kata kunci baru pada nama objek di JavaScript, seperti yang ditunjukkan pada Listing 1.
Listing 1. Membuat objek XMLHttpRequest baru
<script Language="javascript" type="text/javascript">
var permintaan = XMLHttpRequest baru();
</script>
Sulit bukan? Ingat, JavaScript tidak mengharuskan Anda menentukan tipe variabel, jadi Anda tidak perlu melakukan apa yang Anda lakukan di Listing 2 (yang mungkin Anda lakukan dalam bahasa Java).
Listing 2. Pseudocode Java untuk membuat XMLHttpRequestXMLHttpRequest
request = new XMLHttpRequest();
Jadi dalam JavaScript Anda membuat variabel menggunakan var, beri nama (seperti "request"), lalu tetapkan instance XMLHttpRequest baru. Objek tersebut kemudian dapat digunakan dalam fungsi.
Penanganan Kesalahan
Segala macam hal sebenarnya bisa salah, dan kode di atas tidak memberikan penanganan kesalahan apa pun. Pendekatan yang lebih baik adalah dengan membuat objek dan keluar dengan baik jika terjadi kesalahan. Misalnya, browser lama mana pun (percaya atau tidak, masih ada orang yang menggunakan Netscape Navigator versi lama) tidak mendukung XMLHttpRequest, dan Anda perlu memberi tahu pengguna tersebut bahwa ada sesuatu yang salah. Listing 3 menunjukkan cara membuat objek ini untuk mengeluarkan peringatan JavaScript ketika terjadi masalah.
Listing 3. Membuat XMLHttpRequest dengan kemampuan penanganan kesalahan
<skrip bahasa="javascript" type="teks/javascript">
var permintaan = salah;
mencoba {
permintaan = XMLHttpRequest baru();
} tangkapan (gagal) {
permintaan = salah;
}
jika (!permintaan)
alert("Kesalahan menginisialisasi XMLHttpRequest!");
</script>
Pastikan untuk memahami langkah-langkah berikut:
1. Buat permintaan variabel baru dan berikan nilai false. False nantinya akan digunakan sebagai kondisi penilaian, artinya objek XMLHttpRequest belum dibuat.
2. Tambahkan blok coba/tangkap:
1) Cobalah untuk membuat objek XMLHttpRequest.
2) Jika gagal (catch (gagal)), dijamin nilai request masih false.
3. Periksa apakah permintaan masih salah (tidak akan salah jika semuanya normal).
4. Jika terjadi masalah (permintaan salah), gunakan peringatan JavaScript untuk memberi tahu pengguna bahwa masalah telah terjadi.
Kode ini sangat sederhana, dan bagi sebagian besar JavaScript dan pengembang web, dibutuhkan waktu lebih lama untuk benar-benar memahaminya dibandingkan membaca dan menulis kode. Sekarang Anda memiliki sepotong kode pembuatan objek XMLHttpRequest yang diperiksa kesalahannya dan dapat memberi tahu Anda apa yang salah.
Semuanya tampak baik-baik sajadengan Microsoft
, setidaknya sampai Anda mencoba kodenya dengan Internet Explorer. Jika Anda bereksperimen seperti ini, Anda akan melihat situasi buruk seperti yang ditunjukkan pada Gambar 1.
Gambar 1. Kesalahan pelaporan Internet Explorer
Jelas ada sesuatu yang salah, dan Internet Explorer bukanlah browser yang ketinggalan jaman karena digunakan oleh 70% orang di dunia. Dengan kata lain, jika Anda tidak mendukung Microsoft dan Internet Explorer, Anda tidak akan populer di dunia Web! Jadi kita perlu mengambil pendekatan berbeda dengan browser Microsoft.
Telah diverifikasi bahwa Microsoft mendukung Ajax, tetapi versi XMLHttpRequest-nya memiliki nama yang berbeda. Faktanya, ia menyebutnya dengan beberapa hal berbeda. Jika Anda menggunakan versi Internet Explorer yang lebih baru, Anda perlu menggunakan objek Msxml2.XMLHTTP, sedangkan versi Internet Explorer yang lebih lama menggunakan Microsoft.XMLHTTP. Kita perlu mendukung kedua jenis objek (serta browser non-Microsoft). Lihatlah Listing 4, yang dibuat berdasarkan kode sebelumnya dan menambahkan dukungan untuk Microsoft.
Apakah Microsoft terlibat?
Banyak yang telah ditulis tentang meningkatnya minat dan keterlibatan Ajax dan Microsoft di bidang ini. Faktanya, dikatakan bahwa versi terbaru Internet Explorer Microsoft -- versi 7.0, yang akan dirilis pada paruh kedua tahun 2006 -- akan mulai mendukung XMLHttpRequest secara langsung, memungkinkan Anda menggunakan kata kunci baru alih-alih semua kode pembuatan Msxml2.XMLHTTP. Namun jangan terlalu bersemangat, browser lama masih perlu didukung, sehingga kode lintas browser tidak akan hilang dalam waktu dekat.
Listing 4. Menambahkan dukungan untuk browser Microsoft
<skrip bahasa="javascript" type="teks/javascript">
var permintaan = salah;
mencoba {
permintaan = XMLHttpRequest baru();
} tangkap (cobamicrosoft) {
mencoba {
permintaan = new ActiveXObject("Msxml2.XMLHTTP");
} tangkapan (microsoft lainnya) {
mencoba {
permintaan = new ActiveXObject("Microsoft.XMLHTTP");
} tangkapan (gagal) {
permintaan = salah;
}
}
}
jika (!permintaan)
alert("Kesalahan menginisialisasi XMLHttpRequest!");
</skrip>
Sangat mudah untuk bingung dengan kurung kurawal ini, sehingga setiap langkah diperkenalkan di bawah ini:
1. Buat permintaan variabel baru dan berikan nilai false. Gunakan false sebagai kondisi penilaian, yang berarti objek XMLHttpRequest belum dibuat.
2. Tambahkan blok coba/tangkap:
1) Cobalah untuk membuat objek XMLHttpRequest.
2) Jika gagal (tangkap (trymicrosoft)):
1>Coba gunakan browser Microsoft versi terbaru untuk membuat objek yang kompatibel dengan Microsoft (Msxml2.XMLHTTP).
2> Jika gagal (catch (othermicrosoft)) coba buat objek yang kompatibel dengan Microsoft (Microsoft.XMLHTTP) menggunakan browser Microsoft versi lama.
2) Jika gagal (catch (gagal)), dijamin nilai request masih false.
3. Periksa apakah permintaan masih salah (tidak akan salah jika semuanya berjalan dengan baik).
4. Jika terjadi masalah (permintaan salah), gunakan peringatan JavaScript untuk memberi tahu pengguna bahwa masalah telah terjadi.
Setelah memodifikasi kode dengan cara ini dan mengujinya menggunakan Internet Explorer, Anda akan melihat form yang telah dibuat (tanpa pesan kesalahan). Hasil percobaan saya ditunjukkan pada Gambar 2.
Gambar 2. Internet Explorer berfungsi normal
Statis vs. dinamis
Lihatlah kembali Listing 1, 3, dan 4. Perhatikan bahwa semua kode ini bersarang langsung di dalam tag skrip. Kode JavaScript seperti ini yang tidak ditempatkan di badan metode atau fungsi disebut JavaScript statis. Artinya kode dijalankan beberapa saat sebelum halaman ditampilkan kepada pengguna. (Meskipun spesifikasinya tidak mengetahui dengan pasti apa efek kode ini pada browser saat dijalankan, dijamin kode ini akan dijalankan sebelum pengguna dapat berinteraksi dengan halaman tersebut.) Ini juga merupakan cara paling umum Pemrogram Ajax membuat objek XMLHttpRequest.
Meskipun demikian, Anda juga dapat memasukkan kode ini ke dalam metode seperti Listing 5.
Listing 5. Memindahkan kode pembuatan XMLHttpRequest ke dalam suatu metode
<skrip bahasa="javascript" type="teks/javascript">
permintaan var;
fungsi createRequest() {
mencoba {
permintaan = XMLHttpRequest baru();
} tangkap (cobamicrosoft) {
mencoba {
permintaan = new ActiveXObject("Msxml2.XMLHTTP");
} tangkapan (microsoft lainnya) {
mencoba {
permintaan = new ActiveXObject("Microsoft.XMLHTTP");
} tangkapan (gagal) {
permintaan = salah;
}
}
}
jika (!permintaan)
alert("Kesalahan menginisialisasi XMLHttpRequest!");
}
</skrip>
Jika Anda menulis kode dengan cara ini, Anda perlu memanggil metode ini sebelum menangani Ajax. Jadi kode seperti Listing 6 juga diperlukan.
Listing 6. Buat metode menggunakan XMLHttpRequest
<skrip bahasa="javascript" type="teks/javascript">
permintaan var;
fungsi createRequest() {
mencoba {
permintaan = XMLHttpRequest baru();
} tangkap (cobamicrosoft) {
mencoba {
permintaan = new ActiveXObject("Msxml2.XMLHTTP");
} tangkapan (microsoft lainnya) {
mencoba {
permintaan = new ActiveXObject("Microsoft.XMLHTTP");
} tangkapan (gagal) {
permintaan = salah;
}
}
}
jika (!permintaan)
alert("Kesalahan menginisialisasi XMLHttpRequest!");
}
fungsi getCustomerInfo() {
buatPermintaan();
// Lakukan sesuatu dengan variabel permintaan
}
</skrip>
Satu-satunya masalah dengan kode ini adalah penundaan pemberitahuan kesalahan, itulah sebabnya sebagian besar pemrogram Ajax tidak menggunakan pendekatan ini. Misalkan Anda memiliki formulir kompleks dengan 10 atau 15 bidang, kotak pilih, dll., dan Anda ingin mengaktifkan beberapa kode Ajax saat pengguna memasukkan teks di bidang ke-14 (dari atas ke bawah sesuai urutan formulir). Pada titik ini, getCustomerInfo() mencoba membuat objek XMLHttpRequest, tetapi (dalam kasus ini) gagal. Pengguna kemudian diperlihatkan peringatan yang dengan jelas memberi tahu mereka bahwa mereka tidak dapat menggunakan aplikasi tersebut. Namun pengguna sudah menghabiskan banyak waktu untuk memasukkan data ke dalam formulir! Ini sangat mengganggu, dan mengganggu jelas tidak akan menarik pengguna untuk kembali lagi ke situs Anda.
Jika Anda menggunakan JavaScript statis, pengguna akan melihat pesan kesalahan dengan sangat cepat saat mereka mengklik halaman tersebut. Itu juga menjengkelkan, bukan? Pengguna mungkin salah mengira bahwa aplikasi Web Anda tidak dapat berjalan di browsernya. Namun hal ini tentunya lebih baik daripada mereka menghabiskan 10 menit memasukkan informasi hanya untuk kemudian diperlihatkan kesalahan yang sama. Oleh karena itu, saya menyarankan untuk menulis kode statis agar pengguna dapat mendeteksi masalah sedini mungkin.
Setelahmengirimkan permintaan dengan XMLHttpRequest
dan mendapatkan objek permintaan, Anda dapat memasuki siklus permintaan/respons. Ingat, satu-satunya tujuan XMLHttpRequest adalah memungkinkan Anda mengirim permintaan dan menerima tanggapan. Yang lainnya adalah tugas JavaScript, CSS, atau kode lain di halaman: mengubah antarmuka pengguna, mengganti gambar, menafsirkan data yang dikembalikan oleh server. Setelah menyiapkan XMLHttpRequest, Anda dapat mengirimkan permintaan ke server.
Selamat datang di Sandbox
Ajax menggunakan model keamanan sandbox. Oleh karena itu, kode Ajax (khususnya, objek XMLHttpRequest) hanya dapat mengirim permintaan ke domain yang sama di mana ia berada. Kami akan membahas lebih lanjut tentang keamanan dan Ajax di artikel mendatang, tetapi untuk saat ini ketahuilah bahwa kode yang berjalan di mesin lokal hanya dapat membuat permintaan ke skrip sisi server di mesin lokal. Jika Anda ingin kode Ajax dijalankan di www.breakneckpizza.com , permintaan harus dikirim dari skrip yang berjalan di www.breakneck.com .
Untuk mengatur URL server,
Anda harus menentukan terlebih dahulu URL server yang terhubung. Ini bukan persyaratan khusus untuk Ajax, tetapi masih diperlukan untuk membuat koneksi, dan sekarang Anda jelas harus tahu cara membuat URL. Di sebagian besar aplikasi, URL ini dibuat dari kombinasi beberapa data statis dan data dari formulir yang diproses pengguna. Misalnya, kode JavaScript di Listing 7 mendapatkan nilai bidang nomor telepon dan menggunakannya untuk membuat URL.
Listing 7. Membuat URL permintaan
<skrip bahasa="javascript" type="teks/javascript">
var permintaan = salah;
mencoba {
permintaan = XMLHttpRequest baru();
} tangkap (cobamicrosoft) {
mencoba {
permintaan = new ActiveXObject("Msxml2.XMLHTTP");
} tangkapan (microsoft lainnya) {
mencoba {
permintaan = new ActiveXObject("Microsoft.XMLHTTP");
} tangkapan (gagal) {
permintaan = salah;
}
}
}
jika (!permintaan)
alert("Kesalahan saat menginisialisasi XMLHttpRequest!");
function getCustomerInfo() {
var telepon = document.getElementById("telepon").nilai;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(telepon);
}
</script>
Tidak ada yang sulit untuk dipahami di sini. Pertama, kode tersebut membuat variabel telepon baru dan memberinya nilai bidang formulir dengan ID "telepon". Listing 8 menunjukkan XHTML untuk formulir ini, di mana Anda dapat melihat bidang telepon dan atribut id-nya.
Listing 8. Bentuk Pizza Break Neck
<tubuh>
<p><img src="breakneck-logo_4c.gif" alt="Pizza Patah Leher" /></p>
<formulir tindakan="POSTING">
<p>Masukkan nomor telepon Anda:
<input type="text" size="14" nama="telepon" id="telepon"
onChange="dapatkanInfo Pelanggan();" />
</p>
<p>Pesanan Anda akan dikirimkan</p>
<div id="alamat"></div>
<p>Ketik pesanan Anda di sini:</p>
<p><textarea name="order" row="6" cols="50" id="order"></textarea></p>
<p><input type="submit" value="Pesan Pizza" id="kirim" /></p>
</bentuk>
</body>
Perhatikan juga bahwa ketika pengguna memasukkan nomor telepon atau mengubah nomor telepon, metode getCustomerInfo() yang ditunjukkan pada Listing 8 akan terpicu. Metode ini mendapatkan nomor telepon dan membuat string URL yang disimpan dalam variabel url. Ingat, karena kode Ajax bersifat sandbox dan hanya dapat terhubung ke domain yang sama, sebenarnya tidak diperlukan nama domain di URL. Skrip dalam contoh ini disebut /cgi-local/lookupCustomer.php. Terakhir, nomor telepon ditambahkan ke skrip sebagai parameter GET: "phone=" + escape(phone).
Jika Anda belum pernah melihat metode escape() sebelumnya, metode ini digunakan untuk menghindari karakter apa pun yang tidak dapat dikirim dengan benar dalam teks biasa. Misalnya, spasi pada nomor telepon akan dikonversi menjadi karakter %20, sehingga karakter ini dapat diteruskan dalam URL.
Anda dapat menambahkan parameter sebanyak yang diperlukan. Misal ingin menambahkan parameter lain, cukup tambahkan ke URL dan pisahkan dengan karakter ampersand (&) [parameter pertama dipisahkan dari nama skrip dengan tanda tanya (?)].
Buka permintaan
Setelah Anda memiliki URL untuk dihubungkan, Anda dapat mengonfigurasi permintaan tersebut. Hal ini dapat dilakukan dengan menggunakan metode open() pada objek XMLHttpRequest. Metode ini memiliki lima parameter:
request-type: jenis permintaan yang akan dikirim. Nilai umumnya adalah GET atau POST, tetapi permintaan HEAD juga dapat dikirim.
url: URL untuk dihubungkan.
async: benar jika Anda ingin menggunakan koneksi asinkron, salah jika sebaliknya. Parameter ini opsional dan defaultnya adalah true.
nama pengguna: Jika otentikasi diperlukan, Anda dapat menentukan nama pengguna di sini. Parameter opsional ini tidak memiliki nilai default. kata sandi: Jika otentikasi diperlukan, Anda dapat menentukan kata sandi di sini. Parameter opsional ini tidak memiliki nilai default.
Apakah open() terbuka?
Pengembang internet tidak setuju dengan apa sebenarnya yang dilakukan metode open(). Tapi itu tidak benar-benar membuka permintaan. Jika Anda memantau jaringan dan transfer data antara halaman XHTML/Ajax dan skrip penghubungnya, Anda tidak akan melihat komunikasi apa pun saat metode open() dipanggil. Tidak jelas mengapa nama ini dipilih, tapi jelas itu bukan pilihan yang baik.
Biasanya tiga parameter pertama digunakan. Faktanya, meskipun koneksi asinkron diperlukan, parameter ketiga harus ditetapkan sebagai "benar". Ini adalah defaultnya, tetapi bersikeras untuk menentukan secara eksplisit apakah permintaan tersebut asinkron atau sinkron akan lebih mudah dipahami.
Menggabungkan keduanya biasanya menghasilkan sebaris kode seperti yang ditunjukkan pada Listing 9.
Listing 9. Buka
fungsi permintaan getCustomerInfo() {
var telepon = document.getElementById("telepon").nilai;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(telepon);
request.open("GET", url, benar);
}
Setelah Anda menyiapkan URL, sisanya mudah. Untuk sebagian besar permintaan, GET sudah cukup (Anda akan melihat kapan POST diperlukan di artikel selanjutnya), ditambah URL, dan hanya itu yang Anda perlukan untuk menggunakan metode open().
Asinkronisitas yang Menantang
Pada artikel berikutnya dalam seri ini, saya akan menghabiskan banyak waktu menulis dan menggunakan kode asinkron, namun Anda harus memahami mengapa parameter terakhir open() sangat penting. Dalam model permintaan/respons umum, seperti Web 1.0, klien (browser atau kode yang berjalan di mesin lokal) membuat permintaan ke server. Permintaannya bersifat sinkron, dengan kata lain klien menunggu respon dari server. Ketika klien sedang menunggu, Anda akan diberitahu tentang menunggu setidaknya dalam beberapa bentuk:
·Jam pasir (terutama pada Windows).
· Memutar bola (biasanya pada mesin Mac).
·Aplikasi pada dasarnya terhenti dan setelah beberapa saat kursor berubah.
Inilah sebabnya mengapa aplikasi Web terasa kikuk atau lambat—kurangnya interaktivitas yang sesungguhnya. Ketika tombol ditekan, aplikasi secara efektif menjadi tidak dapat digunakan hingga permintaan yang baru saja dipicu ditanggapi. Jika permintaan memerlukan banyak pemrosesan server, waktu tunggunya bisa lama (setidaknya di dunia multiprosesor, DSL-no-wait).
Permintaan asinkron tidak menunggu respons dari server. Aplikasi terus berjalan setelah mengirimkan permintaan. Pengguna masih bisa memasukkan data dalam formulir Web atau bahkan keluar dari formulir. Tidak ada bola berputar atau jam pasir, dan aplikasi tidak terasa membeku. Server secara diam-diam merespons permintaan tersebut, dan ketika selesai, memberitahukan pemohon awal bahwa pekerjaannya telah selesai (Anda akan melihat seberapa cepatnya). Hasilnya adalah aplikasi yang tidak terasa terlalu lamban atau lamban dan lebih responsif, interaktif, dan terasa jauh lebih cepat. Ini hanyalah salah satu bagian dari Web 2.0, namun merupakan bagian yang penting. Semua komponen GUI lama dan paradigma desain Web tidak dapat mengatasi model permintaan/respons yang lambat dan sinkron.
Mengirim Permintaan
Setelah dikonfigurasi dengan open(), Anda dapat mengirim permintaan. Untungnya, metode pengiriman permintaan memiliki nama yang lebih tepat daripada open(): yaitu send().
send() hanya memiliki satu parameter, yaitu konten yang akan dikirim. Namun sebelum mempertimbangkan metode ini, ingatlah bahwa Anda telah mengirimkan data melalui URL itu sendiri:
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
Meskipun Anda dapat menggunakan send() untuk mengirim data , Namun dimungkinkan juga untuk mengirim data melalui URL itu sendiri. Faktanya, dengan permintaan GET (yang terjadi di sekitar 80% aplikasi Ajax pada umumnya), mengirim data menggunakan URL jauh lebih mudah. Jika Anda perlu mengirim informasi aman atau XML, Anda mungkin ingin mempertimbangkan untuk menggunakan send() untuk mengirim konten (data aman dan pesan XML akan dibahas di artikel berikutnya dalam seri ini). Jika Anda tidak perlu meneruskan data melalui send(), cukup berikan null sebagai parameter metode ini. Jadi Anda akan menemukan bahwa hanya ini yang perlu Anda lakukan pada contoh di artikel ini (lihat Daftar 10).
Listing 10. Kirim
fungsi permintaan getCustomerInfo() {
var telepon = document.getElementById("telepon").nilai;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(telepon);
request.open("GET", url, benar);
permintaan.kirim(null);
}
Tentukan metode panggilan balik
Sangat sedikit hal yang baru, revolusioner, atau asinkron yang kami lakukan saat ini. Harus diakui bahwa kata kunci kecil "true" dalam metode open() membuat permintaan asinkron. Namun selain itu, kodenya tidak berbeda dengan pemrograman dengan Java servlet dan JSP, PHP, atau Perl. Jadi apa rahasia terbesar Ajax dan Web 2.0? Rahasianya terletak pada properti sederhana onreadystatechange dari XMLHttpRequest.
Pastikan untuk memahami alur dalam kode ini terlebih dahulu (tinjau Listing 10 jika perlu). Bangun permintaannya lalu buat permintaan tersebut. Selain itu, karena permintaannya tidak sinkron, metode JavaScript (getCustomerInfo() dalam contoh) tidak menunggu server. Jadi kode akan terus dieksekusi, yaitu metode akan keluar dan kontrol akan dikembalikan ke formulir. Pengguna dapat terus memasukkan informasi dan aplikasi tidak menunggu server.
Hal ini menimbulkan pertanyaan menarik: Apa yang terjadi setelah server menyelesaikan permintaan? Jawabannya adalah tidak terjadi apa-apa, setidaknya untuk kode saat ini! Jelas ini tidak akan berhasil, jadi server memerlukan semacam instruksi tentang apa yang harus dilakukan setelah selesai memproses permintaan yang dikirimkan melalui XMLHttpRequest.
Fungsi referensi dalam JavaScript:
JavaScript adalah bahasa yang diketik dengan lemah dan Anda dapat menggunakan variabel untuk mereferensikan apa pun. Jadi jika Anda mendeklarasikan fungsi updatePage(), JavaScript juga memperlakukan nama fungsi sebagai variabel. Dengan kata lain, Anda dapat mereferensikan fungsi dalam kode Anda menggunakan nama variabel updatePage.
Listing 11. Setel
fungsi metode panggilan balik getCustomerInfo() {
var telepon = document.getElementById("telepon").nilai;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(telepon);
request.open("GET", url, benar);
request.onreadystatechange = updatePage;
permintaan.kirim(null);
}
Penting untuk dicatat di mana dalam kode properti ini disetel - properti ini disetel sebelum send() dipanggil. Properti ini harus disetel sebelum mengirim permintaan sehingga server dapat melihatnya setelah menjawab permintaan yang telah selesai. Sekarang yang tersisa hanyalah menulis metode updatePage(), yang merupakan fokus bagian terakhir artikel ini.
Server pemrosesan merespons
permintaan tersebut, pengguna dengan senang hati menggunakan formulir Web (saat server memproses permintaan), dan sekarang server telah selesai memproses permintaan tersebut. Server melihat atribut onreadystatechange untuk menentukan metode mana yang akan dipanggil. Jika tidak, perlakukan aplikasi Anda seperti aplikasi lainnya, baik asinkron maupun tidak. Dengan kata lain, Anda tidak perlu melakukan tindakan khusus untuk menulis metode yang merespons ke server, Anda hanya perlu mengubah formulir, membiarkan pengguna mengunjungi URL lain, atau melakukan apa pun yang diperlukan server respons. Di bagian ini kami fokus pada respons ke server dan tindakan umum - mengubah bagian formulir yang dilihat pengguna secara instan.
Callback dan Ajax
Sekarang kita telah melihat bagaimana memberitahu server apa yang harus dilakukan ketika sudah selesai: atur properti onreadystatechange objek XMLHttpRequest ke nama fungsi yang akan dijalankan. Dengan cara ini, fungsi tersebut akan dipanggil secara otomatis setelah server memproses permintaan. Juga tidak perlu khawatir tentang parameter fungsi apa pun. Kita mulai dengan metode sederhana, ditunjukkan pada Listing 12.
Listing 12. Kode untuk metode panggilan balik
<skrip bahasa="javascript" type="teks/javascript">
var permintaan = salah;
mencoba {
permintaan = XMLHttpRequest baru();
} tangkap (cobamicrosoft) {
mencoba {
permintaan = new ActiveXObject("Msxml2.XMLHTTP");
} tangkapan (microsoft lainnya) {
mencoba {
permintaan = new ActiveXObject("Microsoft.XMLHTTP");
} tangkapan (gagal) {
permintaan = salah;
}
}
}
jika (!permintaan)
alert("Kesalahan saat menginisialisasi XMLHttpRequest!");
function getCustomerInfo() {
var telepon = document.getElementById("telepon").nilai;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(telepon);
request.open("GET", url, benar);
request.onreadystatechange = updatePage;
permintaan.kirim(null);
}
fungsi perbaruiHalaman() {
alert("Server selesai!");
}
</script>
Ini hanya mengeluarkan beberapa peringatan sederhana untuk memberi tahu Anda ketika server telah menyelesaikan tugasnya. Cobalah kode ini di halaman web Anda dan buka di browser (lihat Listing 8 jika Anda ingin melihat XHTML dalam contoh ini). Masukkan nomor telepon lalu keluar dari kolom, Anda akan melihat jendela peringatan pop-up (seperti yang ditunjukkan pada Gambar 3), tetapi klik OK dan itu akan muncul lagi...
Gambar 3. Kode Ajax untuk peringatan pop-up
Tergantung pada browsernya, Anda mungkin melihat dua, tiga, atau bahkan empat peringatan sebelum formulir berhenti muncul. Apa yang terjadi? Ternyata kita belum mempertimbangkan status kesiapan HTTP, yang merupakan bagian penting dari siklus permintaan/respons.
Status Siap HTTP
Seperti disebutkan sebelumnya, server mencari metode yang akan dipanggil dalam atribut onreadystatechange XMLHttpRequest setelah menyelesaikan permintaan. Ini benar, tetapi tidak lengkap. Faktanya, ia memanggil metode ini setiap kali status siap HTTP berubah. Apa artinya ini? Pertama, Anda harus memahami status kesiapan HTTP.
Status siap HTTP mewakili status atau kondisi permintaan. Ini digunakan untuk menentukan apakah permintaan telah dimulai, menerima respons, atau model permintaan/respons telah selesai. Ini juga dapat membantu menentukan apakah aman untuk membaca teks respons atau data yang disediakan oleh server. Ada lima status kesiapan yang harus diperhatikan dalam aplikasi Ajax:
·0: Permintaan belum dikeluarkan (sebelum open() dipanggil).
·1: Permintaan telah dibuat tetapi belum dikirim (sebelum send() dipanggil).
·2: Permintaan telah dikirim dan sedang diproses (header konten biasanya dapat diperoleh dari respons).
·3: Permintaan telah diproses dan beberapa data biasanya tersedia dalam respons, tetapi server belum menyelesaikan respons.
·4: Respons selesai dan Anda dapat mengakses respons server dan menggunakannya.
Seperti kebanyakan masalah lintas-browser, status siap ini tidak digunakan secara konsisten. Anda mungkin mengharapkan status kesiapan tugas berubah dari 0 ke 1, ke 2, ke 3, ke 4, namun hal ini jarang terjadi. Beberapa browser tidak pernah melaporkan 0 atau 1 tetapi langsung memulai dengan 2, lalu 3 dan 4. Browser lain melaporkan semua status. Yang lain melaporkan status siap 1 beberapa kali. Seperti yang terlihat di bagian sebelumnya, server memanggil updatePage() beberapa kali, dan kotak peringatan muncul setiap kali dipanggil - mungkin berbeda dari yang diharapkan!
Untuk pemrograman Ajax, satu-satunya state yang perlu ditangani secara langsung adalah ready state 4 yang menandakan respon server sudah selesai dan data respon aman digunakan. Berdasarkan hal ini, baris pertama dalam metode panggilan balik akan terlihat seperti Listing 13.
Listing 13. Memeriksa
fungsi kesiapan updatePage() {
if (request.readyState == 4)
alert("Server selesai!");
}
Setelah modifikasi, Anda dapat memastikan bahwa pemrosesan server telah selesai. Coba jalankan kode Ajax versi baru dan Anda sekarang akan melihat pesan peringatan hanya ditampilkan sekali, seperti yang diharapkan.
Kode Status HTTP
Meskipun kode di Listing 13 tampak baik-baik saja, ada masalah - bagaimana jika server merespons permintaan dan menyelesaikan pemrosesan tetapi melaporkan kesalahan? Sadarilah bahwa kode sisi server harus memahami bahwa kode tersebut dipanggil oleh Ajax, JSP, formulir HTML biasa, atau jenis kode lainnya, namun hanya dapat melaporkan informasi menggunakan metode khusus Web tradisional. Di dunia Web, kode HTTP dapat menangani berbagai masalah yang mungkin terjadi dalam permintaan.
Misalnya, Anda pasti pernah mengalami situasi di mana Anda memasukkan permintaan URL yang salah dan mendapatkan kode kesalahan 404, yang berarti halaman tersebut tidak ada. Ini hanyalah salah satu dari banyak kode kesalahan yang dapat diterima dengan permintaan HTTP (lihat tautan di Sumberdaya untuk daftar lengkap kode status). 403 dan 401, yang menunjukkan bahwa data yang diakses dilindungi atau dilarang, juga umum terjadi. Dalam kedua kasus tersebut, kode kesalahan ini diperoleh dari respons yang telah selesai. Dengan kata lain, server memenuhi permintaan (yaitu status siap HTTP adalah 4) tetapi tidak mengembalikan data yang diharapkan klien.
Jadi selain status siap, Anda juga perlu mengecek status HTTP. Kode status yang diharapkan adalah 200, artinya semuanya berjalan dengan baik. Jika status siap adalah 4 dan kode status 200, Anda dapat memproses data server, dan data tersebut harus berupa data yang diminta (bukan kesalahan atau informasi bermasalah lainnya). Oleh karena itu, kita juga perlu menambahkan pemeriksaan status pada metode callback, seperti yang ditunjukkan pada Listing 14.
Listing 14. Periksa fungsi kode status HTTP
updatePage() {
if (request.readyState == 4)
if (permintaan.status == 200)
alert("Server selesai!");
}
Untuk menambahkan penanganan kesalahan yang lebih kuat dan mencoba menghindari kerumitan yang berlebihan dengan menambahkan satu atau dua pemeriksaan kode status, lihat versi modifikasi dari updatePage() di Listing 15.
Listing 15. Tambahkan sedikit
fungsi pengecekan error updatePage() {
if (request.readyState == 4)
if (permintaan.status == 200)
alert("Server selesai!");
else if (permintaan.status == 404)
alert("URL Permintaan Tidak Ada");
kalau tidak
alert("Kesalahan: kode status adalah " + request.status);
}
Sekarang ubah URL di getCustomerInfo() menjadi URL yang tidak ada dan lihat apa yang terjadi. Anda akan melihat pesan peringatan yang menyatakan bahwa URL yang diminta tidak ada - bagus! Sulit untuk menangani semua kondisi kesalahan, tetapi perubahan kecil ini dapat mencakup 80% dari masalah dalam aplikasi web yang khas.
Membaca teks respons
sekarang memastikan bahwa permintaan telah diproses (melalui status siap), server memberikan respons normal (melalui kode status), dan akhirnya kami dapat memproses data yang dikembalikan oleh server. Data yang dikembalikan disimpan dalam properti responsetext dari objek XMLHTTPREQUEST.
Konten teks dalam responsEtext, seperti format dan panjang, sengaja dibiarkan tidak jelas. Dengan cara ini server dapat mengatur teks ke apa pun. Sebagai contoh, satu skrip mungkin mengembalikan nilai-nilai yang dipisahkan koma, yang lain menggunakan pipa (karakter | untuk memisahkan nilai, dan yang lain mengembalikan string teks panjang. Terserah server untuk memutuskan ke mana harus pergi.
Dalam contoh yang digunakan dalam artikel ini, server mengembalikan pesanan terakhir pelanggan dan alamat pelanggan, dipisahkan oleh karakter pipa. Pesanan dan alamat kemudian digunakan untuk mengatur nilai elemen dalam formulir.
Listing 16. Menangani
Fungsi Respons Server UpdatePage () {
if (request.readystate == 4) {
if (request.status == 200) {
var response = request.responsetext.split ("|");
document.geteLementById ("order"). value = response [0];
document.geteLementById ("alamat"). innerHtml =
respons [1] .replace (/ n/g, "");
} kalau tidak
alert ("Status adalah" + request.status);
}
}
Pertama, dapatkan responseText dan belahlah dari pipa menggunakan metode javascript split (). Array yang dihasilkan ditempatkan sebagai tanggapan. Nilai pertama dalam array - pesanan sebelumnya - diakses dengan respons [0] dan diatur ke nilai bidang dengan "urutan" id. Respons nilai kedua [1], alamat pelanggan, membutuhkan sedikit lebih banyak pemrosesan. Karena garis dalam alamat dipisahkan oleh pemisah garis normal (karakter " n"), kode perlu menggunakan pemisah garis gaya XHTML <BR /> sebagai gantinya. Proses penggantian dilakukan dengan menggunakan fungsi ganti () dan ekspresi reguler. Akhirnya, teks yang dimodifikasi digunakan sebagai HTML dalam dalam Formulir HTML Div. Hasilnya adalah formulir tiba -tiba diperbarui dengan informasi pelanggan, seperti yang ditunjukkan pada Gambar 4.
Gambar 4. Break Neck Form setelah menerima data pelanggan
Sebelum mengakhiri artikel ini, saya ingin memperkenalkan atribut penting lain dari XmlHttpRequest, responsexml. Properti ini berisi (seperti yang mungkin Anda duga) respons XML jika server memilih untuk menggunakan respons XML. Memproses respons XML sangat berbeda dari pemrosesan teks biasa, melibatkan penguraian, model objek dokumen (DOM), dan masalah lainnya. XML akan dibahas lebih lanjut dalam artikel selanjutnya. Tetapi karena ResponseXML biasanya dibahas bersama dengan responseText, layak disebutkan di sini. Untuk banyak aplikasi AJAX sederhana, responsEtext akan cukup, tetapi Anda akan segera melihat bahwa XML juga dapat ditangani dengan baik dengan aplikasi AJAX.
Kesimpulan
Anda mungkin sedikit bosan dengan XMLHTTPREQUEST. Tetapi Anda akan menggunakan objek ini lagi dan lagi di setiap halaman dan aplikasi yang Anda tulis menggunakan AJAX. Terus terang, ada sesuatu yang bisa dikatakan untuk xmlhttpRequest. Artikel berikutnya akan memperkenalkan cara menggunakan posting dan mendapatkan permintaan untuk mengatur header konten dalam permintaan dan membaca header konten dari respons server, dan memahami cara mengkodekan permintaan dan memproses XML dalam model permintaan/respons.
Nanti kami akan memperkenalkan kotak alat AJAX yang umum. Kotak alat ini sebenarnya menyembunyikan banyak detail yang dijelaskan dalam artikel ini, membuat pemrograman AJAX lebih mudah. Anda mungkin bertanya-tanya mengapa Anda perlu mengkode detail tingkat rendah ketika ada begitu banyak kotak alat di luar sana. Jawabannya adalah sulit untuk menemukan masalah dalam suatu aplikasi tanpa mengetahui apa yang dilakukan aplikasi.
Jadi jangan abaikan detailnya atau sekadar menelusuri, dan jika ada yang salah dengan kotak alat yang berguna dan indah ini, Anda tidak perlu menggaruk kepala Anda atau mengirim email untuk mendukung. Jika Anda memahami cara menggunakan XMLHTTPREQUEST secara langsung, Anda akan merasa mudah untuk men -debug dan memecahkan masalah paling aneh. Kotak alat hanya bagus jika Anda membiarkannya menyelesaikan masalah Anda.
Jadi tolong biasakan diri Anda dengan XMLHTTPREQUEST. Bahkan, jika Anda memiliki kode AJAX yang menggunakan kotak alat, coba tulis ulang menggunakan objek XMLHTTPREQuest dan sifat dan metodenya. Ini adalah latihan yang baik untuk membantu Anda lebih memahami prinsip -prinsipnya.
Artikel berikutnya akan membahas objek ini lebih lanjut, mengeksplorasi beberapa properti yang lebih menarik (seperti ResponseXML), dan cara menggunakan permintaan pos dan mengirim data dalam format yang berbeda. Harap mulai menulis kode dan kami akan membahasnya lagi dalam sebulan.