Ajax 응답 로드 상태를 백분율로 표시하는 방법은 무엇입니까?

Ajax 응답 로드 상태를 백분율로 표시하는 방법은 무엇입니까?

진행률 표시줄이 로드된 Ajax 응답의 사용자 백분율을 표시하려고 합니다.그것을 달성할 수 있는 방법이 있습니까?지금 저는 단지 하나의 이미지를 보여주고 있습니다.

다음은 제 코드 샘플입니다.

$('#loadingDiv').show();

$.ajax({
        type : 'Get',
        url : myUrl,
        success : function(response) {
            $('#loadingDiv').hide();
            populateData(response);
        },
        error: function(x, e) {
                    $('#loadingDiv').hide();
            if (x.status == 500 || x.status == 404) {
                    alert("no data found");
                }
        }
    });

HTML 코드:

<div id="loadingDiv">
     <img src="loading-img.png"/>
</div>

실제 백분율을 표시하는 두 가지 방법이 있습니다.잠깐...

서버 지원이 필요한 오래된 학교 네이티브 JavaScript 또는 jQuery ajax로 업데이트를 제공할 수 있는 다른 URL입니다.그리고 당신은 그 URL을 간격을 두고 계속해서 클릭합니다.

새로운 웹 및 HTML5 표준에 의해 정의된 XMLHTTP 요청2(AJAX 2라고도 함)를 지원하는 HTML5 브라우저의 최신 네이티브 JavaScript 2.

두 개라면, 새로운 웹에 오신 것을 환영합니다!
HTML5 기능의 일부인 연결 기능을 향상시키는 여러 기능이 브라우저에 추가되었습니다.

XMLHTTPRequest2는 JavaScript 자체에서 진행 상황 및 기타 많은 사항을 모니터링하는 데 도움이 되는 AJAX의 이벤트를 활성화합니다.실제 진행률을 모니터링하여 실제 백분율을 표시할 수 있습니다.

var oReq = new XMLHttpRequest();

oReq.addEventListener("progress", updateProgress, false);
oReq.addEventListener("load", transferComplete, false);
oReq.addEventListener("error", transferFailed, false);
oReq.addEventListener("abort", transferCanceled, false);

oReq.open();

그런 다음 위에 첨부된 처리기를 정의할 수 있습니다(이 경우 진행 상황).

function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

jQuery는 두 번째 경우에도 사용할 수 있습니다.결국, jQuery는 더 적은 코드로 더 많은 것을 도와주기 위한 것입니다!

당신이 HTML5와 새로운 웹 솔루션에 집중하기를 바라며, 저는 이 솔루션을 사용한 AJAX의 Mozilla DOC - Monitoring Progress를 가리킵니다.

이제 모든 브라우저에는 웹에 대한 문서가 있습니다(위의 Mozilla 문서와 같은). 또한 모든 브라우저는 공통적으로 업데이트된 웹 문서를 위해 다른 영향력 있는 웹 및 인터넷 대기업과 함께 웹 플랫폼이라는 공동 벤처 기업에 기여하고 있습니다.진행 중인 작업이므로 완료되지 않았습니다.

또한 이전 AJAX에는 진행 상황을 모니터링하는 네이티브 기능이 없습니다.

구식 방법으로, 당신은 진행 상황 업데이트를 받기 위해 별도의 URL을 계속해서 누르는 간격 함수를 만들어야 할 것입니다.또한 서버는 진행률을 업데이트하고 다른 포트에서 사용할 수 있는 URL에서 응답으로 전송해야 합니다.

언급URL : https://stackoverflow.com/questions/16690740/how-to-show-loading-status-in-percentage-for-ajax-response