XMLHttpRequest에서 데이터 전송 진행 상황을 어떻게 추적할 수 있나요?

XMLHttpRequest의 진행 상황 모니터링

XMLHttpRequest를 사용하면 웹 애플리케이션이 데이터를 비동기적으로 보내고 받을 수 있습니다. XMLHttpRequest의 진행 상황, 특히 업로드 및 다운로드된 바이트를 추적할 수 있습니까?

업로드된 바이트

업로드된 바이트의 진행 상황을 가져오는 것은 비교적 간단합니다. xhr.upload.onprogress 이벤트를 활용하세요. 브라우저는 업로드된 데이터 크기를 전체 파일 크기와 비교하여 진행률을 계산합니다.

다운로드된 바이트

다운로드된 바이트의 진행률을 모니터링하는 것은 일반적으로 브라우저이므로 더 어렵습니다. 전체 응답 크기를 모릅니다. 해결 방법은 총 응답 크기를 나타내기 위해 서버 측 스크립트의 Content-Length 헤더를 설정하는 것입니다. 이를 통해 브라우저는 다운로드 진행률을 계산할 수 있습니다.

예

알려진 크기의 zip 파일을 읽고 보내는 서버 스크립트를 생각해 보세요.

<?php
$filesize = filesize('test.zip');
header("Content-Length: " . $filesize);
readfile('test.zip');
?>

아래 JavaScript 코드는 Content-Length 헤더를 사용하여 다운로드 진행 상황을 모니터링할 수 있습니다.

<code class="javascript">function updateProgress(evt) {
   if (evt.lengthComputable) {
      // evt.loaded: Bytes received by the browser
      // evt.total: Total bytes specified in the header
      var percentComplete = (evt.loaded / evt.total) * 100;
      $('#progressbar').progressbar("option", "value", percentComplete);
   }
}   
function sendreq(evt) {
    var req = new XMLHttpRequest(); 
    $('#progressbar').progressbar();    
    req.onprogress = updateProgress;
    req.open('GET', 'test.php', true);  
    req.onreadystatechange = function (aEvt) {  
        if (req.readyState == 4) 
        {  
             //run any callback here
        }  
    };  
    req.send(); 
}</code>

이 솔루션을 사용하면 업데이트를 위해 서버를 폴링하는 대용량 파일의 경우에도 다운로드 진행 상황을 모니터링할 수 있습니다. 이상적이지 않습니다.

위 내용은 XMLHttpRequest에서 데이터 전송 진행 상황을 어떻게 추적할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!