XMLHTTPREQUEST adalah antarmuka browser yang memungkinkan JavaScript untuk melakukan komunikasi HTTP.
Pada awalnya, Microsoft memperkenalkan antarmuka ini di IE 5. Karena sangat berguna, browser lain telah ditiru dan digunakan, sehingga operasi AJAX lahir.
Namun, antarmuka ini belum distandarisasi, dan implementasi setiap browser lebih atau kurang berbeda. Setelah konsep HTML 5 dibentuk, W3C mulai mempertimbangkan menstandarkan antarmuka ini. Pada bulan Februari 2008, draft level 2 XMLHTTPREADest diusulkan.
Versi baru XMLHTTPREQUEST ini mengusulkan banyak fitur baru yang berguna yang akan sangat mempromosikan inovasi internet. Artikel ini memperkenalkan versi baru ini secara detail.
1. Objek XMLHTTPREQuest versi lama
Sebelum memperkenalkan versi baru, mari kita tinjau penggunaan versi lama.
Pertama, buat instance baru XmlhttpRequest.
var xhr = xmlhttpRequest baru ();
Kemudian, permintaan HTTP dikeluarkan untuk host jarak jauh.
Salinan kode adalah sebagai berikut:
xhr.open ('get', 'example.php');
xhr.send ();
Kemudian, tunggu host jarak jauh merespons. Pada saat ini, Anda perlu memantau perubahan status objek XMLHTTPREQUEST dan menentukan fungsi callback.
xhr.onReadyStateChange = function () {if (xhr.readystate == 4 && xhr.status == 200) {alert (xhr.responsetext); } else {alert (xhr.statustext); }};Kode di atas berisi properti utama dari objek XMLHTTPREQuest yang lama:
Salinan kode adalah sebagai berikut:
* XHR.ReadyState: Status objek XMLHTTPREQUEST, sama dengan 4 berarti data telah diterima.
* xhr.status: Kode status yang dikembalikan oleh server, sama dengan 200 berarti semuanya normal.
* xhr.responsetext: data teks dikembalikan oleh server
* xhr.responsexml: Data format XML dikembalikan oleh server
* xhr.statustext: Teks status yang dikembalikan oleh server.
2. Kerugian dari versi lama
Versi lama objek XMLHTTPREQUEST memiliki kerugian berikut:
* Hanya transmisi data teks yang didukung dan tidak dapat digunakan untuk membaca dan mengunggah file biner.
* Saat mengirimkan dan menerima data, tidak ada informasi kemajuan, sehingga Anda hanya dapat meminta apakah itu telah selesai.
* Karena "kebijakan asal yang sama", Anda hanya dapat meminta data dari server dengan nama domain yang sama.
3. Fungsi versi baru
Versi baru dari objek XMLHTTPREQUEST telah membuat peningkatan yang signifikan untuk kekurangan versi lama.
Salinan kode adalah sebagai berikut:
* Anda dapat menetapkan batas waktu untuk permintaan HTTP.
* Objek FormData dapat digunakan untuk mengelola data formulir.
* File dapat diunggah.
* Anda dapat meminta data dengan nama domain yang berbeda (permintaan lintas domain).
* Anda bisa mendapatkan data biner di sisi server.
* Anda dapat memperoleh informasi kemajuan dari transmisi data.
Selanjutnya, saya akan memperkenalkan fitur -fitur baru ini satu per satu.
4. Batas Waktu untuk Permintaan HTTP
Terkadang, operasi AJAX memakan waktu dan tidak mungkin untuk memprediksi berapa banyak waktu yang dibutuhkan. Jika kecepatan internet sangat lambat, pengguna mungkin harus menunggu lama.
Versi baru dari objek XMLHTTPREQUEST telah menambahkan atribut batas waktu, yang dapat menetapkan batas waktu untuk permintaan HTTP.
xhr.timeout = 3000;
Pernyataan di atas menetapkan waktu tunggu maksimum menjadi 3000 milidetik. Setelah batas waktu ini berlalu, permintaan HTTP akan dihentikan secara otomatis. Ada juga acara batas waktu yang menentukan fungsi callback.
Salinan kode adalah sebagai berikut:
xhr.onTimeout = function (event) {
waspada ('permintaan batas waktu!');
}
Saat ini, Opera, Firefox, dan IE 10 mendukung properti ini. Properti IE 8 dan IE ini milik objek XDomainRequest, sementara Chrome dan Safari tidak mendukungnya.
5. Objek Formdata
Operasi AJAX sering digunakan untuk melewati data formulir. Untuk memfasilitasi pemrosesan bentuk, HTML 5 telah menambahkan objek FormData ke bentuk tiruan.
Pertama, buat objek FormData baru.
var formdata = formData baru ();
Kemudian, tambahkan item formulir ke dalamnya.
formdata.append ('nama pengguna', 'Zhang san');
formdata.append ('id', 123456);
Akhirnya, secara langsung mengirimkan objek FormData ini. Ini persis sama dengan mengirimkan formulir web.
xhr.send (formdata);
Objek FormData juga dapat digunakan untuk mendapatkan nilai formulir web.
Salinan kode adalah sebagai berikut:
var form = document.geteLementById ('myForm');
var formdata = FormData baru (form);
formdata.append ('Secret', '123456'); // tambahkan item formulir
xhr.open ('pos', form.action);
xhr.send (formdata);
6. Unggah file
Versi baru dari objek XMLHTTPREQUEST tidak hanya dapat mengirim informasi teks, tetapi juga mengunggah file.
Dengan asumsi file adalah elemen form (input [type = "file"]) dari "pilih file", kami memuatnya ke objek FormData.
Salinan kode adalah sebagai berikut:
var formdata = formData baru ();
untuk (var i = 0; i <file.length; i ++) {
formdata.append ('file []', file [i]);
}
Kemudian, kirim objek FormData ini.
xhr.send (formdata);
7. Berbagi Sumber Daya Cross-Domain (CORS)
Versi baru objek XMLHTTPREQUEST dapat mengeluarkan permintaan HTTP ke server dengan nama domain yang berbeda. Ini disebut "Berbagi Sumber Daya Por-Origin" (CORS).
Prasyarat untuk menggunakan "berbagi sumber daya lintas domain" adalah bahwa browser harus mendukung fungsi ini, dan server harus menyetujui "domain silang" ini. Jika kondisi di atas dapat dipenuhi, kode ditulis persis sama dengan permintaan non-domain non-silang.
xhr.open ('get', 'http: //other.server/and/path/to/script');
Saat ini, selain IE 8 dan IE 9, Cors Mainstream Browser, dan IE 10 juga akan mendukung fungsi ini. Untuk pengaturan sisi server, silakan merujuk ke "Kontrol Akses Sisi Server".
8. Terima data biner (metode A: Tulis ulang mimetype)
Versi lama objek XMLHTTPREQUEST hanya dapat mengambil data teks dari server (jika tidak namanya tidak akan dimulai dengan XML), sedangkan versi baru dapat mengambil data biner.
Berikut dua cara berbeda. Pendekatan yang lebih lama adalah mengesampingkan mimetype data, menyamarkan data biner yang dikembalikan oleh server sebagai data teks, dan memberi tahu browser bahwa ini adalah set karakter yang ditentukan pengguna.
xhr.Overridemimetype ("Teks/polos; charset = X-user-defined");
Kemudian, gunakan properti ResponsEtext untuk menerima data biner yang dikembalikan oleh server.
var binstr = xhr.Responsetext;
Karena browser memperlakukannya sebagai data teks saat ini, itu harus dikembalikan ke data biner satu per satu.
Salinan kode adalah sebagai berikut:
untuk (var i = 0, len = binstr.length; i <len; ++ i) {
var c = binstr.charcodeat (i);
var byte = c & 0xff;
}
Operasi bit "C & 0XFF" dari baris terakhir berarti bahwa di antara dua byte dari masing -masing karakter, hanya byte berikutnya yang dipertahankan dan byte sebelumnya dibuang. Alasannya adalah ketika browser menginterpretasikan karakter, itu akan secara otomatis menginterpretasikan karakter ke bagian 0xF700-0XF7FF UNICODE.
8. Terima data biner (Metode B: Properti Responsetype)
Cara yang lebih baru untuk mengambil data biner dari server adalah dengan menggunakan properti responsetype yang baru ditambahkan. Jika server mengembalikan data teks, nilai properti ini adalah "teks", yang merupakan nilai default. Browser yang lebih baru juga mendukung nilai -nilai lain, yaitu, mereka dapat menerima data dalam format lain.
Anda dapat mengatur responsetype ke Blob, yang berarti server mengirim kembali objek biner.
Salinan kode adalah sebagai berikut:
var xhr = xmlhttpRequest baru ();
xhr.open ('get', '/path/to/image.png');
xhr.responsetype = 'blob';
Saat menerima data, cukup gunakan objek Blob yang datang dengan browser Anda.
var blob = new blob ([xhr.response], {type: 'Image/png'});
Perhatikan bahwa itu adalah membaca XHR.Response, bukan XHR.Responsetext.
Anda juga dapat mengatur responsetype ke ArrayBuffer dan menginstal data biner dalam array.
Salinan kode adalah sebagai berikut:
var xhr = xmlhttpRequest baru ();
xhr.open ('get', '/path/to/image.png');
xhr.responsetype = "arrayBuffer";
Saat menerima data, Anda perlu melintasi array ini.
Salinan kode adalah sebagai berikut:
var arraybuffer = xhr.response;
if (arrayBuffer) {
var byteArray = uint8Array baru (arrayBuffer);
untuk (var i = 0; i <bytearray.bytelength; i ++) {
// Lakukan sesuatu
}
}
Untuk diskusi yang lebih rinci, lihat mengirim dan menerima data biner.
9. Informasi Kemajuan
Versi baru dari objek XMLHTTPREQUEST memiliki peristiwa kemajuan saat mengirimkan data, yang digunakan untuk mengembalikan informasi kemajuan.
Ini dibagi menjadi dua situasi: Unggah dan unduh. Acara kemajuan yang diunduh adalah milik objek XMLHTTPREQUEST, dan acara Progress yang diunggah milik objek XMLHTTPREQUEST.UPLOAD.
Pertama -tama mari kita tentukan fungsi panggilan balik dari acara kemajuan.
Salinan kode adalah sebagai berikut:
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
Kemudian, dalam fungsi callback, gunakan beberapa properti dari acara ini.
Salinan kode adalah sebagai berikut:
function updateProgress (event) {
if (event.lengthcomputable) {
var persencomplete = event.loaded / event.total;
}
}
Dalam kode di atas, Event.total adalah total byte yang perlu ditransfer, dan event.Loaded adalah byte yang telah ditransfer. Jika event.lengthComputable tidak benar, event.total sama dengan 0.
Ada lima acara lain yang terkait dengan acara Progress, yang dapat menentukan fungsi callback secara terpisah:
* Load Event: Transfer berhasil selesai.
* Acara Abort: Transmisi dibatalkan oleh pengguna.
* Acara kesalahan: Terjadi kesalahan selama transmisi.
* LoadStart Event: Transfer dimulai.
* LoadEnd Event: Transmisi berakhir, tetapi saya tidak tahu apakah itu berhasil atau gagal.
10. Bahan Bacaan
1. Pengantar XmlHttprequest Level 2: Pengantar komprehensif untuk fitur -fitur baru.
2. Trik baru di XMLHTTPREQUEST 2: Beberapa PENDAHULUAN PENGGUNAAN.
3. Menggunakan XMLHTTPREQUEST: Beberapa penggunaan lanjutan, terutama menargetkan browser Firefox.
4. Kontrol Akses HTTP: Ikhtisar CORS.
5. Kontrol Akses DOM Menggunakan Berbagi Sumber Daya Cross-Origin: 9 Jenis Informasi Header HTTP dari CORS
6. Kontrol akses sisi server: Pengaturan CORS sisi server.
7. Aktifkan CORS: Pengaturan server CORS.