XMLHTTPREQUEST เป็นส่วนต่อประสานเบราว์เซอร์ที่ช่วยให้ JavaScript ทำการสื่อสาร HTTP (S)
ในตอนแรก Microsoft แนะนำอินเทอร์เฟซนี้ใน IE 5 เพราะมันมีประโยชน์มากเบราว์เซอร์อื่น ๆ ได้เลียนแบบและนำไปใช้งานดังนั้นการดำเนินการ Ajax จึงเกิดขึ้น
อย่างไรก็ตามอินเทอร์เฟซนี้ยังไม่ได้รับมาตรฐานและการใช้งานของแต่ละเบราว์เซอร์นั้นแตกต่างกันมากหรือน้อย หลังจากแนวคิดของ HTML 5 ถูกสร้างขึ้น W3C เริ่มพิจารณามาตรฐานอินเทอร์เฟซนี้ ในเดือนกุมภาพันธ์ 2551 เสนอร่าง XMLHTTTPREQUEST ระดับ 2
XMLHTTTPRequest เวอร์ชันใหม่นี้เสนอคุณสมบัติใหม่ที่มีประโยชน์มากมายซึ่งจะส่งเสริมนวัตกรรมทางอินเทอร์เน็ตอย่างมาก บทความนี้แนะนำรายละเอียดเวอร์ชันใหม่นี้
1. วัตถุ XMLHTTPREQUEST เวอร์ชันเก่า
ก่อนที่จะแนะนำเวอร์ชันใหม่ให้ตรวจสอบการใช้งานของเวอร์ชันเก่า
ขั้นแรกให้สร้างอินสแตนซ์ใหม่ของ XMLHTTPREQUEST
var xhr = ใหม่ xmlhttprequest ();
จากนั้นจะมีการร้องขอ HTTP ไปยังโฮสต์ระยะไกล
การคัดลอกรหัสมีดังนี้:
xhr.open ('get', 'example.php');
xhr.send ();
จากนั้นรอให้โฮสต์ระยะไกลตอบกลับ ในเวลานี้คุณต้องตรวจสอบการเปลี่ยนแปลงสถานะของวัตถุ XMLHTTPREQUEST และระบุฟังก์ชั่นการโทรกลับ
xhr.onreadyStateChange = function () {ถ้า (xhr.readystate == 4 && xhr.status == 200) {Alert (xhr.responsetext); } else {Alert (xhr.statustext); -รหัสด้านบนมีคุณสมบัติหลักของเวอร์ชันเก่าของวัตถุ XMLHTTPREQUEST:
การคัดลอกรหัสมีดังนี้:
* XHR.ReadyState: สถานะของวัตถุ XMLHTTPREQUEST เท่ากับ 4 หมายความว่าได้รับข้อมูลแล้ว
* XHR.STATUS: รหัสสถานะที่ส่งคืนโดยเซิร์ฟเวอร์เท่ากับ 200 หมายถึงทุกอย่างเป็นเรื่องปกติ
* XHR.ResponSetext: ข้อมูลข้อความที่ส่งคืนโดยเซิร์ฟเวอร์
* XHR.Responsexml: ข้อมูลรูปแบบ XML ที่ส่งคืนโดยเซิร์ฟเวอร์
* xhr.statustext: ข้อความสถานะที่ส่งคืนโดยเซิร์ฟเวอร์
2. ข้อเสียของเวอร์ชันเก่า
วัตถุ XMLHTTPRequest เวอร์ชันเก่ามีข้อเสียดังต่อไปนี้:
* รองรับการส่งข้อมูลข้อความเท่านั้นและไม่สามารถใช้ในการอ่านและอัปโหลดไฟล์ไบนารี
* เมื่อส่งและรับข้อมูลไม่มีข้อมูลความคืบหน้าดังนั้นคุณสามารถแจ้งให้ทราบได้ว่าจะเสร็จสมบูรณ์หรือไม่
* เนื่องจาก "นโยบายต้นกำเนิดเดียวกัน" คุณสามารถขอข้อมูลจากเซิร์ฟเวอร์ที่มีชื่อโดเมนเดียวกันเท่านั้น
3. ฟังก์ชั่นของเวอร์ชันใหม่
เวอร์ชันใหม่ของวัตถุ XMLHTTPRequest ได้ทำการปรับปรุงอย่างมีนัยสำคัญต่อข้อบกพร่องของเวอร์ชันเก่า
การคัดลอกรหัสมีดังนี้:
* คุณสามารถตั้งค่า จำกัด เวลาสำหรับคำขอ HTTP
* วัตถุ FormData สามารถใช้ในการจัดการข้อมูลฟอร์ม
* สามารถอัปโหลดไฟล์ได้
* คุณสามารถขอข้อมูลภายใต้ชื่อโดเมนที่แตกต่างกัน (คำขอข้ามโดเมน)
* คุณสามารถรับข้อมูลไบนารีทางฝั่งเซิร์ฟเวอร์
* คุณสามารถรับข้อมูลความคืบหน้าของการส่งข้อมูล
ต่อไปฉันจะแนะนำคุณสมบัติใหม่เหล่านี้ทีละหนึ่ง
4. การ จำกัด เวลาสำหรับคำขอ HTTP
บางครั้งการดำเนินการของ AJAX ใช้เวลานานและเป็นไปไม่ได้ที่จะคาดการณ์ว่าจะใช้เวลาเท่าไหร่ หากความเร็วอินเทอร์เน็ตช้ามากผู้ใช้อาจต้องรอเป็นเวลานาน
เวอร์ชันใหม่ของวัตถุ XMLHTTPREQUEST ได้เพิ่มแอตทริบิวต์การหมดเวลาซึ่งสามารถกำหนดเวลา จำกัด เวลาสำหรับคำขอ HTTP
xhr.timeout = 3000;
คำสั่งข้างต้นกำหนดเวลารอสูงสุดถึง 3,000 มิลลิวินาที หลังจากผ่านช่วงเวลานี้แล้วคำขอ HTTP จะหยุดโดยอัตโนมัติ นอกจากนี้ยังมีเหตุการณ์การหมดเวลาที่ระบุฟังก์ชั่นการโทรกลับ
การคัดลอกรหัสมีดังนี้:
xhr.ontimeout = function (เหตุการณ์) {
การแจ้งเตือน ('ขอหมดเวลาขอ!');
-
ปัจจุบัน Opera, Firefox และ IE 10 สนับสนุนสถานที่ให้บริการนี้ คุณสมบัติของ IE 8 และ IE 9 นี้เป็นของวัตถุ XdomainRequest ในขณะที่ Chrome และ Safari ไม่รองรับ
5. วัตถุ FormData
การดำเนินการ AJAX มักใช้เพื่อส่งผ่านข้อมูลแบบฟอร์ม เพื่ออำนวยความสะดวกในการประมวลผลแบบฟอร์ม HTML 5 ได้เพิ่มวัตถุ FormData ในรูปแบบจำลอง
ขั้นแรกให้สร้างวัตถุ FormData ใหม่
var formData = new FormData ();
จากนั้นเพิ่มรายการแบบฟอร์มลงไป
FormData.Append ('ชื่อผู้ใช้', 'Zhang San');
formdata.append ('id', 123456);
ในที่สุดส่งวัตถุ formdata นี้โดยตรง สิ่งนี้เหมือนกับการส่งแบบฟอร์มเว็บ
xhr.send (formdata);
วัตถุ FormData ยังสามารถใช้เพื่อรับค่าของแบบฟอร์มเว็บ
การคัดลอกรหัสมีดังนี้:
var form = document.getElementById ('myform');
var formData = new FormData (แบบฟอร์ม);
FormData.Append ('Secret', '123456'); // เพิ่มรายการแบบฟอร์ม
xhr.open ('โพสต์', ฟอร์ม. แอคชั่น);
xhr.send (formdata);
6. อัปโหลดไฟล์
วัตถุ XMLHTTPRequest เวอร์ชันใหม่ไม่เพียง แต่ส่งข้อมูลข้อความ แต่ยังอัปโหลดไฟล์ด้วย
สมมติว่าไฟล์เป็นองค์ประกอบฟอร์ม (อินพุต [type = "ไฟล์"]) ของ "เลือกไฟล์" เราโหลดลงในวัตถุ formData
การคัดลอกรหัสมีดังนี้:
var formData = new FormData ();
สำหรับ (var i = 0; i <files.length; i ++) {
formData.Append ('ไฟล์ []', ไฟล์ [i]);
-
จากนั้นส่งวัตถุ formdata นี้
xhr.send (formdata);
7. การแบ่งปันทรัพยากรข้ามโดเมน (CORS)
วัตถุ XMLHTTPRequest เวอร์ชันใหม่สามารถออกคำขอ HTTP ไปยังเซิร์ฟเวอร์ที่มีชื่อโดเมนที่แตกต่างกัน สิ่งนี้เรียกว่า "การแบ่งปันทรัพยากรข้ามแหล่งกำเนิด" (CORS)
สิ่งที่จำเป็นสำหรับการใช้ "การแบ่งปันทรัพยากรข้ามโดเมน" คือเบราว์เซอร์ต้องสนับสนุนฟังก์ชั่นนี้และเซิร์ฟเวอร์จะต้องตกลง "ข้ามโดเมน" นี้ หากสามารถปฏิบัติตามเงื่อนไขข้างต้นรหัสจะถูกเขียนเหมือนกันกับคำขอที่ไม่ใช่โดเมนข้าม
xhr.open ('get', 'http: //other.server/and/path/to/script');
ปัจจุบันนอกเหนือจาก IE 8 และ IE 9 เบราว์เซอร์หลักรองรับ CORS และ IE 10 จะสนับสนุนฟังก์ชั่นนี้ด้วย สำหรับการตั้งค่าฝั่งเซิร์ฟเวอร์โปรดดูที่ "การควบคุมการเข้าถึงฝั่งเซิร์ฟเวอร์"
8. รับข้อมูลไบนารี (วิธี A: เขียน mimetype ใหม่)
วัตถุ XMLHTTPRequest เวอร์ชันเก่าสามารถดึงข้อมูลข้อความจากเซิร์ฟเวอร์เท่านั้น (มิฉะนั้นชื่อจะไม่เริ่มต้นด้วย XML) ในขณะที่เวอร์ชันใหม่สามารถดึงข้อมูลไบนารีได้
นี่คือสองวิธีที่แตกต่างกัน วิธีการที่เก่ากว่าคือการแทนที่ mimetype ของข้อมูลปลอมตัวข้อมูลไบนารีที่ส่งคืนโดยเซิร์ฟเวอร์เป็นข้อมูลข้อความและบอกเบราว์เซอร์ว่านี่เป็นชุดอักขระที่ผู้ใช้กำหนด
xhr.overridemimetype ("ข้อความ/ธรรมดา; charset = x-user-defined");
จากนั้นใช้คุณสมบัติ ResponseText เพื่อรับข้อมูลไบนารีที่ส่งคืนโดยเซิร์ฟเวอร์
var binstr = xhr.responsetext;
เนื่องจากเบราว์เซอร์ถือว่าเป็นข้อมูลข้อความในเวลานี้จึงต้องคืนค่าเป็นข้อมูลไบนารีทีละตัว
การคัดลอกรหัสมีดังนี้:
สำหรับ (var i = 0, len = binstr.length; i <len; ++ i) {
var c = binstr.charcodeat (i);
var byte = c & 0xff;
-
การดำเนินการบิต "C & 0XFF" ของบรรทัดสุดท้ายหมายความว่าในสองไบต์ของตัวละครแต่ละตัวมีเพียงไบต์ถัดไปเท่านั้นที่จะถูกเก็บไว้และไบต์ก่อนหน้าจะถูกโยนทิ้งไป เหตุผลก็คือเมื่อเบราว์เซอร์ตีความอักขระมันจะตีความอักขระโดยอัตโนมัติในส่วน 0xF700-0XF7FF ของ Unicode ของ Unicode
8. รับข้อมูลไบนารี (วิธี B: คุณสมบัติการตอบสนอง)
วิธีที่ใหม่กว่าในการดึงข้อมูลไบนารีจากเซิร์ฟเวอร์คือการใช้คุณสมบัติการตอบกลับที่เพิ่มขึ้นใหม่ หากเซิร์ฟเวอร์ส่งคืนข้อมูลข้อความค่าของคุณสมบัตินี้คือ "ข้อความ" ซึ่งเป็นค่าเริ่มต้น เบราว์เซอร์ใหม่กว่ายังสนับสนุนค่าอื่น ๆ นั่นคือพวกเขาสามารถรับข้อมูลในรูปแบบอื่น ๆ
คุณสามารถตั้งค่าการตอบสนองเป็น Blob ซึ่งหมายความว่าเซิร์ฟเวอร์กำลังส่งวัตถุไบนารีกลับมา
การคัดลอกรหัสมีดังนี้:
var xhr = ใหม่ xmlhttprequest ();
xhr.open ('get', '/path/to/image.png');
xhr.ResponSetype = 'blob';
เมื่อได้รับข้อมูลเพียงใช้วัตถุ Blob ที่มาพร้อมกับเบราว์เซอร์ของคุณ
var blob = blob ใหม่ ([xhr.response], {type: 'image/png'});
โปรดทราบว่ามันคือการอ่าน xhr.response ไม่ใช่ xhr.responsetext
นอกจากนี้คุณยังสามารถตั้งค่าการตอบสนองเป็น ArrayBuffer และติดตั้งข้อมูลไบนารีในอาร์เรย์
การคัดลอกรหัสมีดังนี้:
var xhr = ใหม่ xmlhttprequest ();
xhr.open ('get', '/path/to/image.png');
XHR.ResponSetype = "ArrayBuffer";
เมื่อได้รับข้อมูลคุณต้องสำรวจอาร์เรย์นี้
การคัดลอกรหัสมีดังนี้:
var arraybuffer = xhr.Response;
ถ้า (ArrayBuffer) {
var byteArray = ใหม่ UINT8ARRAY (ArrayBuffer);
สำหรับ (var i = 0; i <bytearray.byTelength; i ++) {
// ทำอะไรบางอย่าง
-
-
สำหรับการอภิปรายโดยละเอียดเพิ่มเติมโปรดดูการส่งและรับข้อมูลไบนารี
9. ข้อมูลความคืบหน้า
วัตถุ XMLHTTPRequest เวอร์ชันใหม่มีเหตุการณ์ความคืบหน้าเมื่อส่งข้อมูลซึ่งใช้เพื่อส่งคืนข้อมูลความคืบหน้า
มันแบ่งออกเป็นสองสถานการณ์: อัปโหลดและดาวน์โหลด เหตุการณ์ความคืบหน้าที่ดาวน์โหลดเป็นของวัตถุ XMLHTTPREQUEST และเหตุการณ์ความคืบหน้าที่อัปโหลดเป็นของวัตถุ XMLHTTPREQUEST.UPLOAD
ก่อนอื่นให้กำหนดฟังก์ชั่นการโทรกลับของเหตุการณ์ความคืบหน้า
การคัดลอกรหัสมีดังนี้:
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
จากนั้นในฟังก์ชั่นการโทรกลับให้ใช้คุณสมบัติบางอย่างของเหตุการณ์นี้
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น updateProgress (เหตุการณ์) {
if (event.lengthcomputable) {
var percentcomplete = event.loaded / event.total;
-
-
ในรหัสข้างต้น Event.total เป็นไบต์ทั้งหมดที่ต้องถ่ายโอนและ event.loaded เป็นไบต์ที่ถูกถ่ายโอน หาก Event.lengthcomputable ไม่เป็นความจริง Event.total จะเท่ากับ 0
มีเหตุการณ์อื่น ๆ อีกห้าเหตุการณ์ที่เกี่ยวข้องกับเหตุการณ์ความคืบหน้าซึ่งสามารถระบุฟังก์ชั่นการโทรกลับแยกกัน:
* เหตุการณ์โหลด: การถ่ายโอนเสร็จสมบูรณ์
* เหตุการณ์ยกเลิก: ผู้ใช้ถูกยกเลิกการส่ง
* เหตุการณ์ข้อผิดพลาด: เกิดข้อผิดพลาดระหว่างการส่ง
* เหตุการณ์ LoadStart: การถ่ายโอนเริ่มต้น
* เหตุการณ์ Loadend: การส่งสิ้นสุดลง แต่ฉันไม่รู้ว่ามันประสบความสำเร็จหรือล้มเหลว
10. สื่อการอ่าน
1. บทนำสู่ XMLHTTTPREQUEST ระดับ 2: การแนะนำที่ครอบคลุมเกี่ยวกับคุณสมบัติใหม่
2. เทคนิคใหม่ใน XMLHTTTPREQUEST 2: การแนะนำการใช้งานบางอย่าง
3. การใช้ XMLHTTPREQUEST: การใช้งานขั้นสูงบางอย่างส่วนใหญ่กำหนดเป้าหมายเบราว์เซอร์ Firefox
4. การควบคุมการเข้าถึง HTTP: ภาพรวม CORS
5. การควบคุมการเข้าถึง DOM โดยใช้การแบ่งปันทรัพยากรข้ามต้นกำเนิด: ข้อมูลส่วนหัว HTTP 9 ประเภทของ CORS
6. การควบคุมการเข้าถึงฝั่งเซิร์ฟเวอร์: การตั้งค่า CORS ฝั่งเซิร์ฟเวอร์
7. เปิดใช้งาน CORS: การตั้งค่าเซิร์ฟเวอร์ CORS