1. AJAX (Asynchronous JavaScript + XML) สามารถขอข้อมูลเพิ่มเติมเช่นเซิร์ฟเวอร์โดยไม่ต้องถอนการติดตั้งหน้านั่นคือเทคโนโลยีรีเฟรชในท้องถิ่น
2. สร้างวัตถุ XHR
ฟังก์ชั่น createxhr () {ถ้า (typeof xmlhttprequest! = "undefined") {ส่งคืน xmlhttprequest ใหม่ (); } อื่นถ้า (typeof activexobject! = "undefined") {// <ie7 ถ้า (typeof arguments.callee.activexstring! = "String") {var version = ["msxml2.xmlhttp.6.0", "msxml2.xmlhtp.3.0" สำหรับ (i = 0, len = version.length; i <len; i ++) {ลอง {new ActiveXObject (เวอร์ชัน [i]); อาร์กิวเมนต์ callee.activexstring = เวอร์ชัน [i]; หยุดพัก; } catch (ex) {}}} ส่งคืน ActiveXObject ใหม่ (arguments.callee.activexstring); } else {โยนข้อผิดพลาดใหม่ ("ไม่สนับสนุน XHR"); }} var xhr = createxhr (); การแจ้งเตือน (XHR); // [Object XMLHTTPREQUEST]3. หมายเหตุการใช้งาน: ตัวอย่างทั้งหมดในส่วนนี้ถูกนำไปใช้กับฝั่งเซิร์ฟเวอร์
1. เรียกวิธีการเปิด () มันยอมรับพารามิเตอร์ 3 ตัว: ประเภทของคำขอที่จะส่ง ("รับ", "โพสต์" ฯลฯ ), URL ของคำขอและค่าบูลีนระบุว่าคำขอถูกส่งแบบอะซิงโครนัสหรือไม่
2. หากต้องการส่งคำขอให้เรียกใช้เมธอด () และยอมรับพารามิเตอร์นั่นคือมันจะเป็นเรื่องของคำขอ null ถ้าไม่จำเป็น
3. ข้อมูลที่ส่งคืนจะถูกกรอกไว้ในคุณสมบัติของวัตถุ XHR โดยอัตโนมัติ
var xhr = createxhr (); // เปิดไฟล์ example.txt ในการซิงโครนัส // การซิงโครไนซ์: รหัส JavaScript จะรอให้เซิร์ฟเวอร์ตอบสนองและดำเนินการ XHR.Open ("รับ", "example.txt", false); XHR.Send (NULL); // สถานะแสดงถึงสถานะ http ของการตอบสนอง // 200 หมายถึงตกลง, 304 หมายถึงแคชถ้า ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {แจ้งเตือน (xhr.ResponSetext); // ส่งคืนข้อความของการตอบกลับ 123456} else {Alert ("คำขอไม่สำเร็จ:" + xhr.status); -4.Example.Text เนื้อหาไฟล์เป็นสตริง: 123456
4. แน่นอนจะไม่มีปัญหากับวิธีการซิงโครไนซ์ที่ใช้ในกระบวนการก่อนหน้า เราต้องท้าทายวิธีการแบบอะซิงโครนัส
var xhr = createxhr ();// xhr.readystate แสดงถึงสถานะปัจจุบันของคำขอ/การตอบสนองและ 4 แสดงให้เห็นว่าข้อมูลการตอบสนองทั้งหมดได้รับการยอมรับ // นอกจากนี้ตราบใดที่ค่าของการเปลี่ยนแปลง xhr.readystate, xhr.onreadystatechange เหตุการณ์จะกระตุ้น xhr.onreadystatechange = function () xhr.status <300) || xhr.status == 304) {การแจ้งเตือน (xhr.responsetext); } else {Alert ("คำขอไม่สำเร็จ:" + xhr.status); - xhr.open ("รับ", "example.txt", จริง); XHR.Send (NULL);
5. คำขอและการตอบกลับ HTTP แต่ละครั้งจะมีข้อมูลส่วนหัวที่สอดคล้องกัน
1. โดยค่าเริ่มต้นในขณะที่ส่งคำขอ XHR ข้อมูลส่วนหัวต่อไปนี้จะถูกส่ง
①ccept: ประเภทของเนื้อหาที่เบราว์เซอร์สามารถจัดการได้
② Accept-Charset: ชุดอักขระที่เบราว์เซอร์สามารถแสดงได้
③การเข้ารหัสการเข้ารหัส: การเข้ารหัสบีบอัดที่เบราว์เซอร์สามารถจัดการได้
④ Accept-Language: ภาษาที่กำหนดโดยเบราว์เซอร์ในปัจจุบัน
⑤การเชื่อมต่อ: ประเภทของการเชื่อมต่อระหว่างเบราว์เซอร์และเซิร์ฟเวอร์
⑥Cookies: คุกกี้ใด ๆ ที่ตั้งอยู่ในหน้าปัจจุบัน
⑦host: โดเมนที่หน้าซึ่งมีการร้องขอให้มีการร้องขอ
⑧referer: URI ของหน้าเว็บที่ออกคำขอ
⑨user-Agent: สตริงตัวแทนผู้ใช้ของเบราว์เซอร์
2. ใช้เมธอด SetRequestHeader () เพื่อตั้งค่าข้อมูลส่วนหัวคำขอที่กำหนดเอง ยอมรับพารามิเตอร์สองพารามิเตอร์: ชื่อของฟิลด์ส่วนหัวและค่าของฟิลด์ส่วนหัว
var xhr = createxhr (); // xhr.readystate แสดงถึงสถานะปัจจุบันของคำขอ/การตอบสนองและ 4 แสดงให้เห็นว่าข้อมูลการตอบสนองทั้งหมดได้รับการยอมรับ // นอกจากนี้ตราบใดที่ค่าของการเปลี่ยนแปลง xhr.readystate, xhr.onreadystatechange เหตุการณ์จะกระตุ้น xhr.onreadystatechange = function () xhr.status <300) || xhr.status == 304) {การแจ้งเตือน (xhr.responsetext); } else {Alert ("คำขอไม่สำเร็จ:" + xhr.status); }}}; xhr.open ("รับ", "example.txt", จริง); // xhr.setrequestheader ("ชื่อ", "จาง"); // สามารถเห็น "ชื่อ" ที่ยอมรับได้ใน http ของ example.txt: "จาง" xhr.send (null);3. รับข้อมูลส่วนหัวคำขอและข้อมูลที่เกี่ยวข้องโทรเมธอด getResponseHeader () วิธี getallResponseHeaders () วิธีการ
var xhr = createxhr (); // xhr.readystate แสดงถึงสถานะปัจจุบันของคำขอ/การตอบสนองและ 4 แสดงให้เห็นว่าข้อมูลการตอบสนองทั้งหมดได้รับการยอมรับ // นอกจากนี้ตราบใดที่ค่าของการเปลี่ยนแปลง xhr.readystate, xhr.onreadystatechange เหตุการณ์จะกระตุ้น xhr.onreadystatechange = function () xhr.status <300) || xhr.status == 304) {// รับประเภทเนื้อหาของการเชื่อมต่อส่วนหัวการตอบสนอง var = xhr.getResponseHeader ("ประเภทเนื้อหา"); // Alert (การเชื่อมต่อ); // text/plain // รับข้อมูลการตอบกลับทั้งหมด var all = xhr.getallResponseHeaders (); การแจ้งเตือน (ทั้งหมด); } else {Alert ("คำขอไม่สำเร็จ:" + xhr.status); - xhr.open ("รับ", "example.txt", จริง); XHR.Send (NULL);6. รับคำขอ เราได้หารือเกี่ยวกับวิธีการรับคำขอก่อน ตอนนี้ให้ขยายและเพิ่มพารามิเตอร์บางอย่างในคำขอ GET
/ ** URL: URL โดยไม่มีชื่อคำขอ: คำขอคีย์คำขอ: การร้องขอค่าส่งคืน: url พร้อมสตริงคำขอ*/ ฟังก์ชั่น addurlparam (url, ชื่อ, ค่า) {url += (url.indexof ("?") == -1? "?": "&"); url + = encodeuricomponent (ชื่อ) + "=" + encodeuricomponent (ค่า); url กลับ; } var xhr = createxhr (); xhr.onreadyStateChange = function () {ถ้า (xhr.readystate == 4) {ถ้า ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {แจ้งเตือน (xhr.responsetext); } else {Alert ("คำขอไม่สำเร็จ:" + xhr.status); - var url = "example.txt"; url = addurlparam (url, "ชื่อ", "จาง"); url = addurlparam (url, "อายุ", "23"); // URL ที่ร้องขอจะกลายเป็น: example.txt? name = Zhang & Age = 23 xhr.open ("รับ", url, true); XHR.Send (NULL);7. คำขอโพสต์
1. การวิเคราะห์กรณี: ถัดไปให้หารือเกี่ยวกับแอปพลิเคชัน AJAX ที่ส่งคำขอในวิธีการโพสต์นั่นคือการลงทะเบียนผู้ใช้และพรอมต์จะถูกส่งคืนตามชื่อผู้ใช้ที่ลงทะเบียนของคุณ
2. ขั้นตอนการใช้งาน
1) ก่อนอื่นจะต้องมีหน้าลงทะเบียน (แน่นอนมันง่ายมากที่นี่) ajax.html
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> เอกสารที่ไม่มีชื่อ </title> <style> </style> </head> id = "userlabel"> โปรดป้อนชื่อผู้ใช้ </label> <br/> รหัสผ่าน: <อินพุตประเภท = "รหัสผ่าน" ชื่อ = "รหัสผ่าน"/> <br/> <อินพุตประเภท = "ส่ง" value = "เข้าสู่ระบบ"/> <br/> </form> src = "ajax.js"> </script> <script src = "ajaxdo.js"> </script> <script src = "ajaxdo.js"> </script> </body> </html>
2) แน่นอนว่าส่วน JavaScript
①eventutil.jsนี่เป็นเพียงรายการของชิ้นส่วนการฟังเหตุการณ์
var eventutil = {addEvent: ฟังก์ชัน (องค์ประกอบ, ประเภท, ตัวจัดการ) {ถ้า (element.addeVentListener) {element.addeVentListener (ประเภท, handler, false); } อื่นถ้า (element.attachevent) {element.attachevent ("on" + type, handler); -②serialize.js: รูปแบบการทำให้เป็นอนุกรม
ฟังก์ชัน serialize (รูปแบบ) {var parts = [], field = null, i, len, j, optlen, ตัวเลือก, optvalue; สำหรับ (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) {สำหรับ (j = 0, optlen = field.options.length; j <optlen; j ++) {ตัวเลือก = field.options [j]; if (options.selected) {optValue = ""; if (option.hasattribute) {optValue = (ตัวเลือก. hasattribute ("value") ตัวเลือก. value: ตัวเลือก. text); } else {optValue = (ตัวเลือก. attributes ["value"]. ระบุ? ตัวเลือก. value: ตัวเลือก TEXT); } parts.push (encodeuricomponent (field.name) + "=" + encodeuricomponent (optValue)); } } } หยุดพัก; กรณีที่ไม่ได้กำหนด: // ฟิลด์ตั้งค่ากรณี "ไฟล์": // ไฟล์อินพุตไฟล์ "ส่ง": // ส่งปุ่มเคส "รีเซ็ต": // รีเซ็ตปุ่มเคส "ปุ่ม": // การแบ่งปุ่มกำหนดเอง; กรณี "วิทยุ": // ปุ่มตัวเลือกกรณี "ช่องทำเครื่องหมาย": // ช่องทำเครื่องหมายถ้า (! field.checked) {break; } /* ดำเนินการเริ่มต้นการทำงาน* /ค่าเริ่มต้น: // ฟิลด์ยกเลิกฟอร์มโดยไม่มีชื่อถ้า (field.name.length) {parts.push (encodeuricomponent (field.name) + "=" + encodeuricomponent (field.value)); }}} return parts.join ("&"); -③ajax.jsเป็นฟังก์ชั่น createxhr () ด้านบนและจะไม่อยู่ในรายการที่นี่
④ajaxdo.jsไฟล์หลักเป็นส่วนการดำเนินการของชื่อของเราซึ่งเขียนแบบสุ่ม
var form = document.forms [0]; // รับ Form var username = form.elements ['username']; // username var userlabel = document.QuerySelector ("#userlabel"); // prompt tag eventutil.addevent (ชื่อผู้ใช้, "blur", function () {var xhr = createxhr (); xhr.onreadyStateChange = ฟังก์ชั่น () {ถ้า (xhr.readyState == 4) {ถ้า (xhr.status> = 200 && xhr.status <300) xhr.responsetext; userlabel.firstchild.data = "ขออภัยผู้ใช้นี้มีอยู่แล้ว"; "แอปพลิเคชัน/x-www-form-urlencoded");3. การปรับปรุงส่วน: ทุกคนได้เห็นมัน เมื่อเราส่งแบบฟอร์มตอนนี้เราทำให้แบบฟอร์มต่อเนื่อง ประเภท FormData ถูกกำหนดไว้สำหรับสิ่งนี้ที่ XMLHTTTPREQUEST Level 2 ซึ่งจะทำให้แบบฟอร์มต่อเนื่องสำหรับเราโดยอัตโนมัติและเราไม่จำเป็นต้องเขียนด้วยตัวเอง
เราย้ายรหัสบางส่วนเท่านั้น
// ... รหัสที่ละเว้นที่นี่สอดคล้องกับ // post Request XHR.Open ("โพสต์", "dome.php", จริง); // จำเป็นต้องมีการเปลี่ยนแปลงที่นี่เพื่อแทนที่ฟังก์ชั่นก่อนหน้า XHR.Send (FormData ใหม่ (แบบฟอร์ม));8. ส่วนอื่น ๆ (เข้าใจเพราะความเข้ากันได้ไม่เพียงพอ)
1. การตั้งค่าการหมดเวลา
xhr.open ("รับ", "example.txt", จริง); xhr.timeout = 1,000; // ตั้งค่าการหมดเวลาเป็น 1 วินาที (เฉพาะสำหรับ IE8+) xhr.Ontimeout = function () {การแจ้งเตือน ("คำขอไม่กลับในวินาที"); - XHR.Send (NULL);2. เมธอด overridemimetype () ประเภทที่ส่งคืนโดยเซิร์ฟเวอร์
var xhr = createxhr (); xhr.open ("รับ", "example.txt", จริง); xhr.overridemimetype ("text/xml"); // อันก่อนหน้าคือข้อความ/ธรรมดา XHR.Send (NULL);3. เหตุการณ์ความคืบหน้า
1. การโหลดเหตุการณ์ทริกเกอร์ตราบใดที่เบราว์เซอร์ได้รับข้อมูลของเซิร์ฟเวอร์
var xhr = createxhr (); xhr.onload = function () {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {แจ้งเตือน (xhr.responsetext); } else {Alert ("คำขอไม่สำเร็จ:" + xhr.status); - xhr.open ("รับ", "example.txt", จริง); XHR.Send (NULL);2. เหตุการณ์ความคืบหน้าเกิดขึ้นเป็นระยะในระหว่างเบราว์เซอร์ที่ได้รับข้อมูลใหม่
var xhr = createxhr (); xhr.onprogress = ฟังก์ชั่น (เหตุการณ์) {var divstatus = document.getElementById ("สถานะ"); // คำนวณเปอร์เซ็นต์ของข้อมูลที่ได้รับจากการตอบกลับถ้า (Event.lengthcomputable) {divstatus.innerhtml = "ได้รับ" + event.position + "ของ" + event.totalsize + "ไบต์"; - xhr.open ("รับ", "altevents.php", จริง); XHR.Send (NULL);ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน