XMLHttpRequest에 대한 진행 업데이트 얻기

웹 브라우저는 클라이언트-서버 데이터 교환을 위한 XMLHttpRequest(XHR) 객체를 제공합니다. 표준 XHR API에는 고유한 진행 상황 추적 기능이 없지만 데이터 전송 진행 상황을 모니터링하는 방법이 있습니다.

업로드된 바이트:

XHR은 xhr.upload를 노출합니다. 데이터 업로드 진행 상황을 모니터링하기 위한 onprogress 이벤트입니다. 브라우저는 전체 데이터 크기와 업로드된 양을 모두 추적하므로 정확한 진행 정보를 제공할 수 있습니다.

다운로드한 바이트:

다운로드 진행 상황을 추적하는 것이 더 어렵습니다. 브라우저는 서버가 도착할 때까지 서버에서 전송될 데이터의 크기를 알 수 없습니다. 한 가지 해결책은 서버 스크립트에 Content-Length 헤더를 설정하여 전송할 데이터의 전체 크기를 나타내는 것입니다. 이 헤더가 있으면 브라우저는 다운로드 진행 상황을 정확하게 모니터링할 수 있습니다.

구현 예:

다음 코드는 jQuery UI를 사용하여 파일 업로드 진행 상황을 추적하는 방법을 보여줍니다. 진행률 표시줄을 표시하려면:

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded: bytes received
    // evt.total: total bytes (from the Content-Length 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) {
      // Handle the response here
    }
  };
  req.send();
}

서버측 스크립트에 Content-Length 헤더를 설정하면 데이터 업로드 및 다운로드 모두에 대한 정확한 진행 상황 추적이 보장됩니다.

결론:

표준 XHR API에는 진행 상황 추적 기능이 내장되어 있지 않지만 위에 설명된 기술을 통해 개발자는 웹 애플리케이션에서 데이터 전송 진행 상황을 모니터링할 수 있습니다. 적절한 Content-Length 헤더를 설정하고 JavaScript 이벤트 핸들러를 활용함으로써 개발자는 사용자에게 실시간 진행 상황 업데이트를 제공하는 직관적이고 사용자 친화적인 인터페이스를 만들 수 있습니다.