1. AJAX (Asynchronous JavaScript + XML) dapat meminta data tambahan seperti server tanpa menghapus instalan halaman, yaitu teknologi refresh lokal
2. Buat objek XHR
function createxHr () {if (typeof xmlHttpRequest! = "tidak terdefinisi") {return new xmlHttpRequest (); } lain if (typeOf ActivexObject! = "Undefined") {// <ie7 if (typeof arguments.callee.activexString! = "string") {var version = ["msxml2.xmlhtp.6.0", "msxml2.xmlhtp.3.0", "Msxml2.xmlhtp.3.0", "," Msxml2.xlhtp.3.0 " untuk (i = 0, len = versi.length; i <len; i ++) {coba {new ActiveXObject (versi [i]); arguments.callee.activexString = versi [i]; merusak; } catch (ex) {}}} return new ActiveXObject (arguments.callee.activexString); } else {lempar kesalahan baru ("Tidak ada dukungan untuk xhr"); }} var xhr = createxhr (); peringatan (xhr); // [Object XMlHtTPREQUEST]3. Catatan Penggunaan: Semua contoh di bagian ini diterapkan ke sisi server
1. Hubungi metode terbuka (). Ia menerima 3 parameter: jenis permintaan yang akan dikirim ("dapatkan", "post", dll.), URL permintaan, dan nilai Boolean yang menunjukkan apakah permintaan dikirim secara tidak sinkron.
2. Untuk mengirim permintaan, hubungi metode kirim () dan terima parameter, yaitu, itu akan menjadi subjek permintaan. nol jika tidak diperlukan
3. Data yang dikembalikan akan diisi secara otomatis ke properti objek XHR.
var xhr = createxhr (); // Buka file example.txt di Get Synchronically // Synchronization: Kode JavaScript akan menunggu server menanggapi dan mengeksekusi xhr.open ("get", "example.txt", false); xhr.send (null); // Status mewakili status HTTP dari respons // 200 mewakili OK, 304 mewakili cache if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {waspada (xhr.responsetext); // kembalikan teks respons, 123456} else {alert ("permintaan tidak berhasil:" + xhr.status); }4.Example.Text Konten File adalah String: 123456
4. Tentu saja, tidak akan ada masalah dengan metode sinkronisasi yang digunakan dalam proses sebelumnya. Kita harus menantang metode asinkron.
var xhr = createxhr ();// XHR.ReadyState mewakili status saat ini dari permintaan/respons, dan 4 menyatakan bahwa semua data respons telah diterima // Selain itu, selama nilai xhr.readystate berubah, xhr.onreadystateChange akan memicu xhr.onreadystatechange = function () {if (xhr.oneDeDeady {function () {if (xhr.onreadystatechange = function () {if (xhr. neadeDeady {neadeD.onReAdy {neade. && xhr.status <300) || } else {alert ("permintaan tidak berhasil:" + xhr.status); }}}; xhr.open ("get", "example.txt", true); xhr.send (null);
5. Setiap permintaan dan respons HTTP akan memiliki informasi header yang sesuai.
1. Secara default, saat mengirim permintaan XHR, informasi header berikut juga akan dikirim.
①cepcept: Jenis konten yang dapat ditangani oleh browser.
②Accept-Charset: Karakter set yang dapat ditampilkan oleh browser.
③cepcept-encoding: Pengkodean terkompresi yang dapat ditangani oleh browser.
④Buage-Bahasa: Bahasa yang saat ini ditetapkan oleh browser.
⑤Connection: Jenis koneksi antara browser dan server.
⑥kookies: Cookie apa pun yang ditetapkan pada halaman saat ini.
⑦Host: Domain tempat halaman tempat permintaan dikeluarkan berada.
⑧Referer: URI dari halaman yang mengeluarkan permintaan.
⑨AUSER-AGEN: String agen pengguna browser.
2. Gunakan metode setRequestHeader () untuk mengatur informasi header permintaan khusus. Terima dua parameter: Nama bidang header dan nilai bidang header
var xhr = createxhr (); // XHR.ReadyState mewakili status saat ini dari permintaan/respons, dan 4 menyatakan bahwa semua data respons telah diterima // Selain itu, selama nilai xhr.readystate berubah, xhr.onreadystateChange akan memicu xhr.onreadystatechange = function () {if (xhr.oneDeDeady {function () {if (xhr.onreadystatechange = function () {if (xhr. neadeDeady {neadeD.onReAdy {neade. && xhr.status <300) || } else {alert ("permintaan tidak berhasil:" + xhr.status); }}}; xhr.open ("get", "example.txt", true); // xhr.setrequestheader ("name", "zhang"); // "Nama" yang diterima dapat dilihat di http dari contoh.txt: "zhang" xhr.send (null);3. Dapatkan informasi header permintaan dan informasi yang sesuai, hubungi metode getResponseheader () getAllResponseheaders ()
var xhr = createxhr (); // XHR.ReadyState mewakili status saat ini dari permintaan/respons, dan 4 menyatakan bahwa semua data respons telah diterima // Selain itu, selama nilai xhr.readystate berubah, xhr.onreadystateChange akan memicu xhr.onreadystatechange = function () {if (xhr.oneDeDeady {function () {if (xhr.onreadystatechange = function () {if (xhr. neadeDeady {neadeD.onReAdy {neade. && xhr.status <300) || // peringatan (koneksi); // teks/polos // Dapatkan semua informasi respons var all = xhr.getallResponseaders (); waspada (semua); } else {alert ("permintaan tidak berhasil:" + xhr.status); }}}}; xhr.open ("get", "example.txt", true); xhr.send (null);6. Dapatkan permintaan. Kami telah membahas metode mendapatkan permintaan sebelumnya. Sekarang mari kita kembangkan dan tambahkan beberapa parameter ke permintaan GET.
/ ** URL: URL Tanpa Permintaan Nama: Permintaan Kunci Nilai: Nilai Permintaan Pengembalian: URL Dengan String Permintaan*/ Fungsi AddUrlParam (URL, Name, Nilai) {URL += (url.indexof ("?") == -1? "?": "&"); url + = encodeuricomponent (name) + "=" + encodeuricomponent (value); URL pengembalian; } var xhr = createxhr (); xhr.onReadyStateChange = function () {if (xhr.readystate == 4) {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {peringatan (xhr.responsetext); } else {alert ("permintaan tidak berhasil:" + xhr.status); }}}}; var url = "example.txt"; url = addurlparam (url, "name", "zhang"); url = addurlparam (url, "usia", "23"); // url yang diminta menjadi: example.txt? Name = zhang & usia = 23 xhr.open ("get", url, true); xhr.send (null);7. Permintaan Posting
1. Analisis kasus: Selanjutnya, mari kita bahas aplikasi AJAX yang mengirimkan permintaan dalam metode POST, yaitu, pendaftaran pengguna, dan prompt akan dikembalikan berdasarkan nama pengguna terdaftar Anda.
2. Langkah Implementasi
1) Pertama, harus ada halaman terdaftar (tentu saja, sangat sederhana di sini) Ajax.html
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Untitled Document</title> <style> </style> </head> <body> <form name="myForm" method="post"> Name: <input type="text" name="username" /><label id = "userLabel"> Harap masukkan nama pengguna </label> <br/> kata sandi: <input type = "password" name = "password"/> <br/> <input type = "kirim" value = "Login"/> <br/> </form> <script src = "eventutil.js"> </script> <cript script script = " src = "ajax.js"> </script> <script src = "ajaxdo.js"> </script> <script src = "ajaxdo.js"> </script> </body> </html>
2) Maka tentu saja bagian JavaScript
①eventutil.js, ini hanya daftar bagian mendengarkan acara
var eventUtil = {addEvent: function (element, type, handler) {if (element.addeventListener) {element.addeventListener (type, handler, false); } else if (element.attachevent) {element.attachevent ("on" + type, handler); }}}}②Serialize.js: Bentuk serialisasi
function serialize (form) {var bagian = [], field = null, i, len, j, optlen, opsi, optValue; untuk (i = 0, len = form.elements.length; i <len; i ++) {field = form.elements [i]; switch (field.type) {case "select-one": case "select-multiple": if (field.name.length) {for (j = 0, optlen = field.options.length; j <optlen; j ++) {option = field.options [j]; if (option.Selected) {optValue = ""; if (option.hasattribute) {optValue = (option.hasattribute ("value")? option.value: option.text); } else {optValue = (option.attributes ["value"]. Specified? Option.Value: option.text); } parts.push (encodeuricomponent (field.name) + "=" + encodeuricomponent (optValue)); } } } merusak; case tidak ditentukan: // bidang mengatur case "file": // file input case "kirim": // kirimkan tombol "reset": // reset tombol "tombol": // break tombol kustom; case "Radio": // Radio Button Casing "Checkbox": // kotak centang IF (! Field.Checked) {break; } /* Lakukan operasi default* /default: // menghentikan bidang formulir tanpa nama if (field.name.length) {parts.push (encodeuricomponent (field.name) + "=" + encodeuricomponent (field.value)); }}} return parts.join ("&"); }③Ajax.js adalah fungsi createxhr () di atas, dan tidak akan tercantum di sini.
④AJAXDO.JS, file inti, adalah bagian operasi dari nama kami, yang ditulis secara acak.
var form = document.forms [0]; // dapatkan bentuk var username = form.elements ['username']; // nama pengguna var userlabel = document.queryselector ("#userLabel"); // tag prompt eventutil.addevent (username, "blur", function () {var xhr = createxhr (); xhr.onreadystatechange = function () {if (xhr.readystate == 4) {if ((xhr.status> = 200 && xhr.status (xhr.status> = 200 && xhr.status XHR.ResponsText; // Ketika benar, font hijau diminta // ketika font font diminta jika (teks) {userlabel.style.color = "Green"; UserLabel.firstchild.data = "Maaf, pengguna ini sudah ada"; "Aplikasi/X-WWW-Form-Urlencoded");3. PARTS PEMBAGI: Semua orang telah melihatnya. Ketika kami mengirimkan formulir sekarang, kami membuat serial formulir. Jenis FormData didefinisikan untuk ini di XMLHTTPREQUEST Level 2, yang secara otomatis akan membuat serial formulir untuk kita dan kita tidak perlu menulisnya sendiri.
Kami hanya memindahkan beberapa kode
// ... Kode yang dihilangkan di sini konsisten dengan permintaan di atas // Posting xhr.open ("post", "dome.php", true); // Hanya perlu diubah di sini untuk mengganti fungsi sebelumnya xhr.send (formdata baru (form));8. Bagian lain (pahami karena kompatibilitas tidak cukup)
1. Pengaturan waktu tunggu
xhr.open ("get", "example.txt", true); xhr.timeout = 1000; // atur timeout ke 1 detik (hanya untuk IE8+) xhr.onTimeout = function () {alert ("permintaan tidak kembali dalam satu detik."); }; xhr.send (null);2. Metode overridemimetype (), jenis yang dikembalikan oleh server
var xhr = createxhr (); xhr.open ("get", "example.txt", true); xhr.overridemimeType ("Teks/xml"); // yang sebelumnya adalah teks/XHR.Send (null);3. Acara Kemajuan
1. Muat acara, dipicu selama browser menerima informasi server.
var xhr = createxhr (); xhr.onload = function () {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.Responsetext); } else {alert ("permintaan tidak berhasil:" + xhr.status); }}; xhr.open ("get", "example.txt", true); xhr.send (null);2. Peristiwa Kemajuan, secara berkala dipicu selama browser yang menerima data baru
var xhr = createxhr (); xhr.onprogress = function (event) {var divstatus = document.geteLementById ("status"); // Hitung persentase data yang telah diterima dari respons IF (event.lengthcomputable) {divstatus.innerhtml = "diterima" + event.position + "dari" + event.totalsize + "bytes"; }}; xhr.open ("get", "altevents.php", true); xhr.send (null);Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.