是什么让jQuery的Ajax请求的进展最干净的方式是什么？ [英] What is the cleanest way to get the progress of JQuery ajax request?

问题描述

在普通的JavaScript非常简单：只需要​​回调附加到 {XMLHTT prequest} .onprogress

  VAR XHR =新XMLHtt prequest（）;

xhr.onprogress =功能（E）{
    如果（e.lengthComputable）
        VAR百分比=（e.loaded / e.total）* 100;
};

xhr.open（GET，HTTP：// WWW ......，真正的）;
xhr.onreadystatechange =功能（）{
    ...
};
xhr.send（空）;
 

但我在做一个Ajax网站，下载HTML数据与jQuery（ $。获得（）或 $。阿贾克斯（）），我想知道这是获得一个请求的处理进度，以一个小的进度条显示，但奇怪的是，我没有找到什么有用的jQuery的文档...

解决方案

这样的事了 $ AJAX （HTML5虽然只）：

  $。阿贾克斯（{
    XHR：函数（）{
        VAR XHR =新window.XMLHtt prequest（）;
        xhr.upload.addEventListener（进步，功能（EVT）{
            如果（evt.lengthComputable）{
                VAR percentComplete = evt.loaded / evt.total;
                //做些事情上传进度这里
            }
       }， 假）;

       xhr.addEventListener（进步，功能（EVT）{
           如果（evt.lengthComputable）{
               VAR percentComplete = evt.loaded / evt.total;
               //做点什么下载进度
           }
       }， 假）;

       返回XHR;
    }，
    键入：POST，
    网址：/，
    数据： {}，
    成功：功能（数据）{
        //做一些事情上的成功
    }
}）;
 

In plain javascript is very simple: need just to attach the callback to {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);

but I'm doing an ajax site that download html data with JQuery ($.get() or $.ajax()) and I was wondering which is the best way to get the progress of a request in order to display it with a little progress bar but curiously, I'm not finding anything usefull in JQuery documentation...

解决方案

Something like this for $.ajax (HTML5 only though):

$.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的Ajax请求的进展最干净的方式是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！