Mari kita bincangkan tentang cara melaksanakan fungsi bar kemajuan memuatkan dalam PHP

Dalam kebanyakan tapak web, anda akan menghadapi keperluan untuk menyegarkan sebahagian halaman melalui teknologi Ajax Dalam kebanyakan kes, bar kemajuan pemuatan diperlukan untuk meningkatkan pengalaman pengguna. Artikel ini akan bercakap tentang cara melaksanakan bar kemajuan pemuatan dalam PHP.

1. Apakah teknologi Ajax?

Teknologi Ajax (Asynchronous JavaScript and XML) ialah teknologi skrip sisi klien berasaskan penyemak imbas yang mengemas kini halaman separa dengan menghantar data secara tak segerak dengan pelayan. Ciri terbesarnya ialah penghantaran tak segerak, yang mengemas kini data tanpa menyegarkan keseluruhan halaman. Ini juga merupakan sebab utama mengapa ia boleh meningkatkan pengalaman pengguna.

2. Cara melaksanakan bar kemajuan pemuatan

Untuk pelaksanaan bar kemajuan pemuatan, terdapat dua cara utama untuk melaksanakannya.

1. Pelaksanaan CSS3

Kaedah pelaksanaan CSS3 agak mudah dan anda hanya perlu menggunakan CSS untuk melaksanakannya. Kod gaya adalah seperti berikut:

/*设置进度条的宽度 */
.progress-wrap {
  width: 100%;
  height: 5px;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 99999;
}
/*设置进度条的颜色 */
.progress-bar {
  width: 0;
  height: 5px;
  background-color: #5ea9dd;
  animation: progress-bar 2.5s linear;
}
/*设置进度动画 */
@keyframes progress-bar {
  from { width: 0; }
  to { width: 100%; }
}

2. Pelaksanaan JavaScript

Kaedah pelaksanaan JavaScript adalah lebih rumit sedikit dan perlu dilaksanakan menggunakan objek XMLHttpRequest dan peristiwa.

Pertama, kita perlu menambah kod HTML bar kemajuan pada halaman:

<!--加载进度条-->
<div id="loading" class="loading">
  <div class="loading-container">
    <div class="loading-progress">
      <div class="loading-bar"></div>
    </div>
  </div>
</div>

Kemudian, kita perlu menggayakan bar kemajuan dalam CSS:

/*加载进度条*/
.loading {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.5);
}
.loading .loading-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading .loading-progress {
  margin: 0 auto;
  width: 200px;
  height: 5px;
  background-color: rgba(255,255,255,.3);
  border-radius: 5px;
}
.loading .loading-progress .loading-bar {
  height: 5px;
  background-color: #fff;
  border-radius: 5px;
  animation: loading 2.5s linear;
}
/*设置进度动画*/
@keyframes loading {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

Akhir sekali, kami perlu melaksanakan logik yang berkaitan dengan permintaan tak segerak Ajax dalam JavaScript:

//创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
//设置监听事件
xhr.onreadystatechange = function () {
  //请求完成后
  if (xhr.readyState == 4) {
    //隐藏进度条
    $('#loading').fadeOut(300);
    //请求成功
    if (xhr.status == 200) {
      //处理响应数据...
    }
    //请求失败
    else {
      //处理错误...
    }
  }
}
//发送请求
xhr.open('GET', '/path/to/server', true);
xhr.send(null);
//显示进度条
$('#loading').fadeIn(300);

3 Ringkasan

Kaedah PHP melaksanakan bar kemajuan pemuatan adalah agak mudah. kita boleh Gunakan CSS3 atau JavaScript untuk mencapai ini. Walau bagaimanapun, menggunakan JavaScript membolehkan anda mengawal masa paparan bar kemajuan dan pemprosesan data dengan lebih bebas. Dalam proses pembangunan sebenar, kita secara fleksibel boleh memilih kaedah pelaksanaan yang sesuai dengan kita berdasarkan keperluan sebenar.

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara melaksanakan fungsi bar kemajuan memuatkan dalam PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!