XMLHTTPREQUEST membuat mengirim permintaan HTTP sangat mudah. Anda hanya hanya perlu membuat instance dari objek permintaan, membuka URL, dan kemudian mengirim permintaan. Setelah transmisi selesai, status HTTP yang dihasilkan dan konten respons yang dikembalikan juga dapat diperoleh dari objek permintaan.
Permintaan yang dihasilkan oleh XMLHTTPREQUEST dapat diperoleh dengan dua cara, mode asinkron atau mode sinkron. Jenis permintaan ditentukan oleh nilai async, parameter ketiga dari metode terbuka () dari objek XmlHttpRequest ini. Jika nilai parameter ini salah, permintaan XMLHTTPREQUEST dilakukan dalam mode sinkron, jika tidak, prosesnya akan diselesaikan dalam mode asinkron.
Dua mode komunikasi: permintaan sinkron dan asinkron:
Menyinkronkan permintaan
Permintaan sinkronisasi di utas utama memblokir halaman, dan karena pengalaman pengguna yang buruk, permintaan sinkronisasi pada utas utama dari beberapa browser terbaru telah digunakan. Dalam kasus yang jarang terjadi, XmlHttPrequests menggunakan mode sinkron akan lebih cocok daripada menggunakan mode asinkron.
1. Saat menggunakan XmlHttPrequest pada pekerja, permintaan sinkron lebih cocok daripada permintaan asinkron.
Kode di beranda:
<script type = "text/javascript"> var omyworker = pekerja baru ("myTask.js"); omyworker.onMessage = function (oevent) {alert ("Worker mengatakan:" + oevent.data); }; omyworker.postmessage ("hello"); </script> myfile.txt (file yang menyinkronkan objek XMLHTTPRequest yang diminta): halo dunia !!Termasuk kode pekerja: myTask.js
self.onMessage = function (oevent) {if (oevent.data === "hello") {var oreq = new xmlHttpRequest (); oreq.open ("get", "myfile.txt", false); // permintaan sinkron oreq.send (null); self.postmessage (oreq.responsetext); }};Catatan: Karena pekerja digunakan, permintaan itu sebenarnya tidak sinkron.
Metode serupa dapat digunakan untuk memungkinkan skrip berinteraksi dengan server di latar belakang dan memuat konten tertentu. Lihat penggunaan pekerja web untuk lebih jelasnya
2. Situasi di mana permintaan sinkron harus digunakan
Dalam kasus yang jarang terjadi, hanya permintaan Sinkron XMLHTTPREQUEST yang dapat digunakan. Misalnya, di window.onunload dan window.onbeforeunload acara penanganan acara. Menggunakan xmlhttpRequest asynchronous dalam fungsi event handler event event halaman akan menyebabkan masalah: ketika respons dikembalikan, halaman tidak ada lagi, dan semua variabel dan fungsi panggilan balik telah dihancurkan. Hasilnya hanya dapat menyebabkan kesalahan, "fungsi tidak didefinisikan". Solusinya adalah menggunakan permintaan dalam mode sinkronisasi di sini, sehingga halaman tidak akan ditutup sampai permintaan selesai.
window.onbeforeunload = function () {var oreq = new xmlHttpRequest (); oreq.open ("get", "logout.php? nick =" + Escape (myName), false); // permintaan sinkron oreq.send (null); if (oreq.responsetext.trim ()! == "Exited"); {// "Exited" Apakah Exit Data Return "gagal, apakah Anda ingin mengeksekusi keluar secara manual?"; }};Permintaan asinkron
Jika Anda menggunakan mode asinkron, ketika data diminta sepenuhnya, fungsi callback yang ditentukan akan dijalankan. Saat melaksanakan permintaan, browser biasanya dapat menjalankan transaksi lainnya.
3. Contoh: Buat metode standar untuk membaca file eksternal
Dalam beberapa persyaratan, beberapa file eksternal harus dibaca. Ini adalah fungsi standar. Fungsi ini menggunakan objek XMLHTTPREQUEST untuk permintaan asinkron. Ini juga memungkinkan Anda untuk menentukan fungsi panggilan balik yang berbeda setelah setiap file dibaca selesai.
fungsi loadFile (surl, timeout, fcallback / *, lulus dalam parameter 1, lulus dalam parameter 2, dll. * /) {var apassargs = array.prototype.slice.call (argumen, 3), oreq = xmlhttprequest baru (); oreq.onTimeout = function () {console.log ("Permintaan waktu tunggu."); } oreq.onReadyStateChange = function () {if (oreq.readystate === 4) {if (oreq.status === 200) {fcallback.apply (oreq, apassargs); } else {console.log ("error", oreq.statustext); }}}; oreq.open ("get", surl, true); oreq.timeout = timeout; oreq.send (null);}Penggunaan Fungsi LoadFile:
function showMessage (smsg) {waspada (smsg + this.responsetext);} loadFile ("message.txt", 200, showmessage, "pesan baru! // n");Baris 1 mendefinisikan fungsi. Setelah file dibaca, fungsi Fcallback akan dipanggil dengan semua parameter setelah parameter ketiga sebagai parameternya sendiri.
Baris 3 menggunakan pengaturan batas waktu untuk menghindari kode Anda dari mengeksekusi eksekusi jangka panjang dari data pengembalian dari permintaan baca. Dengan menetapkan nilai ke properti batas waktu dari objek XMLHTTPREQUEST ke properti Timeout
Perilaku keenam OnReadyStateChange Handle menentukan fungsi callback. Setiap kali fungsi dijalankan, memeriksa apakah permintaan berakhir (status permintaan adalah 4). Jika demikian, menentukan apakah permintaan berhasil (status HTTP adalah 200). Jika demikian, output kode sumber halaman. Jika kesalahan terjadi, output pesan kesalahan.
Baris 15 menentukan bahwa parameter ketiga benar, menunjukkan bahwa permintaan harus dieksekusi dalam mode asinkron.
4. Contoh: Gunakan permintaan asinkron, tidak ada penutupan yang digunakan.
function switchxhrstate () {switch (this.readystate) {case 0: console.log ("Metode terbuka () belum dipanggil."); break; case 1: console.log ("Metode Send () belum dipanggil."); Break; Case 2: Console.log ("Metode Send () telah dipanggil, header respons dan status respons telah dikembalikan."); break; case 3: console.log ("Unduh, bagian dari entitas respons telah diperoleh."); break; case 4: console.log ("Permintaan selesai!"); this.callback.apply (ini, this.arguments); }}; function loadFile (surl, fcallback / *, lulus dalam parameter 1, lulus dalam parameter 2, dll. * /) {var oreq = new xmlHttpRequest (); oreq.callback = fcallback; oreq.arguments = array.prototype.slice.call (argumen, 2); oreq.onreadystatechange = switchxhrstate; oreq.open ("get", surl, true); oreq.send (null);}Gunakan Bind:
fungsi switchxhrstate (fcallback, aarguments) {switch (this.readystate) {case 0: console.log ("Metode terbuka () belum dipanggil."); break; case 1: console.log ("Metode Send () belum dipanggil."); Break; Case 2: Console.log ("Metode Send () telah dipanggil, header respons dan status respons telah dikembalikan."); break; case 3: console.log ("Entitas respons parsial telah diperoleh selama diunduh."); break; case 4: console.log ("Permintaan selesai!"); fcallback.Apply (ini, Aarguments); }}; function loadFile (surl, fcallback / *, lulus dalam parameter 1, lulus dalam parameter 2, dll. * /) {var oreq = new xmlHttpRequest (); oreq.onreadystatechange = switchxhrstate.bind (oreq, fcallback, array.prototype.slice.call (argumen, 2)); oreq.open ("get", surl, true); oreq.send (null);}Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.