JavaScript จัดการกับการตอบสนอง AJAX ในพื้นหลังได้อย่างไร

เนื่องจาก JavaScript ทำงานในเธรดเดียวหลังจากที่ร้องขอ AJAX แล้วจะเกิดอะไรขึ้นในพื้นหลัง ฉันต้องการทราบข้อมูลเชิงลึกเกี่ยวกับเรื่องนี้มากขึ้น

ด้านล่างหน้าปกจาวาสคริปต์มีคิวเหตุการณ์ แต่ละครั้งที่การประมวลผลเธรด javascript เสร็จสิ้นจะตรวจสอบว่ามีเหตุการณ์อื่นในคิวที่จะดำเนินการหรือไม่ หากมีมันจะดึงออกจากคิวและทริกเกอร์เหตุการณ์นั้น (เช่นการคลิกเมาส์เป็นต้น)

เครือข่ายโค้ดเนทีฟที่อยู่ภายใต้การโทร ajax จะรู้ได้เมื่อการตอบกลับ ajax เสร็จสิ้นและเหตุการณ์จะถูกเพิ่มเข้าในคิวเหตุการณ์ของจาวาสคริปต์ โค้ดเนทีฟรู้ได้อย่างไรเมื่อทำการโทร ajax ขึ้นอยู่กับการนำไปใช้งาน อาจถูกนำไปใช้กับเธรดหรืออาจเป็นตัวขับเคลื่อนเหตุการณ์เอง (มันไม่สำคัญ) จุดประสงค์ของการนำไปใช้คือเมื่อการตอบสนอง ajax เสร็จสิ้นโค้ดเนทีฟบางตัวจะรู้ว่าเสร็จสิ้นแล้วและใส่เหตุการณ์ลงในคิว JS

หากไม่มี Javascript ทำงานในเวลากิจกรรมจะถูกเรียกใช้ทันทีซึ่งจะเรียกใช้ตัวจัดการการตอบกลับ ajax หากมีบางอย่างกำลังทำงานอยู่เหตุการณ์จะถูกประมวลผลเมื่อเธรด javascript ปัจจุบันของการดำเนินการเสร็จสิ้น ไม่จำเป็นต้องมีการลงคะแนนใด ๆ โดยเครื่องมือจาวาสคริปต์ เมื่อ Javascript ชิ้นหนึ่งทำงานเสร็จแล้วเอ็นจิ้น JS จะตรวจสอบคิวเหตุการณ์เพื่อดูว่ามีสิ่งใดที่ต้องใช้อีกหรือไม่ ถ้าเป็นเช่นนั้นมันจะป็อปอัพเหตุการณ์ถัดไปที่ปิดคิวและเรียกใช้งานมัน (การเรียกฟังก์ชันการเรียกกลับอย่างน้อยหนึ่งฟังก์ชันที่ลงทะเบียนไว้สำหรับเหตุการณ์นั้น) หากไม่มีอะไรอยู่ในคิวเหตุการณ์แล้วล่าม JS มีเวลาว่าง (การรวบรวมขยะหรือไม่ได้ใช้งาน) จนกว่าเอเจนต์ภายนอกบางอย่างจะใส่อย่างอื่นในคิวเหตุการณ์และปลุกอีกครั้ง

เนื่องจากกิจกรรมภายนอกทั้งหมดผ่านคิวกิจกรรมและไม่มีเหตุการณ์ใดถูกเรียกใช้ในขณะที่จาวาสคริปต์ใช้งานอย่างอื่นอยู่จึงยังคงมีเธรดเดียว

นี่คือบทความบางส่วนเกี่ยวกับรายละเอียด:

• Javascript Timers ทำงานอย่างไร - เขียนโดย John Resig
• เหตุการณ์และเวลาในเชิงลึก
• ข้อมูลจำเพาะ W3: ลูปเหตุการณ์ HTML5
• บทความ MDN เกี่ยวกับ Event Loop
• งานนำเสนอในคิวกิจกรรม JS
• วงกิจกรรม JavaScript: อธิบายแล้ว
• ห้ารูปแบบเพื่อช่วยให้เชื่อง Javascript แบบอะซิงโครนัส
• Javascript Event Loop Presentation
• วิดีโอการอภิปรายวิธีการใช้งาน Javascript (รวมถึงการวนรอบเหตุการณ์เวลา 10:27)

คุณสามารถค้นหาที่นี่เอกสารที่สมบูรณ์มากเกี่ยวกับเหตุการณ์การจัดการใน JavaScript
มันเขียนโดยคนที่ทำงานเกี่ยวกับการใช้งานจาวาสคริปต์ในเบราว์เซอร์ Opera

ดูรายละเอียดเพิ่มเติมได้ที่: "การไหลของเหตุการณ์", "การจัดกิจกรรม" และ "กิจกรรมที่ไม่ใช่ผู้ใช้": คุณจะได้เรียนรู้ว่า:

1. Javascript ทำงานในเธรดเดียวสำหรับแต่ละแท็บเบราว์เซอร์หรือหน้าต่าง
2. เหตุการณ์ถูกจัดคิวและดำเนินการตามลำดับ
3. XMLHttpRequest ถูกเรียกใช้โดยการนำไปใช้และการเรียกกลับจะถูกเรียกใช้โดยใช้คิวเหตุการณ์

หมายเหตุ: ลิงค์เดิมคือ: ลิงค์แต่ตอนนี้ตายไปแล้ว

ฉันต้องการอธิบายรายละเอียดเล็กน้อยเกี่ยวกับ ajax Implementation ที่กล่าวถึงในคำตอบ

แม้ว่า (ปกติ) การทำงานของ JavaScript คือไม่ได้แบบมัลติเธรด - ตามที่ระบุไว้ในคำตอบที่ดีดังกล่าวข้างต้น - อย่างไรก็ตาม , การจัดการที่แท้จริงของAJAX responses(เช่นเดียวกับการจัดการการร้องขอ) เป็นไม่ Javascript และมัน - ปกติ - เป็นแบบมัลติเธรด (ดูการใช้งานแหล่งโครเมียมของ XMLHttpRequest ซึ่งเราจะให้จานด้านบน)

และฉันจะอธิบายให้ใช้รหัสต่อไปนี้:

var xhr = new XMLHttpRequest();

var t = Date.now;
xhr.open( "GET", "https://swx.cdn.skype.com/shared/v/1.2.15/SkypeBootstrap.min.js?v="+t(), true );

xhr.onload = function( e ) {
		console.log(t() + ': step 3');
    
    alert(this.response.substr(0,20));
};
console.log(t() + ': step 1');
xhr.send();
console.log(t() + ': step 2');

after an AJAX request is made(- หลังจากขั้นตอนที่ 1) จากนั้นในขณะที่รหัส js ของคุณดำเนินการ (ขั้นตอนที่ 2 และหลัง) เบราว์เซอร์เริ่มทำงานจริง: 1. การจัดรูปแบบคำขอ tcp 2. เปิดซ็อกเก็ต 3. ส่งส่วนหัว 4. การจับมือกัน 5. การส่ง เนื้อความ 6. การรอการตอบกลับ 7. การอ่านส่วนหัว 8. การอ่านเนื้อหา ฯลฯ การใช้งานทั้งหมดนี้มักจะรันอยู่ในเธรดที่ต่างกันควบคู่ไปกับการเรียกใช้โค้ด js ของคุณ ตัวอย่างเช่นการใช้งานโครเมียมที่กล่าวถึงนั้นใช้Threadable Loader go digg-in 😉, (คุณสามารถรับความประทับใจได้ด้วยการดูที่แท็บเครือข่ายของการโหลดหน้าเว็บคุณจะเห็นคำขอบางอย่างพร้อมกัน)

โดยสรุปฉันจะบอกว่า - อย่างน้อย - การดำเนินการ I / O ส่วนใหญ่ของคุณสามารถทำได้พร้อมกัน / async (และคุณสามารถใช้ประโยชน์จากสิ่งนี้ได้โดยใช้การรอตัวอย่าง) แต่การโต้ตอบทั้งหมดกับการดำเนินการเหล่านั้น (การดำเนินการการเรียกกลับ js) ล้วนเป็นแบบซิงโครนัส