AJAX로 데이터를 로드하는 동안 진행률 표시줄 표시

데이터베이스에서 데이터를 검색하는 AJAX 쿼리를 수행하는 경우 시간이 걸릴 수 있습니다. 결과가 반환되도록 합니다. 이 로딩 프로세스 중에 사용자에게 피드백을 제공하기 위해 진행률 표시줄을 표시할 수 있습니다.

jQuery로 진행률 표시줄 만들기

jQuery 라이브러리는 내장된 메서드를 제공합니다. 진행률 표시줄의 생성 및 조작을 용이하게 합니다. AJAX 호출에 진행률 표시줄을 추가하려면 xhr 객체에 이벤트 리스너를 연결하면 됩니다:

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        // Download progress
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data) {
        // Hide the progress bar and display the results
    }
});

이 코드에서는:

• 업로드 속성에 대한 진행 이벤트 리스너는 서버로의 데이터 전송 진행 상황을 추적합니다.
• 진행 이벤트 리스너 xhr 개체의 경우 서버에서 데이터 수신 진행 상황을 추적합니다.
• 퍼센트Complete 변수를 사용하여 완료율을 확인하고 그에 따라 진행률 표시줄을 업데이트할 수 있습니다.
• 데이터가 성공적으로 완료된 후 검색 및 처리되면 진행률 표시줄을 숨기고 결과를 표시할 수 있습니다.

이 접근 방식을 구현하면 사용자 친화적인 진행률 표시줄로 AJAX 콜백을 향상하여 데이터 도중 시각적 피드백을 제공할 수 있습니다. 로딩 작업.