[JQUERY] jQuery Ajax는 XHR을 통해 진행됩니다

jQuery Ajax는 XHR을 통해 진행됩니다

해결법

1. ---

   1.따라서 귀하의 경우에 조금 디버깅하는 경우 evt.lengthComputable = false를 찾을 수 있습니다. 따라서 진행 상황을 추적 할 수 없습니다.

   따라서 귀하의 경우에 조금 디버깅하는 경우 evt.lengthComputable = false를 찾을 수 있습니다. 따라서 진행 상황을 추적 할 수 없습니다.

       xhr.addEventListener("progress", function (evt) {
           console.log(evt.lengthComputable); // false
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               progressElem.html(Math.round(percentComplete * 100) + "%");
           }
       }, false);
   

   LengthComputable이 XMLHTTPRequestProgressEvent 내에서 false이면 서버가 응답에서 콘텐츠 길이 헤더를 보낸 적이 없음을 의미합니다.

2. ---

   2.(evt.lengthcomputable) {xhr에서 작동하지 않으면, 나는 이것을했고 이제는 일하고 있습니다.

   (evt.lengthcomputable) {xhr에서 작동하지 않으면, 나는 이것을했고 이제는 일하고 있습니다.

   PHP :

   $startTime = time(); 
   //your code or 
   sleep(10); 
   $endTime = time() - $startTime; 
   header('Content-Length: '.strlen($endTime));
   $response['success'] = true;
   echo json_encode($response);
   

   여기 내 HTML이 있습니다.

   <div class="progress">
   <div id="bulk-action-progbar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width:1%">                 
   </div>
   </div>
   

   Ajax :

   var percentComplete = 1;
   $.ajax({
       method: 'post',
       url: 'test.php',
       data:{'actionPerform':'actionPerform'},
       xhr: function(){
             var xhr = new window.XMLHttpRequest();
             //Upload progress, request sending to server
             xhr.upload.addEventListener("progress", function(evt){
               console.log("in Upload progress");
               console.log("Upload Done");
             }, false);
             //Download progress, waiting for response from server
             xhr.addEventListener("progress", function(e){
               console.log("in Download progress");
               if (e.lengthComputable) {
                 //percentComplete = (e.loaded / e.total) * 100;
                 percentComplete = parseInt( (e.loaded / e.total * 100), 10);
                 console.log(percentComplete);
                 $('#bulk-action-progbar').data("aria-valuenow",percentComplete);
                 $('#bulk-action-progbar').css("width",percentComplete+'%');
   
               }
               else{
                    console.log("Length not computable.");
               }
             }, false);
             return xhr;
       },
       success: function (res) {
           //...
       }
   });
   

3. ---

   3.간단한 원형 교차로는 다음 일 수 있습니다.

   간단한 원형 교차로는 다음 일 수 있습니다.

   $(document)
       .ajaxStart(
           function() {
   
               $
                   .blockUI({
                       message : '<img src="img/loadajax.gif" title="Loading..">Loading...',
                       css : {
                           padding : 20,
                           margin : 5,
                           width : '30%',
                           top : '40%',
                           left : '35%',
                           textAlign : 'center',
                           color : '#000',
                           border : 'none',
                           backgroundColor : '#fff',
                           cursor : 'wait'
                       }
                   });
               });
   
   $(document).ajaxStop(function() {
       $.unblockUI();
   });
   

   이미지 SRC에서 표시하려는 GIF의 경로를 제공하십시오. 모든 AJAX 호출에 대해 페이지 또는 공통 레이아웃 / JSP 또는 헤더 파일의 onLoad 에이 코드를 추가하십시오.

from https://stackoverflow.com/questions/22502943/jquery-ajax-progress-via-xhr by cc-by-sa and MIT license