Question

我正在开发的应用程序主页上有一个仪表板。为了避免负载问题，仪表板的内容将通过Ajax异步计算，允许用户不要等待它准备好转到另一个页面，或等待慢速组件检查打火机上的指示灯的。

它应该像这样工作：

页面加载。主体上的onload（）包括一个javascript函数，它生成一个Ajax请求，为仪表板生成一个画布/骨架，每个组件都有简单的内容（基本上是加载gif和＆＃34;等待，加载内容......＆＃34 ;消息）和组件上的信息（使用隐藏的表单字段）（刷新延迟，包装div ID，组件类等）
这个Ajax调用有一个onSuccess部分，调用另一个函数。这个扫描隐藏的信息＆＃34;并且，对于找到的每个组件，调用第三个函数来刷新＆＃34; （因此在第一次调用时它会替换默认内容）其内容。
简而言之，如果我的仪表板有4个组件，当我转到该页面时，Ajax请求会创建一个画布，然后调用一个扫描画布的函数，并触发4个Ajax请求，每个请求计算一个div的内容（组分）。

通常情况下，我可以随时点击一个链接转到另一个页面，看看这些调用是如何异步的，所以我作为用户保持控制。组件也会尽快更新，因为每个Ajax调用也是异步的。但是，每当我单击一个链接时，它会在处理之前等待调用结束并转到新页面，迫使用户等待（有时很长）加载。＆＃34;刷新＆＃34;调用也是按顺序处理的，而不是同时处理的。

我如何获得＆＃34;真实＆＃34;异步？起初我读到Ajax默认是异步的，但你可以指定＆＃34; asynchronous：true＆＃34;，我试过它，它没有改变任何东西。对于它的价值，我们大多使用IE7（＆＃34; quirks模式＆＃34; 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">&nbsp;</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（）），而不是同时刷新，直到它们全部完成，用户无法控制，无法通过点击链接来更改页面。如何使真正异步？

提前致谢。

Answer 1

更新（现已解决）问题：虽然它并非来自服务器，但它确实是一个顺序问题。 Ajax调用使用了PHP会话，我了解到它是用文件管理的，这意味着会话已被锁定＆＃34;如果已经以书面形式访问了另一个页面，则无法访问该页面。

因为我只使用它作为当前用户配置文件的缓存（检查它，如果它被定义得到它，如果没有定义它并得到它），我在最后一个之后添加了session_write_close（）写访问权限，以及＃34;释放＆＃34;会议。这使得我的所有电话都可以同时发生＃34;同时＆＃34;因为它们可以在会话使用后开始（在开始时短和右）而不是等待整个脚本（对于某些组件最多执行5次），并且我可以单击指向其他页面的链接（这也需要会话）并且看起来没有任何延迟。感谢您提供的服务器建议，即使它不是问题，它也让我走上了轨道！

解决普通的js＆＃34;异步＆＃34; Ajax请求彼此等待

1 个答案: