การผลักดันข้อมูล JavaScript ส่วนใหญ่มุ่งมั่นที่จะให้บริการพุชออนไลน์ของ WebApps เราไม่จำเป็นต้องส่งข้อมูลจากเซิร์ฟเวอร์ไปยังพื้นที่ท้องถิ่นอย่างแข็งขันทุกครั้งเช่นเซิร์ฟเวอร์เพื่อส่งคำขอ AJAX
ประวัติความเป็นมาของข้อมูลวิวัฒนาการผลักดัน:
1. โปรโตคอล HTTP นั้นง่ายต่อการสำรวจความคิดเห็นการเชื่อมโยงหรือส่งคำขอไปยังแบ็กเอนด์อย่างต่อเนื่องผ่านส่วนหน้า
2 หลังจากการอัปเดต H5 WebSocket ปรับปรุงความสะดวกในการผลักดันข้อมูลอย่างมากในทั้งทิศทางและทิศทางทิศทางเดียว
3. SSE (เหตุการณ์เซิร์ฟเวอร์ส่ง): วิธีใหม่สำหรับเซิร์ฟเวอร์ในการผลักดันข้อมูล
Comet: Server Push Technology ตาม HTTP Long Connection
บทเรียนนี้แนะนำ Comet: เทคโนโลยีการผลักดันเซิร์ฟเวอร์โดยใช้การเชื่อมต่อยาว HTTP ซึ่งเป็นสถาปัตยกรรมเว็บแอปพลิเคชัน เซิร์ฟเวอร์จะส่งข้อมูลไปยังโปรแกรมไคลเอนต์อย่างแข็งขันในลักษณะอะซิงโครนัส (AJAX Request Dead Loop) โดยไม่ต้องร้องขออย่างชัดเจนไคลเอนต์ สถาปัตยกรรมของ Comet เหมาะอย่างยิ่งสำหรับเว็บแอปพลิเคชันที่ขับเคลื่อนด้วยเหตุการณ์เช่นเดียวกับแอพพลิเคชั่นที่ต้องการความสามารถในการโต้ตอบและแบบเรียลไทม์ที่แข็งแกร่งเช่นการวิเคราะห์ตลาดการซื้อขายหุ้นห้องแชทและเกมออนไลน์เวอร์ชันเว็บ
1. ก่อนอื่นให้ดูตัวอย่างที่ง่ายที่สุดของข้อมูล AJAX Request JSON:
index.html
<meta charset = "utf-8"> <script type = "text/javascript" src = "http://apps.bdimg.com/libs/jquery/2.1.4/jQuery.min.js"> </script> <script type = "text/javascript" ฟังก์ชั่น (data) {console.log (ข้อมูล);}}); </script>data.php
<? ส่วนหัว PHP ('เนื้อหาประเภท: แอปพลิเคชัน/json; charset = utf-8'); $ res = array ('ความสำเร็จ' => 'ตกลง', 'text' => 'ฉันเป็นข้อความของการทดสอบ'); echo json_encode ($ res);?>?>ด้วยวิธีนี้ส่วนหน้าสามารถรับข้อมูลแบ็คเอนด์และส่งออกได้ มาจำลองแบ็กเอนด์ผลักดันข้อมูลไปยังส่วนหน้าอย่างต่อเนื่อง:
วิธีหนึ่งคือการส่งคำขอ AJAX อย่างต่อเนื่องในลูปส่วนหน้าอย่างต่อเนื่อง
2. Ajax ใน jQuery front-end ส่งคำขออย่างต่อเนื่อง:
index.html
<meta charset = "utf-8"> <script type = "text/javascript" src = "http://apps.bdimg.com/libs/jquery/2.1.4/jQuery.min.js" "JSON", ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {console.log (ข้อมูล); </script>data.php
<? ส่วนหัว PHP ('เนื้อหาประเภท: แอปพลิเคชัน/json; charset = utf-8'); ส่วนหัว ("แคช-ควบคุม: max-age = 0"); // Set No Cache Sleep (1); $ res = array ('success' => 'ok', 'text' => 'ฉันเป็นข้อความของการทดสอบ'); echo json_encode ($ res);?>อย่างไรก็ตามการสำรวจการเชื่อมต่อดังกล่าวทำให้เครือข่ายขอให้เสียชัดเจนมาก นอกจากนี้เรายังสามารถปล่อยให้เซิร์ฟเวอร์แบ็กเอนด์ผ่านสิ่งนี้ดูตัวอย่างต่อไปนี้
3. AJAX ดั้งเดิมเซิร์ฟเวอร์จะผลักมันเป็นครั้งคราว (Backend Loop ใช้ OB_FLUSH () และ Flush () เพื่อคายข้อมูล)
data.php
<? php // ส่วนหัว ('เนื้อหาประเภท: แอปพลิเคชัน/json; charset = utf-8'); ส่วนหัว ("แคช-ควบคุม: max-age = 0"); // ตั้งค่าไม่แคช $ i = 0; ในขณะที่ ($ i <9) {$ i ++; // $ res = array ('success' => 'ok', 'text' => 'ฉันเป็นข้อความของการทดสอบ'); // echo json_encode ($ res); นอนหลับ (1); $ radom = rand (1,999); Echo $ Radom; Echo '<br/>'; ob_flush (); // แคชเอาท์พุทจะต้องใช้กับ flush (); // แคชถ่มน้ำลายไปที่เบราว์เซอร์}?>Frontend JS (Native JS ใช้ AJAX และเอาต์พุตเมื่อสถานะเปลี่ยนแปลง) การอ้างอิง: //www.vevb.com/article/82085.htm
var getxmlhttpRequest = function () {if (window.xmlhttpRequest) {// เบราว์เซอร์หลักให้ XMLHTTPREQUEST OBJECT RETURN ใหม่ XMLHTTPREQUEST (); } อื่นถ้า (window.activexobject) {// รุ่นที่ต่ำกว่าของเบราว์เซอร์ IE ไม่ได้ให้วัตถุ XMLHTTPREQUEST // ดังนั้นคุณต้องใช้การใช้งานเฉพาะของเบราว์เซอร์ IE ActiveXObject ส่งคืน ActiveXObject ใหม่ ("Microsoft.xmlhttprequest"); }}; var xhr = getxmlhttprequest (); xhr.onreadystatechange = function () {console.log (xhr.readystate); if (xhr.readystate === 3 && xhr.status === 200) {// ดำเนินการหลังจากการได้มาที่สำเร็จ // ข้อมูลอยู่ใน XHR.ResponSetext console.log (xhr.ResponSetext); }}; xhr.open ("รับ", "data.php", true); xhr.send ("");ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript