[Belajar Ajax dalam Empat Hari] Pada hari kedua mempelajari tutorial Ajax, JavaScript dan Ajax membuat permintaan asinkron

Masukkan nomor telepon Anda:
onChange="dapatkanInfo Pelanggan();" />

Pesanan Anda akan dikirimkan

Ketik pesanan Anda di sini:

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

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!");
}

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
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.