javascript - jquery ajax data



ما هي الطريقة الأنظف للحصول على تقدم طلب Jjuery ajax؟ (4)

في javascript عادي بسيط للغاية: تحتاج فقط إلى إرفاق رد الاتصال بـ {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);

ولكنني أقوم بإجراء موقع ajax الذي ينزل بيانات html باستخدام JQuery ( $.get() أو $.ajax() ) وكنت أتساءل ما هي أفضل طريقة للحصول على تقدم الطلب لعرضه مع شريط التقدم قليلا ولكن بفضول ، أنا لا أجد أي شيء مفيد في وثائق JQuery ...

https://ffff65535.com


جربت ثلاث طرق مختلفة لاعتراض بناء جسم Ajax:

  1. استخدمت المحاولة الأولى xhrFields ، لكن ذلك لا يسمح إلا xhrFields واحد ، إلا أنه يعلق على تنزيل (عدم تحميل) التقدم ، ويتطلب ما يبدو وكأنه نسخ ولصق غير ضروري.
  2. أوقفت محاولتي الثانية وظيفة progress للوعد المرتجع ، ولكن كان عليّ أن أحتفظ بمجموعة من المناولين. لم أتمكن من العثور على شيء جيد لإرفاق معالجات لأنه مكان واحد يمكنني الوصول إلى XHR وآخر يمكنني الوصول إلى jQuery XHR ، ولكن لم يكن لدي مطلقًا إمكانية الوصول إلى الكائن المؤجل (فقط الوعد).
  3. أعطتني المحاولة الثالثة لي الوصول المباشر إلى XHR لربط معالجات ، ولكن مرة أخرى المطلوبة إلى الكثير من رمز النسخ واللصق.
  4. انتهيت من محاولتي الثالثة واستبدلت a ajax مع jQuery الخاص بي. العيب المحتمل الوحيد هو أنه لم يعد بإمكانك استخدام إعداد 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) {
            // Download progress
            xmlHttpReq.addEventListener('progress', function download_progress(evt) {
                // window.console.debug( "download_progress", evt );
                handler.apply(this, [evt]);
            }, false);

            // Upload progress
            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 (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 على وظيفة AjaxSetup() التي تسمح لك بتسجيل معالجات ajax العالمية مثل قبل beforeSend لجميع مكالمات ajax بالإضافة إلى السماح لك بالوصول إلى كائن xhr للقيام بالتقدم الذي تبحث عنه


http://www.htmlgoodies.com/beyond/php/show-progress-report-for-long-running-php-scripts.html

كنت أبحث عن حل مماثل ووجدت هذا الاستخدام الكامل.

var es;

function startTask() {
    es = new EventSource('yourphpfile.php');

//a message is received
es.addEventListener('message', function(e) {
    var result = JSON.parse( e.data );

    console.log(result.message);       

    if(e.lastEventId == 'CLOSE') {
        console.log('closed');
        es.close();
        var pBar = document.getElementById('progressor');
        pBar.value = pBar.max; //max out the progress bar
    }
    else {

        console.log(response); //your progress bar action
    }
});

es.addEventListener('error', function(e) {
    console.log('error');
    es.close();
});

}

وخوادمك

header('Content-Type: text/event-stream');
// recommended to prevent caching of event data.
header('Cache-Control: no-cache'); 

function send_message($id, $message, $progress) {
    $d = array('message' => $message , 'progress' => $progress); //prepare json

    echo "id: $id" . PHP_EOL;
    echo "data: " . json_encode($d) . PHP_EOL;
    echo PHP_EOL;

   ob_flush();
   flush();
}


//LONG RUNNING TASK
 for($i = 1; $i <= 10; $i++) {
    send_message($i, 'on iteration ' . $i . ' of 10' , $i*10); 

    sleep(1);
 }

send_message('CLOSE', 'Process complete');




xmlhttprequest