XMLHTTPREQUEST ทำให้การส่งคำขอ HTTP ง่ายมาก คุณเพียงแค่ต้องสร้างอินสแตนซ์ของวัตถุคำขอเปิด URL แล้วส่งคำขอ หลังจากการส่งเสร็จสมบูรณ์สถานะ HTTP ผลลัพธ์และเนื้อหาการตอบกลับที่ส่งคืนสามารถรับได้จากวัตถุคำขอ
คำขอที่สร้างโดย XMLHTTPREQUEST สามารถรับได้สองวิธีโหมดอะซิงโครนัสหรือโหมดซิงโครนัส ประเภทของคำขอถูกกำหนดโดยค่าของ async พารามิเตอร์ที่สามของวิธีการเปิด () ของวัตถุ XMLHTTTPREQUEST นี้ หากค่าของพารามิเตอร์นี้เป็นเท็จคำขอ XMLHTTTPREQUEST จะดำเนินการในโหมดซิงโครนัสมิฉะนั้นกระบวนการจะเสร็จสมบูรณ์ในโหมดอะซิงโครนัส
สองโหมดการสื่อสาร: คำขอแบบซิงโครนัสและอะซิงโครนัส:
ซิงโครไนซ์คำขอ
คำขอการซิงโครไนซ์ในบล็อกหลักบล็อกหน้าและเนื่องจากประสบการณ์การใช้งานที่ไม่ดีคำขอการซิงโครไนซ์ในหัวข้อหลักของเบราว์เซอร์ล่าสุดบางตัวได้ถูกเลิกใช้แล้ว ในกรณีที่หายาก XMLHTTPREQUESTS โดยใช้โหมดซิงโครนัสจะเหมาะสมกว่าการใช้โหมดอะซิงโครนัส
1. เมื่อใช้ XMLHTTPREQUEST ในคนงานคำขอแบบซิงโครนัสนั้นเหมาะสมกว่าคำขอแบบอะซิงโครนัส
รหัสในหน้าแรก:
<script type = "text/javascript"> var omyworker = คนงานใหม่ ("mytask.js"); omyworker.onMessage = ฟังก์ชั่น (oEvent) {แจ้งเตือน ("คนงานกล่าวว่า:" + oEvent.data); - omyworker.postMessage ("สวัสดี"); </script> myFile.txt (ไฟล์ที่ซิงโครไนซ์วัตถุ XMLHTTTPREQUEST ที่ร้องขอ): Hello World !!รวมถึงรหัสคนงาน: mytask.js
self.onMessage = ฟังก์ชั่น (oEvent) {ถ้า (oeVent.data === "hello") {var oreq = ใหม่ xmlhttprequest (); oreq.open ("get", "myfile.txt", false); // คำขอแบบซิงโครนัส Oreq.send (null); self.postMessage (oreq.ResponSetext); -หมายเหตุ: เนื่องจากมีการใช้คนงานคำขอจึงเป็นแบบอะซิงโครนัส
วิธีการที่คล้ายกันสามารถใช้เพื่ออนุญาตให้สคริปต์โต้ตอบกับเซิร์ฟเวอร์ในพื้นหลังและโหลดเนื้อหาบางอย่างล่วงหน้า ตรวจสอบการใช้รายละเอียดเพิ่มเติม
2. สถานการณ์ที่ต้องใช้คำขอแบบซิงโครนัส
ในบางกรณีสามารถใช้เฉพาะการร้องขอ XMLHTTTPREQUEST ของโหมดซิงโครนัสเท่านั้น ตัวอย่างเช่นใน window.onunload และ window.onbeforeforeload ฟังก์ชั่นการจัดการเหตุการณ์ การใช้ Asynchronous XMLHTTPREQUEST ในฟังก์ชันตัวจัดการเหตุการณ์ที่ไม่โหลดของหน้าจะทำให้เกิดปัญหา: เมื่อการตอบกลับถูกส่งคืนหน้าจะไม่มีอยู่อีกต่อไปและตัวแปรทั้งหมดและฟังก์ชั่นการโทรกลับถูกทำลาย ผลลัพธ์สามารถทำให้เกิดข้อผิดพลาดได้เท่านั้น "ฟังก์ชั่นไม่ได้กำหนด" วิธีแก้ปัญหาคือการใช้คำขอในโหมดการซิงโครไนซ์ที่นี่เพื่อให้หน้าจะไม่ถูกปิดจนกว่าคำขอจะเสร็จสมบูรณ์
window.onbeforeunload = function () {var oreq = ใหม่ xmlhttprequest (); Oreq.open ("Get", "logout.php? nick =" + Escape (myName), false); // คำขอแบบซิงโครนัส Oreq.send (Null); if (oreq.responsetext.trim ()! == "ออก"); {// "ออก" ทางกลับข้อมูลที่ส่งคืน "ล้มเหลวคุณต้องการดำเนินการทางออกด้วยตนเองหรือไม่"; -คำขอแบบอะซิงโครนัส
หากคุณใช้โหมดอะซิงโครนัสเมื่อมีการร้องขอข้อมูลอย่างสมบูรณ์ฟังก์ชันการโทรกลับที่ระบุจะถูกดำเนินการ ในขณะที่ดำเนินการตามคำขอเบราว์เซอร์สามารถดำเนินการธุรกรรมอื่น ๆ ได้โดยปกติ
3. ตัวอย่าง: สร้างวิธีมาตรฐานในการอ่านไฟล์ภายนอก
ในบางข้อกำหนดต้องอ่านไฟล์ภายนอกหลายไฟล์ นี่คือฟังก์ชั่นมาตรฐาน ฟังก์ชั่นนี้ใช้วัตถุ xmlhttprequest สำหรับคำขอแบบอะซิงโครนัส นอกจากนี้ยังช่วยให้คุณระบุฟังก์ชั่นการโทรกลับที่แตกต่างกันหลังจากการอ่านแต่ละไฟล์เสร็จสมบูรณ์
ฟังก์ชั่นโหลดไฟล์ (surl, หมดเวลา, fcallback / *, ผ่านในพารามิเตอร์ 1, ผ่านในพารามิเตอร์ 2, ฯลฯ * /) {var apassargs = array.prototype.slice.call (อาร์กิวเมนต์, 3), oreq = ใหม่ xmlhttprequest (); oreq.ontimeout = function () {console.log ("การหมดเวลาขอหมดเวลา"); } oreq.onreadyStateChange = function () {ถ้า (oreq.readyState === 4) {ถ้า (oreq.status === 200) {fcallback.apply (oreq, Apassargs); } else {console.log ("ข้อผิดพลาด", oreq.statustext); - Oreq.open ("Get", surl, true); Oreq.timeout = หมดเวลา; Oreq.send (Null);}การใช้ฟังก์ชันโหลดไฟล์:
ฟังก์ชั่น ShowMessage (SMSG) {Alert (SMSG + This.ResponSetExt);} loadFile ("message.txt", 200, showMessage, "ข้อความใหม่! // n");บรรทัดที่ 1 กำหนดฟังก์ชั่น หลังจากอ่านไฟล์แล้วฟังก์ชัน FCALLBACK จะถูกเรียกด้วยพารามิเตอร์ทั้งหมดหลังจากพารามิเตอร์ที่สามเป็นพารามิเตอร์ของตัวเอง
บรรทัดที่ 3 ใช้การตั้งค่าการหมดเวลาเพื่อหลีกเลี่ยงรหัสของคุณจากการดำเนินการดำเนินการในระยะยาวของข้อมูลการส่งคืนของคำขออ่าน โดยการกำหนดค่าให้กับคุณสมบัติการหมดเวลาของวัตถุ xmlhttprequest ให้กับคุณสมบัติการหมดเวลา
พฤติกรรมที่หก OnReadyStateChange จัดการระบุฟังก์ชั่นการโทรกลับ ทุกครั้งที่ฟังก์ชั่นดำเนินการตรวจสอบว่าคำขอสิ้นสุดลง (สถานะคำขอคือ 4) ถ้าเป็นเช่นนั้นกำหนดว่าคำขอจะสำเร็จหรือไม่ (สถานะ HTTP คือ 200) ถ้าเป็นเช่นนั้นให้เอาต์พุตซอร์สโค้ดหน้า หากเกิดข้อผิดพลาดให้ส่งข้อความแสดงข้อผิดพลาด
บรรทัดที่ 15 ระบุว่าพารามิเตอร์ที่สามเป็นจริงแสดงว่าควรดำเนินการตามคำขอในโหมดอะซิงโครนัส
4. ตัวอย่าง: ใช้คำขอแบบอะซิงโครนัสไม่มีการใช้ปิด
ฟังก์ชั่น switchxhrstate () {switch (this.readyState) {กรณี 0: console.log ("วิธีการเปิด () ยังไม่ได้รับการเรียก");); break; กรณีที่ 1: console.log ("วิธีการส่ง () ยังไม่ได้รับการเรียก"); break; กรณีที่ 2: console.log ("วิธีการส่ง () ถูกเรียกแล้วส่วนหัวการตอบกลับและสถานะการตอบกลับได้รับการส่งคืน"); break; กรณีที่ 3: console.log ("ดาวน์โหลดส่วนหนึ่งของนิติบุคคลตอบกลับได้รับ"); break; กรณีที่ 4: console.log ("คำขอเสร็จสมบูรณ์!"); this.callback.apply (this, this.arguments); }}; ฟังก์ชั่นโหลดไฟล์ (surl, fcallback / *, ส่งผ่านในพารามิเตอร์ 1, ผ่านในพารามิเตอร์ 2, ฯลฯ * /) {var oreq = ใหม่ xmlhttprequest (); OREQ.CALLBACK = FCALLBACK; oreq.arguments = array.prototype.slice.call (อาร์กิวเมนต์, 2); Oreq.onreadyStateChange = switchxhrstate; Oreq.open ("Get", surl, true); Oreq.send (Null);}ใช้ bind:
ฟังก์ชั่น switchxhrstate (fcallback, aarguments) {switch (this.readystate) {กรณี 0: console.log ("วิธีการเปิด () ไม่ได้ถูกเรียก"); break; กรณีที่ 1: console.log ("วิธีการส่ง () ไม่ได้ถูกเรียก"); break; กรณีที่ 2: console.log ("วิธีการส่ง () ถูกเรียกแล้วส่วนหัวการตอบกลับและสถานะการตอบกลับได้รับการส่งคืน"); break; กรณีที่ 3: console.log ("ได้รับเอนทิตีการตอบสนองบางส่วนระหว่างการดาวน์โหลด"); break; กรณีที่ 4: console.log ("คำขอเสร็จสมบูรณ์!"); fcallback.apply (นี่, aarguments); }}; ฟังก์ชั่นโหลดไฟล์ (surl, fcallback / *, ส่งผ่านในพารามิเตอร์ 1, ผ่านในพารามิเตอร์ 2, ฯลฯ * /) {var oreq = ใหม่ xmlhttprequest (); Oreq.onreadyStateChange = switchxhrstate.bind (Oreq, fcallback, array.prototype.slice.call (อาร์กิวเมนต์, 2)); Oreq.open ("Get", surl, true); Oreq.send (Null);}ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น