带有大列表的 Ajax 进度条
Posted
技术标签:
【中文标题】带有大列表的 Ajax 进度条【英文标题】:Ajax progress bar with a big list 【发布时间】:2013-05-15 17:18:18 【问题描述】:我有一个获取大型 json 列表的 ajax 调用。有什么方法可以制作一个进度条来获取 json 加载的真实值(例如,状态栏显示 200 分之 1 已加载)?
现在我有一个非常基本的 Ajax 调用
function SendAjax(urlMethod, jsonData, returnFunction)
$.ajax(
type: "GET",
contentType: "application/json; charset=utf-8",
url: urlMethod,
data: jsonData,
dataType: "json",
success: function (msg)
if (msg != null)
ReturnJson(msg);
,
error: function (xhr, status, error)
// Boil the ASP.NET AJAX error down to JSON.
var err = eval("(" + xhr.responseText + ")");
// Display the specific error raised by the server
alert(err.Message);
);
【问题讨论】:
【参考方案1】:尝试在您的应用程序全局范围内使用AjaxStart。这意味着您可以将代码放在布局文件中,如果处理时间较长,它将显示进度指示器...
$(document).ajaxStart(function()
$( "#loading" ).show();
);
您可以在preload with percentage - javascript/jquery查看示例和答案。
【讨论】:
我可能最终会做这样的事情。但正在寻找更多“已加载 77 个项目”并计数,直到它们全部加载完毕【参考方案2】:ajax 请求中有几个状态,但它们不代表请求中的任何百分比。
网络流量应该是你真正的问题,你不想发送 200 个单独的请求(虽然这将允许一个进度条,但它会使整个请求花费更长的时间,具体取决于你与服务器的网络连接)。
您最好只显示一个活动指示器并在请求完成时将其删除,并尝试优化您的代码服务器端以尽快返回 200 个项目。
如果 200 项确实太大(大于 X 秒而无法返回),您可以将其分成两半或四等份以显示 一些 进度,但这会浪费时间处理网络上的额外请求、页眉等
【讨论】:
【参考方案3】:如果您的服务器端代码具有共享应用程序状态的方式(例如 php 中的 $_SESSION),您可以发出 2 个单独的请求,一个请求数据,一个检查第一个请求的进度。在计时器上重复第二个请求,直到第一个请求完成,并在处理每个项目时更新 $_SESSION(或您的服务器代码中的任何内容)。
例如: 初始页面必须启动一个会话,以便后续的 AJAX 调用拥有 cookie,并且可以访问共享数据:
<?php
session_start();
session_write_close(); // close the session so other scripts can access the file (doesn't end the session)
// your page content here
?>
第一次 AJAX 调用开始处理:
<?php
function updateSession($count)
session_start(); // open the session file
$_SESSION['progress'] = $count;
session_write_close(); // let other requests access the session
// as you process each item, call the above function, ex:
for ($i = 1; $i <= 10; $i++)
updateSession($i);
?>
第二次 AJAX 调用(每 X 秒重复一次)如下所示:
<?php
session_start(); // open the session file
echo @$_SESSION['progress'] or 0; // echo contents or 0 if not defined
session_write_close(); // let other requests access the session
?>
对不起,我不懂 ASP.NET,但希望上面的代码对你有用。
【讨论】:
以上是关于带有大列表的 Ajax 进度条的主要内容,如果未能解决你的问题,请参考以下文章
带有进度条的 jQuery ajax 上传 - 没有 flash