PHP에서 로딩 진행률 표시줄 기능을 구현하는 방법에 대해 이야기해 보겠습니다.

대부분의 웹사이트에서는 Ajax 기술을 통해 페이지를 부분적으로 새로 고쳐야 하는 경우가 많으며, 사용자 경험을 개선하려면 로딩 진행률 표시줄이 필요합니다. 이 기사에서는 PHP에서 로딩 진행률 표시줄을 구현하는 방법에 대해 설명합니다.

1. Ajax 기술이란?

Ajax(Asynchronous JavaScript and XML) 기술은 서버와 비동기적으로 데이터를 전송하여 부분 페이지를 업데이트하는 브라우저 기반 클라이언트 측 스크립트 기술입니다. 가장 큰 특징은 전체 페이지를 새로 고치지 않고 데이터를 업데이트하는 비동기 전송입니다. 이는 사용자 경험을 향상시킬 수 있는 주된 이유이기도 합니다.

2. 로딩 진행바 구현 방법

로딩 진행바 구현은 주로 다음 두 가지 방법으로 구현할 수 있습니다.

1. CSS3 구현

CSS3 구현 방법은 상대적으로 간단하며 CSS만 사용하여 구현하면 됩니다. 스타일 코드는 다음과 같습니다.

/*设置进度条的宽度 */
.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. JavaScript 구현

JavaScript 구현 방법은 약간 더 복잡하며 XMLHttpRequest 객체와 해당 이벤트를 사용하여 구현해야 합니다.

먼저 페이지에 진행률 표시줄의 HTML 코드를 추가해야 합니다.

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

그런 다음 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%;
  }
}

마지막으로 JavaScript Logic에서 Ajax 비동기 요청을 구현해야 합니다. :

//创建 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. 요약

PHP에서 로딩 진행률 표시줄을 구현하는 방법은 비교적 간단합니다. CSS3나 JavaScript를 사용하여 구현할 수 있습니다. 그러나 JavaScript를 사용하면 진행률 표시줄의 표시 타이밍과 데이터 처리를 보다 자유롭게 제어할 수 있습니다. 실제 개발 과정에서 실제 요구 사항에 따라 적합한 구현 방법을 유연하게 선택할 수 있습니다.

위 내용은 PHP에서 로딩 진행률 표시줄 기능을 구현하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!