通过Javascript强制改变页面内容答案

【问题标题】：Forcing page content to change through Javascript通过Javascript强制改变页面内容
【发布时间】：2009-05-15 22:52:09
【问题描述】：

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

有没有办法做到这一点？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

是的，有，但有点复杂。我发现的唯一方法是在客户端使用 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
您可能必须在查询字符串中添加一些缓存清除垃圾，否则浏览器很可能会缓存内容。它会非常非常快，但错误:-)
您可能需要在浏览器开始处理 iframe 内容之前发送“一些”html。我发现发送大约 1k 垃圾的 HTML 评论会有所帮助
为避免 FF 中的刷新问题以及 chrome 和 safari 中的“永远加载”问题，完成后将 iframe 的 src 设置为 about:blank ($('#iframeHolder iframe').attr('src','about:blank'))
jQuery UI 进度条在显示处理百分比方面看起来很时髦

希望对您有所帮助。几个月前，我为此撕毁了我的头:-)

【讨论】：

你可能想在末尾添加一个 Response.Flush() ，以便它直接发送到浏览器而不是等待

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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

【讨论】：

谢谢，但我说的更多是在服务器端发生的操作，而不是 ajax 请求的下载进度