Geek asks and answers

JQuery AJAX download performance for large text fields

Is it possible to get the loading process for a form with very large text fields using jQuery ajax? I think the client knows how many bytes were sent, but when I google, I only find solutions for downloading files using the site code.

This is my ajax request:

$.ajax({
        type: "POST",
        url: "index.php?action=saveNewPost",
        data: {textbox1: textbox1,textbox2: textbox2},
        contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        success: function(){
            //
        }
    });

I was hoping there would be something like "onProgress" with a parameter containing the number of bytes already sent ...

Solution found

$.ajax({
        xhr: function() {
            var req = $.ajaxSettings.xhr();
            if (req) {
                req.upload.addEventListener('progress', function(event) {
                    if (event.lengthComputable) {
                        $('#ajaxFeedbackDiv').html(event.loaded); // = 'test'; //event.loaded + ' / ' + event.total;
                    }
                }, false);
            }
            return req;
        },
        type: "POST",
        url: "index.php?action=saveNewPost",
        data: {textbox1: textbox1,textbox2: textbox2},
        contentType: "application/x-www-form-urlencoded;charset=UTF-8"
        }
    });

it looks like it works, although there is still

2 problems:

  • the connection on my local host is too fast, so it’s hard to see that “progress” really works. I installed this http://mschrag.github.com tool on a second Mac on the same network, and I see that it works fine.
  • , , XHR/HTML5, .. ?
+5
2

XMLHttpRequest , HTML5. progress, AJAX.

:

document.getElementById('myForm').onsubmit = function() {
    var xhr = new XMLHttpRequest();

    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            var percentage = Math.round((e.loaded * 100) / e.total);
            document.getElementById('progress').innerHTML = percentage + '%';
        }
    }, false);

    xhr.open(this.method, this.action, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };

    xhr.send(new FormData(this));
    return false;    
};

live demo.

+4

More articles:


All Articles