Jquery.ajax update WHILE data (until successful completion or completion)

Question

I am trying to update WHILE data processing (to success or completion)

the "successful" part .ajax waits until php finishes ...

In most cases, waiting for "success" is quite normal.

BUT for a longer php (for example, using ffmpeg on a large file) the wait time is too long and generates errors ...

I have this code

$.ajax ({
    type: 'GET', 
    async: true, 
    url: '__/_/_path_to_PHP_file.php',
    dataType: 'html',
    data:'__POSTvariable1__='+encodeURIComponent (__POSTvariable1__)+
         '&__POSTvariable2__='+encodeURIComponent(__POSTvariable2__),
    cache: false,
    success: function(data){
        $('#div_that_needs_update').html(data);
    },
    error: function(request, status, error){
        console.log ( 'request.responseText --> ' + request.responseText + ' status --> ' + status + ' error --> ' + error );
    }
});

•••• I tried "full" from "beforeSend", but is there a "whileLoading" or similar ???

thanks

Answer 1

I completed it more simple and efficient (with options).

function liveXHR (p1 , p2) {
    var params = 'param1='+p1+'&param2='+p2;

    xhr = new XMLHttpRequest();
    xhr.open('GET', '__URL_OF_PHP___'+"?"+params, true);
    xhr.onprogress = function(e) {
        $('#__ID_DIV_forUpdate___').html(e.currentTarget.responseText);
    }
    xhr.onreadystatechange = function() { 
        if (xhr.readyState == 4) { 
            console.log('Complete'); 
            //or any onther stuff when done ;)
        } 
    }
    xhr.send();
};

Answer 2

, xhr

$.ajax({
        xhr: function(){
            var xhr = new window.XMLHttpRequest();
            //Upload progress
            xhr.upload.addEventListener("progress", function(evt){
                if (evt.lengthComputable) {
                    var percentComplete = (evt.loaded / evt.total) * 100;
                    $("#status").html(Math.round(percentComplete)); 
                }
            }, false);
            //Upload progress
            xhr.upload.addEventListener("load", function(evt){

            }, false);
            xhr.upload.addEventListener("error", function(evt){
                $("#status").html("Upload Failed");
            }, false);
            xhr.upload.addEventListener("abort", function(evt){
                $("#status").html("Upload Aborted");
            }, false);
           return xhr;
        },
        url: .........

,

Answer 3

, ( )

I found this page: http://www.sitepoint.com/php-streaming-output-buffering-explained/

and I realized that;) !!!!!

$.ajax ({
    type: 'GET', 
    async: true, 
    url: '__/_/_path_to_PHP_file.php',
    dataType: 'html',
    data:'__POSTvariable1__='+encodeURIComponent (__POSTvariable1__)+
         '&__POSTvariable2__='+encodeURIComponent(__POSTvariable2__),
    cache: false,
    xhr: function(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '__/_/_path_to_PHP_file.php', true);
        xhr.onprogress = function(e) {
           $('#div_that_needs_update').html(e.currentTarget.responseText);
         }
         return xhr;
    },
    success: function(data){
        console.log('completed');
    },
    error: function(request, status, error){
        console.log ( 'request.responseText --> ' + request.responseText + ' status --> ' + status + ' error --> ' + error );
    }
});