يلتزم Push Data Data JavaScript بشكل أساسي بخدمة الدفع عبر الإنترنت لـ WebApps. لا نحتاج إلى دفع البيانات بنشاط من الخادم إلى المنطقة المحلية في كل مرة ، مثل الخادم ، لإرسال طلبات AJAX.
تاريخ تدفق البيانات:
1.
2. بعد تحديث H5 ، يحسن WebSocket بشكل كبير راحة دفع البيانات في كلا الاتجاهين واتجاهات أحادية الاتجاه.
3.
المذنب: تقنية دفع الخادم بناءً على اتصال HTTP طويل
يقدم هذا الدرس Comet: A Server Push Technology استنادًا إلى اتصالات HTTP الطويلة ، وهي بنية تطبيق ويب. سيقوم الخادم بدفع البيانات بنشاط إلى برنامج العميل بطريقة غير متزامنة (حلقة Ajax طلب Dead) دون تقديم طلبات صريحة. تعتبر Architecture Comet مناسبة جدًا لتطبيقات الويب التي تعتمد على الأحداث ، بالإضافة إلى التطبيقات التي تتطلب إمكانات تفاعلية وبعثة في الوقت الفعلي ، مثل تحليل سوق تجارة الأسهم وغرف الدردشة وألعاب الويب عبر الإنترنت.
1. دعونا نلقي نظرة أولى على أبسط مثال على بيانات AJAX لطلب 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 = javaScript "> $. النجاح: دالة (البيانات) {console.log (Data) ؛data.php
<؟ header php ('نوع المحتوى: application/json ؛ charset = utf-8') ؛ $ res = array ('success' => 'ok' ، 'text' => 'أنا نص الاختبار') ؛ echo json_encode ($ res) ؛؟>؟>؟وبهذه الطريقة ، يمكن للواجهة الأمامية الحصول على البيانات الخلفية وإخراجها. دعنا نحاكي الواجهة الخلفية لدفع البيانات باستمرار إلى الواجهة الأمامية:
طريقة واحدة هي إرسال طلبات Ajax باستمرار في حلقة الواجهة الأمامية
2. Ajax في الواجهة الأمامية يرسل باستمرار الطلبات:
index.html
<meta charset = "utf-8"> <script type = "text/javaScript" src = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery "JSON" ، النجاح: Data) {console.log (Data) ؛ </script>data.php
<؟ header php ('نوع المحتوى: application/json ؛ charset = utf-8') ؛ header ("cache-control: max-age = 0") ؛ // قم بتعيين No Cache Sleep (1) ؛ $ res = Array ('Success' => 'ok' ، 'text' => 'أنا نص الاختبار') ؛ echo json_encode ($ res) ؛؟>؟ومع ذلك ، فإن استطلاع الاتصال هذا يجعل طلب الشبكة النفايات واضحة للغاية. يمكننا أيضًا السماح لخادم الواجهة الخلفية من خلال هذا الشيء ، انظر المثال التالي
3. Ajax الأصلي ، يقوم الخادم بدفعه مرة واحدة كل مرة (حلقة الخلفية ، استخدم OB_FLUSH () و Flush () للبصق على البيانات)
data.php
<؟ php // header ('content-type: application/json ؛ charset = utf-8') ؛ header ("cache-control: max-age = 0") ؛ // تعيين أي ذاكرة التخزين المؤقت $ i = 0 ؛ بينما ($ i <9) {$ i ++ ؛ // $ res = array ('success' => 'ok' ، 'text' => 'أنا نص الاختبار') ؛ // echo json_encode ($ res) ؛ النوم (1) ؛ $ Radom = Rand (1،999) ؛ صدى $ radom ؛ صدى '<br/>' ؛ ob_flush () ؛ // ذاكرة التخزين المؤقت للإخراج ، يجب استخدامها مع Flush () ؛ // Cache Spit to the Browser}؟>Frontend JS (JS الأصلي تنفيذ AJAX والمخرجات عند تغيير الحالة) مرجع: //www.vevb.com/article/82085.htm
var getxmlhttprequest = function () {if (window.xmlhttprequest) {// المتصفحات الرئيسية توفر كائن xmlhttprequest إرجاع xmlhttprequest () ؛ } آخر إذا (window.active.xobject) {// لا يوفر الإصدار السفلي من متصفح IE كائن XMLHTTPrequest // لذلك يجب عليك استخدام التنفيذ المحدد لمتصفح IE ActivexObject Return New ActiveXOBject ("Microsoft.xmlHttpRequest") ؛ }} ؛ var xhr = getxmlhtprequest () ؛ xhr.onreadyStateChange = function () {console.log (xhr.readyState) ؛ if (xhr.readyState === 3 && xhr.status ==== 200) {// تنفيذ العملية بعد الاستحواذ الناجح // البيانات في xhr.responsetext console.log (xHr.ResponSetext) ؛ }} ؛ xhr.open ("get" ، "data.php" ، true) ؛ xhr.send ("") ؛ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.