Ajax 데이터 로드 중 진행률 표시줄을 표시하는 방법

드롭다운 상자에서 값을 선택하는 등 사용자가 트리거하는 이벤트를 처리할 때 다음을 사용하여 비동기적으로 데이터를 검색하는 것이 일반적입니다. 아약스. 데이터를 가져오는 동안 사용자에게 어떤 일이 일어나고 있는지 시각적으로 표시하는 것이 좋습니다. 이 기사에서는 Ajax 요청 중에 진행률 표시줄을 표시하는 방법을 살펴봅니다.

Ajax로 진행률 표시줄 구현

Ajax 호출의 진행률을 정확하게 추적하는 진행률 표시줄을 만들려면 다음 단계를 따르세요. :

1. 양식 변경 사항 듣기:

addEventListener('change')를 활용하여 드롭다운 상자의 변경 사항을 듣습니다.

2. Ajax 요청 시작:

Ajax 요청을 보내 원하는 데이터를 검색합니다.

3. 진행 이벤트에 XMLHttpRequest 사용:

Ajax 옵션에서 XMLHttpRequest 객체에 대한 액세스를 제공하는 xhr 함수를 구성합니다. 이 개체를 사용하면 진행 상황을 포함한 다양한 이벤트를 모니터링할 수 있습니다.

4. 업로드 및 다운로드 진행 상황 모니터링:

xhr 함수 내에서 이벤트 리스너를 추가하여 업로드 및 다운로드 진행 상황을 모두 추적합니다. 이러한 이벤트에는 onloadstart, onprogress 및 onloadend.

5가 포함됩니다. 진행률 표시줄 업데이트:

진행률 이벤트를 사용하여 이벤트 객체의 로드된 속성과 전체 속성을 기반으로 진행률을 계산하고 이에 따라 진행률 표시줄을 업데이트합니다.

다음은 이러한 단계를 보여주는 예제 코드 조각입니다.

$.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 progress bar...
            }
        }, false);

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

        return xhr;
    },
    type: "POST",
    url: "/yourfile.php",
    data: "...",
    success: function(data) {
        // Handle successful data retrieval...
    }
});

이러한 기술을 통합하면 Ajax 데이터 로딩 중에 진행률 표시줄을 효과적으로 표시하여 원활하고 유익한 사용자 경험을 보장할 수 있습니다.