Question

我想在ajax请求期间向用户显示一些视觉进度。例如，当他点击向服务器端脚本发出AJAX请求的“进程”按钮时，他会看到一个“正在加载...”的消息和图形，但我还想向他展示一些进程是多少处理是完成。 E.g 5/10 processed, 6/10 processed...等等。

有没有这样做？

Answer 1

我不知道你的服务器端进程究竟是什么，但将它分解为一系列Ajax调用是否有任何意义，每个调用都是进程的一部分？然后你可以在每一步增加你的显示。

Answer 2

是的，有，但有点复杂。我发现的唯一方法是在客户端上使用iframe，并在服务器上使用response.writeing将javascript块发送回客户端，javascript调用父窗口来处理状态消息。

这是一些示例代码。它可能有问题，我正在从一个更大的应用程序中剪掉它。

HTML：

<button id="doStuff">
<div id="status"></div>
<div id="iframeHolder"></div>

的javascript：

//This one will be called from the HTML the javascript is streaming back
function updateStatus(message) {
    $('#status').html(message);
}
$('#doStuff').click(function(event) {
    event.preventDefault();
    var url="your.page.html";
    $('#iframeHolder').html('<iframe src="' + url + '"></iframe>');
}

服务器端（这是vb asp.net，但你应该能够用你选择的语言来做）：

dim message as string = "hello world"
dim script = String.Format("<script type='text/javascript'>parent.updateStatus('{0}');</script>",message)
Response.Write(script)
Response.Flush()

一些观察

Querystring将成为你的朋友。我不确定你是否可以以编程方式回发到iframe
你可能不得不在查询字符串中添加一些cachebusting垃圾，否则浏览器很可能会缓存内容。它会非常快，但错了： - ）
您可能需要在浏览器开始处理iframe内容之前发送“some”html。我发现发送大约1k垃圾的HTML评论有帮助
为了避免FF中的刷新问题以及chrome和safari中的“永久加载”问题，请在完成后将iframe的src设置为about：blank（$('#iframeHolder iframe').attr('src','about:blank')）
jQuery UI进度条看起来非常时髦，用于显示处理百分比

希望有所帮助。几个月前我就把它弄丢了： - ）

Answer 3

jQuery + PHP示例进度条实现，轮询服务器端脚本，剩余百分比。 click here

Answer 4

在Safari 4和Firefox 3.5中，您可以按如下方式确定XMLHttpRequest的进度：

var url = "[URL to file]";
var request = new XMLHttpRequest();

request.onprogress = function(e) {
    if (e.lengthComputable) {
        var percentComplete = (e.loaded / e.total) * 100;
        console.log("Progress: " + percentComplete + "%");
    }
    else {
        // Code to execute when we can't get the progress
    }
};

request.open("GET", url, true);
request.send("");

有关更多信息，请参阅Mozilla开发人员网络上的this page

强制页面内容通过Javascript更改

4 个答案: