4

我有一个 Web 应用程序，其中有许多 Ajax 组件，它们在页面中经常刷新自己（它是一种仪表板）。

现在，我想向页面添加功能，以便在没有 Internet 连接时，页面的当前内容不会更改，并且页面上会出现一条消息，说明页面处于脱机状态（当前，因为这些各种小工具该页面尝试刷新自己并发现没有连接，他们的旧数据消失了）。

那么，解决此问题的最佳方法是什么？

4

9 回答 9

12 
navigator.onLine

那应该做你所要求的。

您可能想在更新页面的任何代码中检查它。例如：

if (navigator.onLine) {
    updatePage();
} else {
    displayOfflineWarning();
}
于 2008-09-18T17:41:49.390 回答
4

好像你已经回答了你自己的问题。如果小工具发送异步请求并且超时，请不要更新它们。如果有足够多的人这样做，则显示“页面处于脱机状态”消息。

于 2008-09-18T17:43:26.453 回答
4

请参阅HTML 5 规范草案。你想要navigator.onLine。并非所有浏览器都支持它。Firefox 3 和 Opera 9.5 可以。

听起来好像您试图掩盖问题而不是解决问题。如果失败的请求导致您的小部件清除其数据，那么您应该修复您的代码，以便它不会尝试更新您的小部件，除非它收到响应，而不是尝试提前确定请求是否会成功。

于 2008-09-18T17:49:57.983 回答
3

处理此问题的一种方法可能是使用显式超时方法扩展 XmlHTTPRequest 对象，然后使用它来确定您是否在脱机模式下工作（即，对于不支持 navigator.onLine 的浏览器）。下面是我在一个站点（一个使用Prototype库的站点）上实现 Ajax 超时的方法。10 秒（10,000 毫秒）后，它中止调用并调用 onFailure 方法。

/**
 * Monitor AJAX requests for timeouts
 * Based on the script here: http://codejanitor.com/wp/2006/03/23/ajax-timeouts-with-prototype/
 *
 * Usage: If an AJAX call takes more than the designated amount of time to return, we call the onFailure
 *        method (if it exists), passing an error code to the function.
 *
 */

var xhr = {
    errorCode: 'timeout',
    callInProgress: function (xmlhttp) {
        switch (xmlhttp.readyState) {
            case 1: case 2: case 3:
                return true;
            // Case 4 and 0
            default:
                return false;
        }
    }
};

// Register global responders that will occur on all AJAX requests
Ajax.Responders.register({
    onCreate: function (request) {
        request.timeoutId = window.setTimeout(function () {
            // If we have hit the timeout and the AJAX request is active, abort it and let the user know
            if (xhr.callInProgress(request.transport)) {
                var parameters = request.options.parameters;
                request.transport.abort();
                // Run the onFailure method if we set one up when creating the AJAX object
                if (request.options.onFailure) {
                    request.options.onFailure(request.transport, xhr.errorCode, parameters);
                }
            }
        },
        // 10 seconds
        10000);
    },
    onComplete: function (request) {
        // Clear the timeout, the request completed ok
        window.clearTimeout(request.timeoutId);
    }
});
于 2008-09-19T01:57:28.840 回答
2

嗯实际上，现在我研究了一下，它比这更复杂一些。在John Resig 的博客和Mozilla 网站上阅读这些链接。上面的海报也可能有一个好点 - 无论如何你都在提出请求，所以当他们失败时你应该能够解决......这可能是一个更可靠的方法。

于 2008-09-18T17:55:59.980 回答
2

呼叫一个可靠的目的地，或者可能是一系列呼叫，如果用户有一个活动的网络连接，这些呼叫应该通过并返回——甚至像令牌 ping 到 google、yahoo 和 msn 或类似的东西那。如果至少有一个返回绿色，则表明您已连接。

于 2008-09-19T03:32:23.620 回答
1

我认为谷歌齿轮有这样的功能，也许你可以检查他们是如何做到的。

于 2008-09-19T02:02:42.977 回答
1

使用相关的 HTML5 API：在线/离线状态/事件。

于 2010-04-20T20:27:33.767 回答
0

一种可能的解决方案是，如果页面和缓存页面具有不同的 url，则只需查看并查看您所在的 url。如果您在缓存页面的 url 上，那么您处于离线模式。这个博客很好地说明了为什么 navigator.online 坏了

于 2012-06-15T14:59:35.280 回答