대부분의 웹사이트에서는 Ajax 기술을 통해 페이지를 부분적으로 새로 고쳐야 하는 경우가 많으며, 사용자 경험을 개선하려면 로딩 진행률 표시줄이 필요합니다. 이 기사에서는 PHP에서 로딩 진행률 표시줄을 구현하는 방법에 대해 설명합니다.
1. Ajax 기술이란?
Ajax(Asynchronous JavaScript and XML) 기술은 서버와 비동기적으로 데이터를 전송하여 부분 페이지를 업데이트하는 브라우저 기반 클라이언트 측 스크립트 기술입니다. 가장 큰 특징은 전체 페이지를 새로 고치지 않고 데이터를 업데이트하는 비동기 전송입니다. 이는 사용자 경험을 향상시킬 수 있는 주된 이유이기도 합니다.
2. 로딩 진행바 구현 방법
로딩 진행바 구현은 주로 다음 두 가지 방법으로 구현할 수 있습니다.
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%; } }
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!