Apa yang akan saya bicarakan ini sangat mendasar, jadi sebaiknya para ahli tidak membacanya. Pemula atau orang yang belum tahu banyak tentang pengetahuan tingkat rendah dapat membacanya untuk membantu pemahaman dan ingatannya.
Objek XMLHttpRequest adalah inti dari fungsi AJAX. Untuk mengembangkan program AJAX, Anda harus mulai dengan memahami objek XMLHttpRequest.
Untuk memahami objek XMLHttpRequest, mulailah dengan membuat objek XMLHttpRequest. Membuat objek XMLHttpRequest di browser yang berbeda menggunakan metode yang berbeda:
pertama lihat metode IE membuat objek XMLHttpRequest (Metode 1):
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP" ); //Gunakan versi IE yang lebih baru untuk membuat objek yang kompatibel dengan IE (Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Gunakan versi IE yang lebih lama untuk membuat objek yang kompatibel dengan IE (Microsoft.XMLHTTP)
Mozilla, Opera, Safari dan sebagian besar browser non-IE menggunakan metode berikut (Metode 2) untuk membuat objek XMLHttpRequest:
var xmlhttp = new XMLHttpRequest();
Internet Explorer sebenarnya menggunakan objek yang disebut XMLHttp dan bukan objek XMLHttpRequest, yang digunakan oleh Mozilla, Opera, Safari, dan sebagian besar browser non-Microsoft (selanjutnya secara kolektif disebut sebagai objek XMLHttpRequest). IE7 juga mulai menggunakan objek XMLHttpRequest.
Jika browser yang berbeda menggunakan metode yang salah saat membuat objek XMLHttpRequest, browser akan melaporkan kesalahan dan objek tersebut tidak dapat digunakan. Jadi kita memerlukan metode untuk membuat objek XMLHttpRequest yang kompatibel dengan berbagai browser:
Buat metode objek XMLHttpRequest yang kompatibel dengan beberapa browser
var xmlhttp = false; //Buat permintaan variabel baru dan berikan nilai false. Gunakan false sebagai kondisi penilaian, yang berarti objek XMLHttpRequest belum dibuat.
fungsi BuatXMLHttp(){
mencoba{
xmlhttp = new XMLHttpRequest(); //Coba buat objek XMLHttpRequest. Kecuali IE mendukung metode ini.
}
menangkap (e){
mencoba{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Gunakan versi IE yang lebih baru untuk membuat objek yang kompatibel dengan IE (Msxml2.XMLHTTP)
}
menangkap (e){
mencoba{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Gunakan versi IE yang lebih lama untuk membuat objek yang kompatibel dengan IE (Microsoft.XMLHTTP).
}
menangkap (gagal){
xmlhttp = false; //Jika gagal, pastikan nilai permintaan masih salah.
}
}
}
kembalikan xmlhttp;
}
Sangat mudah untuk menilai apakah pembuatan berhasil
jika (!xmlhttp){
//Gagal membuat objek XMLHttpRequest!
}
kalau tidak{
//Berhasil dibuat!
}
Setelah membuat objek XMLHttpRequest, mari kita lihat metode, properti, dan event handler onreadystatechange yang paling penting dari objek ini.
Metode:
open() Deskripsi: Inisialisasi parameter permintaan HTTP, seperti URL dan metode HTTP, tetapi jangan mengirim permintaan.
abort() Deskripsi: Membatalkan respons saat ini, menutup koneksi, dan mengakhiri aktivitas jaringan yang tertunda.
getAllResponseHeaders() Deskripsi: Mengembalikan header respons HTTP sebagai string yang belum diurai.
getResponseHeader() Deskripsi: Mengembalikan nilai header respons HTTP yang ditentukan.
send() Deskripsi: Mengirim permintaan HTTP, menggunakan parameter yang diteruskan ke metode open(), dan isi permintaan opsional diteruskan ke metode tersebut.
setRequestHeader() Deskripsi: Menyetel atau menambahkan permintaan HTTP ke permintaan terbuka namun tidak terkirim.
Atribut:
readyState Deskripsi: Status permintaan HTTP.
responTeks Deskripsi: Isi respons (tidak termasuk header) yang diterima oleh server sejauh ini, atau string kosong jika tidak ada data yang diterima.
responXML Deskripsi: Respons terhadap permintaan, diurai menjadi XML dan dikembalikan sebagai objek Dokumen.
status Deskripsi: Kode status HTTP dikembalikan oleh server.
statusTeks Deskripsi: Atribut ini menentukan kode status HTTP permintaan menggunakan nama, bukan nomor.
onreadystatechange adalah fungsi event handler yang dipanggil setiap kali properti readyState berubah.
Mari kita pahami objek XMLHttpRequest dari proses pengiriman permintaan dan pemrosesan hasil permintaan.
Biasanya, objek XMLHttpRequest dibuat sebelum mengirim permintaan. Tidak perlu menulis kode lagi jika sudah ada.
Hasilkan objek XMLHttpRequest
var xmlhttp = CreateXMLHttp();
Setelah membuat objek XMLHttpRequest, ke website mana kita ingin mengirim permintaan? Mari kita pilih RSS di beranda taman blog. Lalu bagaimana cara mengatur alamat website yang ingin saya minta?
buka (metode, url, async, nama pengguna, kata sandi)
Metode ini memiliki 5 parameter. Anda dapat melihat arti spesifiknya di sini: http://www.w3school.com.cn/xmldom/dom_http.asp
Inilah yang kami gunakan.
xmlHttp.open("dapatkan"," http://www.cnblogs.com",benar );
Parameter get artinya menggunakan metode get, yang kedua tentu saja alamat targetnya, yang ketiga berarti apakah asynchronous. Deskripsi parameter spesifik juga dapat ditemukan di http://www.w3school.com.cn .
Oke, tujuannya sudah ditentukan, bagaimana cara mengirimkannya. Gunakan metode kirim().
send(body), metode send() hanya memiliki satu parameter, yang mewakili objek DOM ini perlu menjelaskan banyak hal Lain kali, hari ini kita hanya perlu menulis
xmlhttp.kirim(null);
Itu saja. Oke, sudah terkirim, jadi bagaimana menangani hasil yang dikembalikan? Saat ini, objek XMLHttpRequest yang paling penting digunakan, yaitu event handle onreadystatechange. Apa artinya? Lalu kita perlu menjelaskan readyState dari objek XMLHttpRequest. Ada 5 status readyState, yang masing-masing diwakili oleh angka 0 hingga 4.
Deskripsi Nama Status
0 Status Inisialisasi Tidak Diinisialisasi. Objek XMLHttpRequest telah dibuat (sebelum open() dipanggil) atau direset dengan metode abort().
1 Buka Metode open() dipanggil, namun metode send() tidak dipanggil. Permintaannya belum terkirim.
2 Metode Terkirim Kirim() telah dipanggil dan permintaan HTTP telah dikirim ke server Web. Tidak ada tanggapan yang diterima.
3 Menerima Semua header respons telah diterima. Badan tanggapan mulai diterima tetapi belum selesai.
4 Respons HTTP yang dimuat telah diterima sepenuhnya.
Namun, perlu diperhatikan bahwa status yang dapat ditangani oleh browser berbeda dalam penanganan peristiwa onreadystatechange tidak konsisten. IE dan FireFox dapat menangani status 1 hingga 4, sedangkan Safari dapat menangani status 2 hingga 4, dan Opera dapat menangani status 3 dan 4. . Status 0 pada dasarnya tidak berguna, karena metode open() akan dipanggil segera setelah objek XMLHttpRequest dibuat, dan statusnya akan menjadi 1 saat ini, kecuali tentu saja Anda ingin menentukan apakah objek tersebut telah dibatalkan atau dibatalkan (), namun situasi ini masih sangat jarang terjadi. Dalam kebanyakan kasus, cukup menentukan apakah statusnya 4 (diterima dan selesai).
Oke, saya mengerti bahwa readyState memiliki 5 status. Kemudian hasil pengembalian pemrosesan adalah untuk melihat apakah status berubah ke status yang berbeda dan kita dapat melakukan pemrosesan yang berbeda. Bagaimana cara memberitahu objek XMLHttpRequest siapa yang harus menangani perubahan tersebut ketika status berubah. Ada dua cara penulisan, yang pertama menggunakan metode anonim, yang lainnya adalah dengan menentukan metode. Sebenarnya, keduanya hanyalah metode penulisan yang berbeda dengan efek yang sama. Lihatlah kodenya:
xmlhttp.onReadyStateChange = function (){
//Kode untuk menangani perubahan status
}
//atau
xmlhttp.onReadyStateChange = getHasil;
fungsi dapatkanHasil(){
///Kode untuk menangani perubahan status
}
//Ngomong-ngomong, nama pegangannya relatif panjang. Anda dapat mengingatnya seperti ini. Pada ReadyState Change berarti permintaan dikirim ketika status pembacaan berubah, dan metode pemrosesan juga ditentukan Cara mendapatkan pengembaliannya konten? Ada dua atribut: responText dan responXML. Untuk digunakan, responXML adalah objek yang dikembalikan dan perlu diuraikan nanti.
alert(xmlhttp.responseText); //Lihat apakah kode HTML beranda dikembalikan. Andalah yang berhasil.
Seluruh prosesnya adalah: membuat objek XMLHttpRequest -> tentukan alamat pengiriman dan metode pengiriman -> kirim permintaan -> tentukan metode pemrosesan dan proses hasil pengembalian. Namun perlu dicatat bahwa pemahaman normal kita adalah ini, tetapi metode pemrosesan yang ditentukan dari penanganan peristiwa onreadystatechange perlu ditentukan sebelum pengiriman, jika tidak, peristiwa perubahan status tidak dapat diproses.
Jadi kita harus mengingatnya sesuai dengan proses berikut: buat objek XMLHttpRequest -> tentukan alamat pengiriman dan metode pengiriman -> tentukan metode pemrosesan perubahan status -> kirim permintaan Setelah permintaan dikirim, metode pemrosesan yang ditentukan akan otomatis dipanggil ketika statusnya berubah.
Oke, mari kita lihat kode yang sudah selesai.
kode yang sudah selesai
var xmlhttp = false; //Buat permintaan variabel baru dan berikan nilai false. Gunakan false sebagai kondisi penilaian, yang berarti objek XMLHttpRequest belum dibuat.
fungsi BuatXMLHttp(){
mencoba{
xmlhttp = new XMLHttpRequest(); //Coba buat objek XMLHttpRequest. Kecuali IE mendukung metode ini.
}
menangkap (e){
mencoba{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Gunakan versi IE yang lebih baru untuk membuat objek yang kompatibel dengan IE (Msxml2.XMLHTTP)
}
menangkap (e){
mencoba{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Gunakan versi IE yang lebih lama untuk membuat objek yang kompatibel dengan IE (Microsoft.XMLHTTP).
}
menangkap (gagal){
xmlhttp = false; //Jika gagal, pastikan nilai permintaan masih salah.
}
}
}
kembalikan xmlhttp;
}
xmlhttp = BuatXMLHttp();
xmlhttp.open("dapatkan"," http://www.cnblogs.com",benar );
xmlhttp.onReadyStateChange = getHasil;
xmlhttp.kirim(null);
fungsi dapatkanHasil(){
if(xmlhttp.readyState == 4){
peringatan(xmlhttp.responseText);
}
}
Segalanya tampaknya baik-baik saja, tetapi pernahkah Anda berpikir tentang apa yang akan terjadi jika kode HTML salah selama transmisi jaringan, atau alamat yang kami tentukan menjadi tidak valid. Saat ini, Anda perlu menggunakan atribut status, yang merupakan kode status HTTP yang dikembalikan oleh server. Jika xmlhttp.status sama dengan 200 berarti proses transmisi selesai dan bebas error. Untuk arti spesifik dari kode status HTTP, Anda dapat mengunjungi situs web organisasi W3C untuk melihat alamat http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 .
Saya pikir tidak apa-apa untuk menulis metode getResult() sebagai berikut.
fungsi dapatkanHasil(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
peringatan(xmlhttp.responseText);
}
}
Oke, sesuatu yang awalnya cukup sederhana ternyata menjadi sangat bertele-tele setelah saya banyak menulis tentangnya. Namun, menurut saya sangat penting untuk memahami konten dasar pemrograman. Saat ini, banyak perpustakaan JS yang digunakan untuk mengembangkan program AJAX, dan tidak perlu menulis kode dasar seperti itu secara langsung. Misalnya, jika kita menggunakan jQuery yang terkenal, tetapi jika kita memiliki pemahaman yang baik tentang hal-hal mendasar, maka perpustakaan ini melaporkan kesalahan, atau jika ada masalah, kita dapat mengetahui di mana letak kesalahannya dengan sangat cepat, dan melakukan perubahan lebih cepat pada membuat program berjalan normal.