4

ページ内で頻繁に更新される多数の Ajax コンポーネントがある Web アプリケーションがあります (一種のダッシュボードです)。

ここで、インターネット接続がないときにページの現在のコンテンツが変更されず、ページがオフラインであることを示すメッセージがページに表示されるように、ページに機能を追加したいと考えています (現在、これらのさまざまなガジェットがオンになっているため)。ページは自分自身を更新しようとしますが、接続がないことがわかり、古いデータは消えます)。

それで、これについて行く最善の方法は何ですか？

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

これを処理する 1 つの方法は、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

信頼できる宛先、またはおそらく一連の呼び出し、ユーザーがアクティブなネット接続を持っている場合に通過して返される呼び出しを行います - google、yahoo、msn などへのトークン ping のような単純なものでもかまいません。それ。少なくとも 1 つが緑色に戻ったら、接続されていることがわかります。

于 2008-09-19T03:32:23.620 に答える
2

うーん、実際、ちょっと調べてみると、それよりも少し複雑です。John Resig のブログとMozilla サイトのこれらのリンクを読んでください。上記のポスターにも良い点があるかもしれません-とにかくリクエストを行っているので、リクエストが失敗したときに解決できるはずです..それは、はるかに信頼できる方法かもしれません.

于 2008-09-18T17:55:59.980 に答える
1

Google Gears にはそのような機能があると思います。

于 2008-09-19T02:02:42.977 に答える
1

関連する HTML5 API: online/offline status/eventsを使用します。

于 2010-04-20T20:27:33.767 に答える
0

考えられる解決策の 1 つは、ページとキャッシュされたページの URL が異なる場合、現在の URL を見て確認することです。キャッシュされたページの URL にいる場合は、オフライン モードです。このブログでは、navigator.online が壊れている理由について説明しています。

于 2012-06-15T14:59:35.280 に答える