解决简单的js“异步”Ajax请求等待对方
我正在开发的一个应用程序的主页上有一个仪表板。为了避免加载问题，仪表板的内容将通过Ajax异步计算，允许用户不等待它准备转到另一个页面，或者等待缓慢的组件检查较轻页面上的指示符。
应该是这样的：
- 页面加载。onload() on body包含一个javascript函数，该函数生成一个Ajax请求，为仪表板生成一个画布/骨架，每个组件都有简单的内容(基本上是一个加载gif和“等待，加载内容.”以及组件上的信息(使用隐藏表单字段)(刷新延迟、包装器div id、组件类等)。
- 这个Ajax调用有一个onSuccess部件，调用另一个函数。这个函数扫描“隐藏信息”，并对找到的每个组件调用第三个函数来“刷新”其内容(因此，在第一个调用时，它替换了默认内容)。
- 简而言之，如果我的仪表板有4个组件，当我转到那个页面时，Ajax请求会创建一个画布，然后调用一个扫描画布的函数，然后发出4个Ajax请求，每个请求计算div的内容(组件)。
通常，我可以单击一个链接，随时转到另一个页面，查看调用是如何异步的，因此我作为用户保持控制。组件也会尽快更新，因为每个单独的Ajax调用都是异步的。但是，每当我单击某个链接时，它都会在处理该链接并转到新页面之前等待调用结束，从而迫使用户等待(有时很长)加载。“刷新”调用也是按顺序处理的，而不是并发处理。
如何获得“真正的”异步？一开始，我看到Ajax默认是异步的，但是您可以指定“异步:真”，我尝试了它，但是它没有改变任何东西。值得注意的是，我们主要使用的是IE7 (“古怪模式”IE8 )，因为我们从忽略使用doctype和编码的方式中得到了应用程序，使应用程序无法使用。下面是代码：
function create_dashboard() {
var param = [...];
options = {
method: 'post',
postBody: param,
asynchronous: true,
evalJS: true,
onSuccess: function(return) {
setTimeout(function(){tallyRefreshes()}, 100);
setTimeout(function(){[switch a css class on some wrapper]}, 100);
}
};
new Ajax.Updater('cadre_tdb','../php/dashboard/ajax/dashboard_manager.ajax.php', options);
}
function tallyRefreshes() {
// for each component to refresh, gather its information
elems = document.getElementsByClassName('dash_refresh_info');
for (var i = 0; i < elems.length; i++) {
wrapper = elems[i].getElementsByClassName('dash_refresh_info_wrapper')[0].value;
component_class = elems[i].getElementsByClassName('dash_refresh_info_class')[0].value;
delay = elems[i].getElementsByClassName('dash_refresh_info_delay')[0].value;
// send the info to a function which will trigger content refreshes at regular intervals
refreshComponent(wrapper, component_class);
if (delay > 0) {
createRefreshTimer(wrapper, component_class, delay);
}
}
}
function refreshComponent(id_wrapper, component_class) {
var wrapper = document.getElementById(id_wrapper);
wrapper.innerHTML = '<div class="dashboard_loading"> </div><span>Please wait, loading component...</span>';
var param = [...];
options = {
method: 'post', postBody: param, asynchronous: true, evalJS: true };
new Ajax.Updater(id_wrapper,'../php/dashboard/ajax/dashboard_manager.ajax.php', options);
}组件只能一个接一个地刷新自己(通过refreshComponent())，而不是并发刷新，直到它们全部完成为止，用户没有控制权，无法通过单击链接更改页面。我怎样才能真正做到异步呢？
提前谢谢。
回答 1
Stack Overflow用户
发布于 2014-07-18 08:15:44
更新(现在已经解决了)问题:虽然它不是来自服务器，但它确实是一个顺序问题。Ajax调用使用了PHP会话，我了解到它是用文件管理的，这意味着会话是“锁定”的，如果另一个页面已经具有写入权限，则无法访问它。
由于我只使用它作为当前用户配置文件的缓存(检查它，如果它被定义了，获取它，如果不是定义它和获取它)，我在上次编写访问之后添加了session_write_close()，以“释放”会话。这允许我的所有调用“同时”进行，因为它们可以在会话使用后(短的和开始的时间)开始，而不是等待整个脚本(某些组件需要最多5s的执行)，而且我可以单击指向其他页面的链接(这也需要会话)，并且似乎没有任何延迟地进行。谢谢服务器的建议，即使这不是问题，它使我在轨道上！
https://stackoverflow.com/questions/24608370
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号