วิเคราะห์และจัดการแอตทริบิวต์ Responsexml
หากคุณใช้ XMLHTTPREQUEST เพื่อรับเนื้อหาของเอกสาร XML ระยะไกลคุณสมบัติ ResponsexML จะเป็นวัตถุ DOM ที่แยกวิเคราะห์จากเอกสาร XML ซึ่งยากที่จะจัดการและวิเคราะห์ นี่คือห้าวิธีหลักในการวิเคราะห์เอกสาร XML:
1. ใช้ XPATH เพื่อค้นหาส่วนสูตรของเอกสาร
2. ใช้ jxon เพื่อแปลงเป็นแผนผังวัตถุ JavaScript
3. แยกวิเคราะห์และจัดอันดับ XML ด้วยตนเองเป็นสตริงหรือวัตถุ
4. ใช้ XMLSerializer เพื่อทำให้เป็นอนุกรมต้นไม้ DOM เป็นสตริงหรือไฟล์
5. หากคุณรู้เนื้อหาของเอกสาร XML ล่วงหน้าคุณสามารถใช้ regexp ได้ หากคุณได้รับผลกระทบจากสายใหม่เมื่อสแกนด้วย regexp คุณอาจต้องการลบนิวไลน์ทั้งหมด อย่างไรก็ตามวิธีนี้เป็น "มือสุดท้าย" เพราะหากรหัส XML เปลี่ยนไปเล็กน้อยวิธีการอาจล้มเหลว
การแยกวิเคราะห์และจัดการคุณสมบัติ ResponsetExt ที่มีเอกสาร HTML
หมายเหตุ: HTML ได้รับอนุญาตให้แยกวิเคราะห์ผ่านแอตทริบิวต์ xmlhttprequest.responsexml ในข้อกำหนด W3C XMLHTTPREQUEST สำหรับรายละเอียดเพิ่มเติมโปรดอ่าน html ใน xmlhttprequest
หากคุณใช้ XMLHTTPREQUEST เพื่อรับหน้า HTML จากปลายระยะไกลแท็ก HTML ทั้งหมดจะถูกเก็บไว้ในคุณสมบัติ ResponseText เป็นสตริงทำให้ยากที่จะจัดการและแยกวิเคราะห์แท็กเหล่านี้ มีสามวิธีหลักในการแยกแท็ก HTML เหล่านี้:
1. ใช้คุณสมบัติ XMLHTTPREQUEST.RESPONSEXML
2. การฉีดเนื้อหาลงในชิ้นส่วนเอกสารผ่าน fragment.body.innerhtml และวนซ้ำผ่านชิ้นส่วนใน DOM
3. หากคุณรู้เนื้อหาของเอกสาร HTML ล่วงหน้าคุณสามารถใช้ regexp ได้ หากคุณได้รับผลกระทบจากสายใหม่เมื่อสแกนด้วย regexp คุณอาจต้องการลบนิวไลน์ทั้งหมด อย่างไรก็ตามวิธีนี้เป็น "มือสุดท้าย" เพราะหากรหัส HTML เปลี่ยนไปเล็กน้อยวิธีการอาจล้มเหลว
การจัดการข้อมูลไบนารี
แม้ว่าโดยทั่วไป XMLHTTPREQUEST ใช้เพื่อส่งและรับข้อมูลข้อความ แต่ก็สามารถส่งและยอมรับเนื้อหาไบนารีได้จริง มีหลายวิธีที่ได้รับการทดสอบอย่างดีในการบังคับให้ส่งข้อมูลไบนารีโดยใช้ xmlhttprequest วิธี. OverridEmimeType () ของ XMLHTTPREQUEST เป็นวิธีแก้ปัญหาแม้ว่ามันจะไม่ใช่วิธีมาตรฐาน
var oreq = ใหม่ xmlhttprequest (); oreq.open ("รับ", url, true); // ดึงข้อมูลที่ไม่ได้ประมวลผลเป็น binary stringoreq.overridemimetype ("ข้อความ/ธรรมดา; charset = x-user-defined");คุณสมบัติ Responsetype ถูกเพิ่มลงในข้อกำหนด XMLHTTTPREQUEST ระดับ 2 ทำให้ง่ายต่อการส่งและรับข้อมูลไบนารี
var oreq = ใหม่ xmlhttprequest (); oreq.onload = function (e) {var arraybuffer = xhr.Response; // ไม่ใช่ ResponseText/ * ... */} oreq.open ("รับ", url, true); oreq.responsetype = "arraybuffer"; oreq.send ();ยอมรับข้อมูลไบนารีโดยใช้อาร์เรย์ประเภท JavaScript
คุณสามารถเปลี่ยนประเภทข้อมูลของการตอบกลับที่ส่งคืนจากเซิร์ฟเวอร์โดยการตั้งค่าคุณสมบัติการตอบสนองของวัตถุ XMLHTTPRequest ค่าแอตทริบิวต์ที่มีอยู่คือสตริงที่ว่างเปล่า (ค่าเริ่มต้น), "ArrayBuffer", "Blob", "เอกสาร" และ "ข้อความ" ค่าของแอตทริบิวต์การตอบสนองจะแตกต่างกันไปขึ้นอยู่กับค่าของการตอบสนองของคุณสมบัติซึ่งอาจเป็น ArrayBuffer, Blob, เอกสาร, สตริงหรือ NULL (หากคำขอไม่เสร็จหรือล้มเหลว)
ตัวอย่างต่อไปนี้อ่านไฟล์ภาพไบนารีและอาร์เรย์ของจำนวนเต็ม 8 บิตที่ไม่ได้ลงชื่อถูกสร้างขึ้นจากไบต์ไบต์ดั้งเดิมของไฟล์
var oreq = ใหม่ xmlhttprequest (); oreq.open ("get", "/myfile.png", true); oreq.responsetype = "arraybuffer"; oreq.onload = function (oEvent) // หมายเหตุ: ไม่ใช่ Oreq.ResponSetext ถ้า (ArrayBuffer) {var byteArray = ใหม่ UINT8ARRAY (ArrayBuffer); สำหรับ (var i = 0; i <bytearray.byTelength; i ++) {// การดำเนินการสำหรับแต่ละไบต์ในอาร์เรย์}}}; oreq.send (null);นอกเหนือจากวิธีการข้างต้นคุณยังสามารถใช้ Blobbuilder API เพื่อเพิ่มข้อมูล ArrayBuffer โดยตรงไปยังวัตถุ Blob เนื่องจาก API ยังอยู่ในขั้นตอนการทดลองจึงจำเป็นต้องเพิ่มคำนำหน้าเฉพาะ:
var blobbuilder = window.mozblobbuilder || window.webkitblobbuilder || window.msblobbuilder || window.blobbuilder; var oreq = ใหม่ xmlhttprequest (); oreq.open ("get", "/myfile.png", true); oreq.responsetype = "arraybuffer"; oreq.onload = function blobbuilder.append (oreq.response); var blob = blobbuilder.getBlob ("image/png"); // ... }; oreq.send ();รับข้อมูลไบนารีในเบราว์เซอร์เก่า
วิธี LOAD_Binary_Resource () ต่อไปนี้สามารถโหลดข้อมูลไบนารีจาก URL ที่ระบุและส่งคืนข้อมูลไปยังผู้โทร
ฟังก์ชั่น load_binary_resource (url) {var req = ใหม่ xmlhttprequest (); req.open (/'get/', url, false); // XHR Binary Charset เลือกโดย Marcus Granado 2006 [http://mgran.blogspot.com] req.overridemimetype (/'text/plain; charset = x-user-defined/'); req.Send (NULL); if (req.status! = 200) return /' /'; return req.responsetext;}การดำเนินการที่ยอดเยี่ยมที่สุดคือในบรรทัดที่ห้าซึ่งเขียนประเภท MIME เริ่มต้นใหม่บังคับให้เบราว์เซอร์ปฏิบัติต่อการตอบสนองเป็นไฟล์ข้อความธรรมดาโดยใช้ชุดอักขระที่ผู้ใช้กำหนด สิ่งนี้บอกให้เบราว์เซอร์ไม่แยกวิเคราะห์ข้อมูลและส่งคืน bytecode ที่ยังไม่ได้ประมวลผลโดยตรง
var filestream = load_binary_resource (url); var abyte = filestream.charcodeat (x) & 0xff; // โยนไบต์บิตสูง (F7) ออกไป
ตัวอย่างข้างต้นได้รับไบต์ที่ X จากข้อมูลไบนารีที่ส่งคืนโดยคำขอ ช่วงชดเชยที่ถูกต้องคือ 0 ถึง filestream.length-1
ตรวจสอบไฟล์ดาวน์โหลดโดยใช้ XMLHTTTPREQUEST สำหรับรายละเอียดและดูไฟล์ดาวน์โหลด
ส่งข้อมูลไบนารี
วิธีการส่งของวัตถุ XMLHTTTPREQUEST ได้รับการปรับปรุงและข้อมูลไบนารีสามารถส่งได้ง่ายๆโดยผ่าน ArrayBuffer, Blob หรือ File Object
ตัวอย่างต่อไปนี้สร้างไฟล์ข้อความและส่งไฟล์ไปยังเซิร์ฟเวอร์โดยใช้วิธีการโพสต์ คุณยังสามารถใช้ประเภทข้อมูลไบนารีอื่น ๆ นอกเหนือจากไฟล์ข้อความ
var oreq = ใหม่ xmlhttprequest (); oreq.open ("post", url, true); oreq.onload = function (oevent) {// หลังจากการอัปโหลดเสร็จสมบูรณ์}; var bb = new blobbuilder (); // จำเป็นต้องใช้คำนำหน้าที่เหมาะสม: window.mozblobbuilder หรือ window.webkitblobbuilderbb.append (/'abc123/'); oreq.send (bb.getblob (/'ข้อความ/ธรรมดา/'));ส่งอาร์เรย์ของประเภทเป็นข้อมูลไบนารี
คุณสามารถส่งอาร์เรย์ประเภท JavaScript เป็นข้อมูลไบนารี
var myarray = new ArrayBuffer (512); var longint8View = ใหม่ uint8Array (myarray); สำหรับ (var i = 0; i <longint8view.length; i ++) {longint8view [i] = i % 255; เท็จ); xhr.send (myarray);ตัวอย่างข้างต้นสร้างอาร์เรย์จำนวนเต็ม 8 บิต 812 บิตและส่ง แน่นอนคุณสามารถส่งข้อมูลไบนารีได้
ติดตามความคืบหน้า
การตรวจสอบเหตุการณ์ความคืบหน้าที่รองรับ DOM สำหรับการส่ง XMLHTTPREQUEST และติดตามข้อกำหนดเหตุการณ์ความคืบหน้าของเว็บ API: เหตุการณ์เหล่านี้ใช้อินเทอร์เฟซ ProgressEvent
var req = ใหม่ xmlhttprequest (); // อัปโหลดฟัง req.addeventListener ("ความคืบหน้า", updateProgress, false); req.addeventListener ("โหลด", transfercomplete, false); req.addeventListener ("ข้อผิดพลาด" false); req.open (... ); ... // ความคืบหน้าในการถ่ายโอนจากเซิร์ฟเวอร์ไปยังไคลเอนต์ (ดาวน์โหลด) ฟังก์ชั่น updateProgress (evt) {ถ้า (evt.lengthcomputable) {var percentcomplete = evt.loaded/ evt.total; ... } else {// ไม่สามารถคำนวณข้อมูลความคืบหน้าได้เนื่องจากไม่ทราบขนาดทั้งหมด}}หมายเหตุ: คุณต้องเพิ่มการฟังเหตุการณ์ก่อนที่จะขอเปิดโทรเปิด () มิฉะนั้นเหตุการณ์ความคืบหน้าจะไม่ถูกทริกเกอร์
ในตัวอย่างก่อนหน้านี้เหตุการณ์ความคืบหน้าจะถูกประมวลผลโดยฟังก์ชั่น UpdateProgress () และได้รับจำนวนรวมของไบต์ทั้งหมดที่ส่งและส่งไปแล้วซึ่งเป็นความยาวโดยรวม (ไบต์) ของข้อมูลที่ส่งจากส่วนหัว "ความยาวเนื้อหา" อย่างไรก็ตามหากค่าของคุณสมบัติความยาวของการคำนวณเป็นเท็จไม่ทราบจำนวนทั้งหมดของไบต์และค่ารวมคือ 0 ถ้าเป็นที่รู้จัก
เหตุการณ์ความคืบหน้ามีอยู่ทั้งในการดาวน์โหลดและอัปโหลดการส่งสัญญาณ เหตุการณ์ที่เกี่ยวข้องกับการดาวน์โหลดจะถูกทริกเกอร์บนวัตถุ XMLHTTPRequest เช่นเดียวกับตัวอย่างด้านบน การอัปโหลดเหตุการณ์ที่เกี่ยวข้องจะถูกทริกเกอร์บนวัตถุ XMLHTTPREQUEST.UPLOAD เช่นนี้:
var req = ใหม่ xmlhtttprequest (); // ดาวน์โหลดผู้ฟัง req.upload.addeventListener ("ความคืบหน้า", updateProgress); req.upload.addeventListener ("โหลด", transfercomplete); req.upload.addeventListener transferfailed); req.upload.addeventlistener ("ยกเลิก", transfercanceled); req.open ();หมายเหตุ: เหตุการณ์ความคืบหน้าไม่ถูกต้องเมื่อใช้ไฟล์: โปรโตคอล
ใช้เหตุการณ์ loadend เพื่อตรวจจับเงื่อนไขการโหลดทั้งสาม (ยกเลิก, โหลด, ข้อผิดพลาด):
req.addeventListener ("loadend", loadend, false);
ควรสังเกตว่าไม่มีวิธีที่จะรู้ว่าเงื่อนไขที่ข้อมูลที่ได้รับจากเหตุการณ์โหลดนั้นเกิดจากการยกเลิกการดำเนินการ อย่างไรก็ตามคุณสามารถใช้กิจกรรมนี้เพื่อจัดการกับมันในตอนท้ายของการส่งสัญญาณทั้งหมด
วัตถุ XMLHTTPREQUEST กระตุ้นเหตุการณ์ประเภทต่าง ๆ ในขั้นตอนต่าง ๆ ของคำขอดังนั้นจึงไม่จำเป็นต้องตรวจสอบคุณสมบัติ ReadyState
เมื่อมีการเรียกว่าส่ง () เหตุการณ์การโหลดสตาร์ตเดียวจะถูกทริกเกอร์ เมื่อการตอบสนองของเซิร์ฟเวอร์กำลังโหลดวัตถุ XMLHTTTPREQUEST จะได้สัมผัสกับเหตุการณ์ความคืบหน้าโดยปกติทุก ๆ 50 มิลลิวินาทีดังนั้นเหตุการณ์เหล่านี้สามารถนำมาใช้เพื่อให้ข้อเสนอแนะของผู้ใช้เกี่ยวกับความคืบหน้าของคำขอ
หากคำขอเสร็จสมบูรณ์อย่างรวดเร็วอาจไม่ก่อให้เกิดเหตุการณ์ความคืบหน้า เมื่อเหตุการณ์เสร็จสิ้นเหตุการณ์การโหลดจะถูกทริกเกอร์
มี 3 กรณีที่ไม่สามารถร้องขอ HTTP ได้ซึ่งสอดคล้องกับ 3 เหตุการณ์ หากการหมดเวลาการร้องขอเหตุการณ์การหมดเวลาจะถูกทริกเกอร์ หากคำขอยกเลิกเหตุการณ์การยกเลิกจะถูกเรียกใช้ ข้อผิดพลาดของเครือข่ายเช่นการเปลี่ยนเส้นทางมากเกินไปป้องกันไม่ให้คำขอเสร็จสมบูรณ์ แต่เมื่อสิ่งเหล่านี้เกิดขึ้นเหตุการณ์ข้อผิดพลาดจะถูกทริกเกอร์
สำหรับคำขอเฉพาะใด ๆ เบราว์เซอร์จะทำให้เกิดการโหลดการยกเลิกการหมดเวลาและเหตุการณ์ข้อผิดพลาดเพียงครั้งเดียวรวมถึงเหตุการณ์ความคืบหน้า
if (/'onProgress/' in (ใหม่ XMLHTTPREQUEST ())) {// การตรวจจับว่าเหตุการณ์ความคืบหน้าได้รับการสนับสนุน var Request = ใหม่ XMLHTTPREQUEST (); request.onProgress = function (e) {ถ้า (E.LengthComputable) {progress.innerhtml = math.round (100* e.loaded/e.total) +/'%/'; -ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น