Teknologi (alat) penting yang digunakan saat mendesain AJAX adalah objek XMLHTTPRequest. Objek XMLHttpRequest adalah landasan teknis untuk semua aplikasi AJAX dan Web 2.0 saat ini. Meskipun vendor perangkat lunak dan komunitas sumber terbuka kini menyediakan berbagai kerangka kerja AJAX untuk lebih menyederhanakan penggunaan objek XMLHttpRequest, namun kita masih perlu memahami properti dan metode objek ini;
1. Apa yang dimaksud dengan objek XMLHTTPRequest?
Definisi paling umum adalah: XmlHttp adalah sekumpulan API yang dapat mengirimkan atau menerima XML dan data lainnya melalui protokol http dalam JavaScript, VbScript, Jscript, dan bahasa skrip lainnya. Kegunaan terbesar XmlHttp adalah dapat memperbarui sebagian konten halaman web tanpa menyegarkan seluruh halaman. (Fungsi ini adalah salah satu fitur utama AJAX)
Penjelasan dari MSDN: XmlHttp menyediakan protokol bagi klien untuk berkomunikasi dengan server http. Klien dapat mengirim permintaan ke server http melalui objek XmlHttp (MSXML2.XMLHTTP.3.0) dan menggunakan Model Objek Dokumen Microsoft XML Microsoft? XML Document Object Model (DOM) untuk memproses respons.
Biarkan saya ngelantur di sini. Sebenarnya, hal ini telah muncul sangat awal. Namun, dukungan browser di masa lalu tidak cukup. Ini hanya didukung di IE, jadi sebagian besar pemrogram WEB tidak terlalu banyak menggunakannya banyak berubah. , Mozilla dan Safari mengadopsinya sebagai standar de facto, dan browser utama mulai mendukung objek XMLHTTPRequest. Namun yang perlu ditekankan di sini adalah XMLHTTPRequest belum menjadi standar W3C, sehingga performa di berbagai browser sedikit berbeda.
2. Membuat objek XMLHTTPRequest
Berbicara tentang perbedaannya, mari kita lihat cara mendeklarasikan (menggunakannya). Sebelum menggunakan objek XMLHTTPRequest untuk mengirim permintaan dan memproses respons, kita harus menggunakan javascript untuk membuat objek XMLHTTPRequest. (IE mengimplementasikan XMLHTTPRequest sebagai objek ActiveX, dan browser lain [seperti Firefox/Safari/Opear] mengimplementasikannya sebagai objek javascript asli). Mari kita lihat cara menggunakan JavaScript untuk membuatnya:
Berikut kutipannya:
<skrip bahasa="javascript" type="teks/javascript">
<!--
var xmlhttp;
//Buat objek XMLHTTPRequest
fungsi buatXMLHTTPRequest(){
if(window.ActiveXObject){ // Tentukan apakah kontrol ActiveX didukung
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // Membuat objek XMLHTTPRequest dengan membuat instance baru dari ActiveXObject
}
else if(window.XMLHTTPRequest){ // Tentukan apakah akan mengimplementasikan XMLHTTPRequest sebagai objek javascript lokal
xmlhttp = new XMLHTTPRequest(); // Membuat instance XMLHTTPRequest (objek javascript lokal)
}
}
//-->
</script>3. Atribut dan metode. Karena terlalu banyak hal, saya akan menggunakan halaman ini untuk membuat daftar metode dan atribut. Saya akan memberikan contoh detailnya nanti (terutama karena saya juga sedang belajar).
<html>
<kepala>
<title>Deskripsi DEMO objek XMLHTTPRequest</title>
<skrip bahasa="javascript" type="teks/javascript">
<!--
var xmlhttp;
//Buat objek XMLHTTPRequest
fungsi buatXMLHTTPRequext(){
if(jendela.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
else if(window.XMLHTTPRequest){
xmlhttp = XMLHTTPRequest baru();
}
}
fungsi PostOrder(xmldoc)
{
buatXMLHTTPRequext();
// Metode: buka
//Buat permintaan http baru dan tentukan metode permintaan, URL, dan informasi verifikasi
// Sintaks: oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
//parameter
// metode bstr
//metode http, seperti: POST, GET, PUT dan PROPFIND. Ketidakpekaan huruf besar/kecil.
// bstrUrl
//Alamat URL yang diminta dapat berupa alamat absolut atau alamat relatif.
// varAsync[opsional]
// Tipe Boolean, menentukan apakah permintaan ini asinkron. Defaultnya adalah true. Jika benar, fungsi panggilan balik yang ditentukan oleh atribut onreadystatechange akan dipanggil ketika status berubah.
// bstrUser[opsional]
// Jika server memerlukan verifikasi, tentukan nama pengguna di sini. Jika tidak ditentukan, jendela verifikasi akan muncul ketika server memerlukan verifikasi.
// bstrKata Sandi[opsional]
// Bagian kata sandi dari informasi verifikasi. Jika nama pengguna kosong, nilai ini akan diabaikan.
// Catatan: Setelah memanggil metode ini, Anda dapat memanggil metode kirim untuk mengirim data ke server.
xmlhttp.Open("dapatkan", " http://localhost/example.htm ", false);
// var buku = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
// peringatan(buku.xml);
// Atribut: onreadystatechange
//onreadystatechange: Menentukan event handler ketika properti readyState berubah
// Sintaks: oXMLHttpRequest.onreadystatechange = funcMyHandler;
// Contoh berikut menunjukkan pemanggilan fungsi HandleStateChange ketika properti readyState dari objek XMLHTTPRequest berubah.
// Saat data diterima (readystate == 4) tombol di halaman ini akan diaktifkan
// Catatan: Properti ini hanya dapat ditulisi dan merupakan perpanjangan dari Model Objek Dokumen W3C.
xmlhttp.onreadystatechange= HandleStateChange;
// Metode: kirim
//Kirim permintaan ke server http dan terima respons
// Sintaks: oXMLHttpRequest.send(varBody);
// Parameter: varBody (Data yang akan dikirim melalui permintaan ini.)
// Catatan: Mode sinkron atau asinkron dari metode ini bergantung pada parameter bAsync dalam metode terbuka. Jika bAsync == False, metode ini akan menunggu permintaan selesai atau batas waktu sebelum kembali akan segera kembali.
// Metode ini mengambil satu parameter opsional, yaitu requestBody yang akan digunakan. Jenis input VARIANT yang dapat diterima adalah BSTR, SAFEARRAY dari UI1 (byte yang tidak ditandatangani), IDispatch ke objek XML Document Object Model (DOM), dan IStream * gunakan hanya pengkodean potongan (untuk pengiriman) saat mengirim tipe input IStream *. Komponen secara otomatis menyetel header Panjang Konten untuk semua kecuali tipe input IStream *.
// Jika data yang dikirim adalah BSTR, responsnya dikodekan sebagai utf-8, dan header tipe dokumen yang berisi rangkaian karakter harus disetel pada posisi yang sesuai.
// Jika tipe inputnya adalah SAFEARRAY dari UI1, respons dikirim apa adanya tanpa pengkodean tambahan. Pemanggil harus menyetel header Tipe Konten dengan tipe konten yang sesuai.
// Jika data yang dikirim adalah objek XML DOM, respons akan dikodekan ke pengkodean yang dinyatakan dalam dokumen xml. Jika tidak ada pengkodean yang dideklarasikan dalam dokumen xml, UTF-8 default akan digunakan.
// Jika tipe inputnya adalah IStream *, respons dikirim apa adanya tanpa pengkodean tambahan. Pemanggil harus menyetel header Tipe Konten dengan tipe konten yang sesuai.
xmlhttp.Kirim(xmldoc);
// Metode: getAllResponseHeaders
// Dapatkan semua header http dari responsnya
// Sintaks: strValue = oXMLHttpRequest.getAllResponseHeaders();
// Catatan: Setiap nama dan nilai header http dipisahkan dengan titik dua dan diakhiri dengan rn. Metode ini hanya dapat dipanggil setelah metode pengiriman selesai.
peringatan(xmlhttp.getAllResponseHeaders());
// Metode: getResponseHeader
// Dapatkan header http yang ditentukan dari informasi respons
// Sintaks: strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// Catatan: Metode ini hanya dapat dipanggil setelah metode pengiriman berhasil. Jika jenis dokumen yang dikembalikan oleh server adalah "teks/xml", maka kalimat ini
// xmlhttp.getResponseHeader("Content-Type"); akan mengembalikan string "teks/xml". Anda dapat menggunakan metode getAllResponseHeaders untuk mendapatkan informasi header http lengkap.
alert(xmlhttp.getResponseHeader("Content-Type")); // Keluarkan kolom Content-Type di header http: versi dan nama server web saat ini.
document.frmTest.myButton.disabled = benar;
// Metode: batalkan
//Batalkan permintaan saat ini
// Sintaks: oXMLHttpRequest.abort();
// Catatan: Setelah memanggil metode ini, permintaan saat ini mengembalikan status UNINITIALIZED.
//xmlhttp.batalkan();
// Metode: setRequestHeader
// Tentukan secara terpisah header http tertentu dari permintaan tersebut
// Sintaks: oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
// Parameter: bstrHeader (String, nama header.)
// bstrValue(String, nilai.)
// Catatan: Jika header http dengan nama ini sudah ada, maka akan ditimpa. Metode ini harus dipanggil setelah metode terbuka.
// xmlhttp.setRequestHeader(bstrHeader, bstrValue);
}
fungsi HandleStateChange()
{
//Atribut: readyState
// Mengembalikan status permintaan XMLHTTP saat ini
// Sintaks: lValue = oXMLHttpRequest.readyState;
// Keterangan: Variabel, atribut ini bersifat read-only, dan statusnya diwakili oleh bilangan bulat dengan panjang 4. Definisinya sebagai berikut:
// 0 (tidak diinisialisasi) Objek telah dibuat, tetapi belum diinisialisasi (metode terbuka belum dipanggil)
// 1 (inisialisasi) Objek telah dibuat dan metode pengiriman belum dipanggil.
// 2 (Kirim data) Metode pengiriman telah dipanggil, namun status saat ini dan header http tidak diketahui
// 3 (Data sedang dikirim) Sebagian data telah diterima. Karena respon dan header http tidak lengkap, kesalahan akan terjadi saat memperoleh sebagian data melalui responBody dan responText.
// 4 (Lengkap) Penerimaan data selesai. Saat ini, data respon lengkap dapat diperoleh melalui responBody dan responText.
jika (xmlhttp.readyState == 4){
document.frmTest.myButton.disabled = salah;
// Atribut: responBody
// Mengembalikan data respon server dalam format tertentu
// Sintaks: strValue = oXMLHttpRequest.responseBody;
// Keterangan: Variabel, properti ini hanya dapat dibaca dan mewakili data biner yang belum didekodekan yang dikembalikan langsung dari server dalam format array yang tidak ditandatangani.
peringatan(xmlhttp.responseBody);
//Properti: responStream
//Kembalikan informasi respon dalam bentuk objek Ado Stream
// Sintaks: strValue = oXMLHttpRequest.responseStream;
// Keterangan: Variabel, properti ini bersifat read-only dan mengembalikan informasi respon dalam bentuk objek Ado Stream.
peringatan(xmlhttp.responseStream);
//Atribut: responTeks
// Mengembalikan informasi respons sebagai string
// Sintaks: strValue = oXMLHttpRequest.responseText;
// Keterangan: Variabel, properti ini hanya dapat dibaca dan mengembalikan informasi respons sebagai string. XMLHTTP mencoba memecahkan kode informasi respons menjadi string Unicode,
// XMLHTTP menyetel pengkodean data respons ke UTF-8 secara default Jika data yang dikembalikan oleh server berisi BOM (tanda urutan byte), XMLHTTP bisa
// Untuk memecahkan kode data UCS-2 (big atau little endian) atau UCS-4. Perhatikan bahwa jika server mengembalikan dokumen xml, atribut ini
// Properti tidak menangani deklarasi pengkodean dalam dokumen xml. Anda perlu menggunakan responXML untuk menanganinya.
peringatan(xmlhttp.responseText);
//Atribut: responXML
//Format informasi respon ke dalam objek Dokumen Xml dan kembalikan
// Sintaks: var objDispatch = oXMLHttpRequest.responseXML;
// Keterangan: Variabel, properti ini hanya-baca, format informasi respons ke dalam objek Dokumen Xml dan kembalikan. Jika data respons bukan dokumen XML yang valid,
// Properti ini sendiri tidak mengembalikan XMLDOMParseError, dan informasi kesalahan dapat diperoleh melalui objek DOMDocument yang diproses.
alert("Hasil = " + xmlhttp.responseXML.xml);
//Atribut: status
// Mengembalikan kode status http dari permintaan saat ini
// Sintaks: lValue = oXMLHttpRequest.status;
// Nilai yang dikembalikan: kode status http standar panjang, didefinisikan sebagai berikut:
//Nomor:Deskripsi
// 100: Lanjutkan
// 101: Peralihan protokol
// 200: Oke
// 201: Dibuat
// 202: Diterima
// 203:Informasi Non-Resmi
// 204:Tidak Ada Konten
// 205: Atur Ulang Konten
// 206: Konten Sebagian
// 300:Pilihan Ganda
// 301: Dipindahkan Secara Permanen
// 302: Ditemukan
// 303: Lihat Lainnya
// 304: Tidak Dimodifikasi
// 305:Gunakan Proksi
// 307: Pengalihan Sementara
// 400: Permintaan Buruk
// 401: Tidak sah
// 402: Pembayaran Diperlukan
// 403:Dilarang
// 404: Tidak Ditemukan
// 405:Metode Tidak Diizinkan
// 406: Tidak Dapat Diterima
// 407: Diperlukan Otentikasi Proxy
// 408: Batas Waktu Permintaan
// 409:Konflik
// 410: Hilang
// 411: Panjang yang Dibutuhkan
// 412: Prakondisi Gagal
// 413: Entitas Permintaan Terlalu Besar
// 414:Permintaan-URI Terlalu Panjang
// 415:Jenis Media Tidak Didukung
// 416: Rentang yang Diminta Tidak Cocok
// 417: Ekspektasi Gagal
// 500: Kesalahan Server Internal
// 501: Tidak Diimplementasikan
// 502: Gerbang Buruk
// 503: Layanan Tidak Tersedia
// 504: Batas Waktu Gateway
// 505:Versi HTTP Tidak Didukung
// Catatan: bilangan bulat panjang, properti ini bersifat read-only dan mengembalikan kode status http dari permintaan saat ini. Properti ini hanya dapat diperoleh setelah data dikirim dan diterima.
peringatan(xmlhttp.status);
//Atribut: statusTeks
// Mengembalikan status baris respons dari permintaan saat ini
// Sintaks: strValue = oXMLHttpRequest.statusText;
// Keterangan: String, properti ini hanya dapat dibaca. Properti ini mengembalikan status baris respons dari permintaan saat ini di BSTR.
peringatan(xmlhttp.statusTeks);
}
}
//-->
</skrip>
</kepala>
<tubuh>
<nama formulir="frmTest">
<input name="myButton" type="button" value="Klik Saya" onclick="PostOrder('http://localhost/example.htm');">
</bentuk>
</tubuh>
</html>