Penjelasan terperinci tentang data JavaScript menolak kemahiran teknologi_javascript Komet

Tekanan data JavaScript terutamanya didedikasikan untuk perkhidmatan tolak dalam talian aplikasi web Kami tidak perlu menghantar permintaan Ajax ke pelayan setiap kali dan secara aktif menolak data dari pelayan ke setempat.

Sejarah evolusi tolakan data:

1. Tinjauan ringkas protokol HTTP, simpan pautan atau hantar permintaan secara berterusan ke bahagian belakang melalui bahagian hadapan

2 Selepas kemas kini H5, WebSocket telah meningkatkan kemudahan tolakan data dua hala dan sehala

3. SSE (Peristiwa Hantar-Pelayan): cara baharu pelayan menolak data

Komet: Teknologi tolak pelayan berdasarkan sambungan panjang HTTP
Kelas ini memperkenalkan Comet: teknologi tolak pelayan berdasarkan sambungan panjang HTTP Comet ialah seni bina aplikasi web. Pelayan akan secara aktif menolak data ke program klien dalam cara tak segerak (gelung tak terhingga permintaan Ajax) tanpa pelanggan membuat permintaan secara eksplisit. Seni bina Komet sangat sesuai untuk aplikasi dan aplikasi Web dipacu peristiwa yang memerlukan interaktiviti yang kukuh dan prestasi masa nyata, seperti analisis dagangan saham, bilik sembang dan permainan dalam talian berasaskan Web.

1. Mari kita lihat contoh paling mudah ajax yang meminta data 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">
 $.ajax({
  url: 'data.php',
  dataType: "json",
  success: function(data){
   console.log(data);
  }
 });
</script>

data.php

<&#63;php 
header('Content-type: application/json;charset=utf-8');
$res = array('success'=>'ok', 'text'=>'我是测试的文本');
echo json_encode($res);
&#63;>

Dengan cara ini, bahagian hadapan boleh mendapatkan data bahagian belakang dan mengeluarkannya. Mari kita simulasi bahagian belakang yang terus menolak data ke bahagian hadapan:

Salah satu cara ialah menghantar permintaan ajax secara berterusan dalam gelung bahagian hadapan

2. Ajax jQuery bahagian hadapan menghantar permintaan secara berterusan:

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">
function conn(){
 $.ajax({
  url: 'data.php',
  dataType: "json",
  success: function(data){
   console.log(data);
   conn();
  }
 });
}
conn(); 
</script>

data.php

<&#63;php 
header('Content-type: application/json;charset=utf-8');
header("Cache-Control:max-age=0"); //设置没有缓存
sleep(1);
$res = array('success'=>'ok', 'text'=>'我是测试的文本');
echo json_encode($res);
&#63;>

Walau bagaimanapun, undian sambungan sedemikian jelas membazirkan permintaan rangkaian Kami juga boleh membiarkan pelayan bahagian belakang melakukan ini dalam satu gelung. Lihat contoh di bawah

3. Ajax Asli, pelayan menolak sekali-sekala (gelung belakang, gunakan ob_flush() dan flush() untuk mengeluarkan data)

data.php

<&#63;php 
// header('Content-type: application/json;charset=utf-8');
header("Cache-Control:max-age=0"); //设置没有缓存
$i = 0;
while ($i<9) {
 $i++;
 // $res = array('success'=>'ok', 'text'=>'我是测试的文本');
 // echo json_encode($res);
 sleep(1);
 $radom = rand(1,999);
 echo $radom;
 echo '<br/>';
 ob_flush(); //输出缓存，必须和flush()一起使用
 flush(); //缓存吐到浏览器
}
&#63;>

Js bahagian hadapan (js asli melaksanakan ajax dan output apabila status berubah) Rujukan: http://www.jb51.net/article/82085.htm

var getXmlHttpRequest = function() {
 if (window.XMLHttpRequest) {
  //主流浏览器提供了XMLHttpRequest对象
  return new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  //低版本的IE浏览器没有提供XMLHttpRequest对象
  //所以必须使用IE浏览器的特定实现ActiveXObject
  return new 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("get", "data.php", true);
xhr.send("");

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.