jQuery的AJAX进度推迟 [英] jquery ajax progress deferred

问题描述

我一直在使用HTML5和jQuery的最新版本的AJAX文件加载器。我很困惑关于使用进度回调的新承诺基于AJAX。例如，该通知功能。难道它会自动叫什么名字？或者我需要编写一个处理程序。在我目前的code ...摘录明显。进度回调从不打。我也意识到，有可用的插件，但我不能使用它们。

  VAR ajaxFileUpload =新的$。阿贾克斯（{
            键入：POST，
            网址：/弹出/ file_upload.php
            数据：_private.appendFormData（文件），
            的contentType：假的，
            过程数据：假的

        }），进步（函数（事件）{
                执行console.log（事件）;
            }）
            .done（函数（响应）{
                的console.log（完成）;


            }）
            .fail（函数（事件）{
                的console.log（失败）;
            }）}};
 

解决方案

上传进度

如果你想在上传进度条，你可以看看<一href="https://github.com/malsup/form/blob/master/jquery.form.js">https://github.com/malsup/form/blob/master/jquery.form.js线292-309（这是一个jQuery插件，但你可以只拉出小位供您使用无插件）。

  s.xhr =功能（）{
    VAR XHR = jQuery.ajaxSettings.xhr（）;
    如果（xhr.upload）{
        xhr.upload.addEventListener（'进步'，函数（事件）{
            变种百分比= 0;
            VAR位置= event.loaded || event.position;
            无功总= event.total;
            如果（event.lengthComputable）{
                百分比= Math.ceil（位置/总* 100）;
            }
            options.uploadProgress（事件，位置，共有百分比）;
        }， 假）;
    }
    返回XHR;
};
 

下载进度

如果你想在下载进度条，你可以看看 http://www.w3.org/TR/进度事件/ 例如code。您的服务器必须给内容长度的响应头为工作，我相信。

  VAR进度=的document.getElementById（P），
  客户端=新XMLHtt prequest（）
client.open（GET，神奇 - 独角兽）
client.onprogress =函数（PE）{
如果（pe.lengthComputable）{
  progressBar.max = pe.total
  progressBar.value = pe.loaded
}
}
client.onloadend =函数（PE）{
progressBar.value = pe.loaded
}
client.send（）
 

服务器进展

如果您正在运行一个报告，需要一段时间，而且所需的服务器处理的进展情况，可能我建议改变它是多个Ajax请求： beginFoo ， getFooProgress ， getFooResult 。其他方法包括使用彗星或WebSocket连接从服务器，或单独拉Web服务通讯的进步，而最初的Ajax请求等待响应。

注：冷却全新＆lt;在HTML5的进展>元素

如果你想有一个进步HTML5元素：<一href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress 。

I've been working on an ajax file loader that uses html5 and the latest version of jquery. I'm confused regarding the use of the progress callback with the new promise based ajax. For example, the notify function. Is it called automatically? Or do I need to write a handler for it. In my current code...an excerpt obviously. The progress callback is never hit. I also realize that there are plugins available, but I can't use them.

var ajaxFileUpload = new $.ajax({
            type:'POST',
            url:"/popup/file_upload.php",
            data:_private.appendFormData(file),
            contentType:false,
            processData:false

        }).progress(function (event) {
                console.log(event);
            })
            .done(function (response) {
                console.log("done");


            })
            .fail(function (event) {
                console.log("fail");
            })}};

解决方案

Upload Progress

If you want a progress bar on upload you can look at https://github.com/malsup/form/blob/master/jquery.form.js lines 292-309 (it's a jquery plugin, but you could just pull out that small bit for your use without a plugin).

s.xhr = function() {
    var xhr = jQuery.ajaxSettings.xhr();
    if (xhr.upload) {
        xhr.upload.addEventListener('progress', function(event) {
            var percent = 0;
            var position = event.loaded || event.position;
            var total = event.total;
            if (event.lengthComputable) {
                percent = Math.ceil(position / total * 100);
            }
            options.uploadProgress(event, position, total, percent);
        }, false);
    }
    return xhr;
};

Download Progress

If you want a progress bar on download you can look at http://www.w3.org/TR/progress-events/ for example code. Your server must give the Content-Length on the response header for that to work I believe.

var progressBar = document.getElementById("p"),
  client = new XMLHttpRequest()
client.open("GET", "magical-unicorns")
client.onprogress = function(pe) {
if(pe.lengthComputable) {
  progressBar.max = pe.total
  progressBar.value = pe.loaded
}
}
client.onloadend = function(pe) {
progressBar.value = pe.loaded
}
client.send()

Server Progress

If you are running a report that takes a while and you want the progress of the server processing, might I suggest changing it to be multiple ajax requests: beginFoo, getFooProgress, getFooResult. Other methods include using a COMET or Websocket connection to communicate progress from the server, or a seperate pulling webservice while the initial ajax request waits for a response.

Note: cool new <progress> element in html5

If you want a progress html5 element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress .

这篇关于jQuery的AJAX进度推迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！