javascript - JQuery ajax 요청의 진행을 얻는 가장 깨끗한 방법은 무엇입니까?

$.ajax 에 대한 이와 같은 것  (HTML5 만 해당) :

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress here
            }
       }, false);
       xhr.addEventListener("progress", function(evt) {
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               //Do something with download progress
           }
       }, false);
       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        //Do something on success
    }
});

jQuery는 이미 약속을 구현 했으므로이 기술을 사용하고 이벤트 로직을 options 로 옮기지 않는 것이 좋습니다.  매개 변수. 진행 약속을 추가하는 jQuery 플러그인을 만들었고 이제 다른 약속처럼 쉽게 사용할 수 있습니다.

$.ajax(url)
  .progress(function(){
    /* do some actions */
  })
  .progressUpload(function(){
    /* do something on uploading */
  });

github에서 확인

jQuery에는 AjaxSetup() 가 있습니다.   beforeSend 와 같은 전역 아약스 핸들러를 등록 할 수있는 기능  그리고 complete  모든 아약스 통화와 xhr 에 액세스 할 수 있습니다  당신이 찾고있는 진전을 이루기 위해 객체

Ajax 객체의 구성을 가로채는 세 가지 방법에 대해 시도했습니다 :

첫 번째 시도에서 xhrFields 를 사용했습니다 하지만 하나의 리스너 만 허용하고 다운로드 (업로드 아님) 진행에만 연결하며 불필요한 복사하여 붙여 넣기처럼 보이는 것이 필요합니다.

두 번째 시도는 progress 를 첨부  반환 된 약속에 함수를 사용하지만 자체 처리기 배열을 유지해야했습니다. 한 곳에서 XHR에 액세스 할 수 있고 다른 곳에서 jQuery XHR에 액세스 할 수 있기 때문에 처리기를 연결할 좋은 객체를 찾을 수 없었지만 지연 된 객체에는 액세스 할 수 없었습니다 (약속 만 해당).

세번째 시도는 처리기를 연결하기 위해 XHR에 직접 액세스 할 수있게했지만 다시 많은 복사 및 붙여 넣기 코드가 필요했습니다.

세번째 시도를 마무리하고 jQuery의 ajax 를 교체했습니다.  내 자신과 함께. 유일한 단점은 더 이상 자신의 xhr() 를 사용할 수 없다는 것입니다  환경. options.xhr 여부를 확인하여 허용 할 수 있습니다  함수입니다.

실제로 promise.progress 라고 부릅니다  기능 xhrProgress  나중에 쉽게 찾을 수 있습니다. 업로드 및 다운로드 리스너를 분리하기 위해 다른 이름을 지정할 수 있습니다. 원래 포스터가 이미 필요한 것을 얻었더라도 이것이 누군가를 돕기를 바랍니다.

(function extend_jQuery_ajax_with_progress( window, jQuery, undefined )
{
var $originalAjax = jQuery.ajax;
jQuery.ajax = function( url, options )
{
    if( typeof( url ) === 'object' )
    {options = url;url = undefined;}
    options = options || {};
    // Instantiate our own.
    var xmlHttpReq = $.ajaxSettings.xhr();
    // Make it use our own.
    options.xhr = function()
    {return( xmlHttpReq );};
    var $newDeferred = $.Deferred();
    var $oldPromise = $originalAjax( url, options )
    .done( function done_wrapper( response, text_status, jqXHR )
    {return( $newDeferred.resolveWith( this, arguments ));})
    .fail( function fail_wrapper( jqXHR, text_status, error )
    {return( $newDeferred.rejectWith( this, arguments ));})
    .progress( function progress_wrapper()
    {
        window.console.warn( "Whoa, jQuery started actually using deferred progress to report Ajax progress!" );
        return( $newDeferred.notifyWith( this, arguments ));
    });
    var $newPromise = $newDeferred.promise();
    // Extend our own.
    $newPromise.progress = function( handler )
    {
        xmlHttpReq.addEventListener( 'progress', function download_progress( evt )
        {
            //window.console.debug( "download_progress", evt );
            handler.apply( this, [evt]);
        }, false );
        xmlHttpReq.upload.addEventListener( 'progress', function upload_progress( evt )
        {
            //window.console.debug( "upload_progress", evt );
            handler.apply( this, [evt]);
        }, false );
        return( this );
    };
    return( $newPromise );
};
})( window, jQuery );

Ajax 요청 진행률을 표시하려면 다음 단계를 따르십시오.

Html&CSS를 사용하여 Spinner를 만들거나 Bootstrap Spinner를 사용하십시오.

최종 사용자가 무한 루프 또는 임계 값 제한 시간 동안 AJAX 데이터를 요청하면 스피너를 표시합니다.

따라서 AJAX 요청의 성공/오류 결과 후에 현재 표시된 스피너를 제거하고 결과를 표시하십시오.

쉽게하려면이 목적으로 스피너를 동적으로 표시 및 숨기기에 JS 클래스를 사용하는 것이 좋습니다.

이것이 도움이되기를 바랍니다!