>

일반적인 자바 스크립트는 매우 간단합니다 : 콜백을 {XMLHTTPRequest}.onprogress 에 연결하기 만하면됩니다.

var xhr = new XMLHttpRequest();
xhr.onprogress = function(e){
    if (e.lengthComputable)
        var percent = (e.loaded / e.total) * 100;
};
xhr.open('GET', 'http://www...', true);
xhr.onreadystatechange = function() {
    ...
};
xhr.send(null);

그러나 JQuery로 html 데이터를 다운로드하는 아약스 사이트를 만들고 있습니다 ( $.get()  또는 $.ajax() ) 그리고 작은 진행률 표시 줄로 요청을 표시하기 위해 요청 진행률을 얻는 가장 좋은 방법이 궁금합니다.하지만 궁금한 점은 JQuery 설명서에서 유용한 것을 찾지 못했습니다 ...


  • 답변 # 1

    $.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
        }
    });
    
    

  • 답변 # 2

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

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

    github에서 확인

  • 답변 # 3

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

  • 답변 # 4

    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 );
    
    

  • 답변 # 5

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

    <올>

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

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

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

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

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

  • 이전 r - order () 함수 이해
  • 다음 c++ - Visual Studio 2012에 라이브러리를 포함시키는 방법은 무엇입니까?