web-dev-qa-db-ja.com

jqueryでインターネット接続を確認する

サーバーにGETリクエストを送信して、インターネット接続を確認しようとしています。私はjqueryとjavascriptの初心者です。 _navigator.onLine_はブラウザによって動作が異なるため、コードに使用していません。これはこれまでの私のコードです：

_var check_connectivity={
        is_internet_connected : function(){
            var dfd = new $.Deferred();
            $.get("/app/check_connectivity/")
            .done(function(resp){
                return dfd.resolve();
            })
            .fail(function(resp){
                return dfd.reject(resp);
            })
            return dfd.promise();
        },
}
_

私はこのコードを別のファイルで次のように呼びます。

_if(!this.internet_connected())
        {
            console.log("internet not connected");
            //Perform actions
        }
internet_connected : function(){
        return check_connectivity.is_internet_connected();
},
_

is_internet_connected()関数は遅延オブジェクトを返しますが、true/falseの答えが必要です。誰かがこれを達成する方法について教えてもらえますか？

javascriptjqueryjquery-deferred
11
Gaurav

$.get()はjqXHRオブジェクトを返します。これは、promise互換です。したがって、独自の_$.Deferred_を作成する必要はありません。

_var check_connectivity = {
    ...
    is_internet_connected: function() {
        return $.get({
            url: "/app/check_connectivity/",
            dataType: 'text',
            cache: false
        });
    },
    ...
};
_

次に：

_check_connectivity.is_internet_connected().done(function() {
    //The resource is accessible - you are **probably** online.
}).fail(function(jqXHR, textStatus, errorThrown) {
    //Something went wrong. Test textStatus/errorThrown to find out what. You may be offline.
});
_

ご覧のとおり、オンラインかオフラインかを明確にすることはできません。 javascript/jQueryが知っているのは、リソースが正常にアクセスされたかどうかだけです。

一般に、オンラインステータスについて知るよりも、リソースが正常にアクセスされたかどうか（および応答がクールであったかどうか）を知る方が便利ですそれ自体。すべてのajax呼び出しは、独自の.done()および.fail()ブランチを持つことができます（そして持つべきです）。これにより、リクエストの結果に関係なく適切なアクションを実行できます。

9
Beetroot-Beetroot

100％動作中：

function checkconnection() {
    var status = navigator.onLine;
    if (status) {
        alert('Internet connected !!');
    } else {
        alert('No internet Connection !!');
    }
}
5
Fezal halai

インターネット接続が接続されているかどうかを確認するつもりですか？

もしそうなら、これを試してください：

$.ajax({
    url: "url.php",
    timeout: 10000,
    error: function(jqXHR) { 
        if(jqXHR.status==0) {
            alert(" fail to connect, please check your connection settings");
        }
    },
    success: function() {
        alert(" your connection is alright!");
    }
});
3
Stanley Amos
try this 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
 if (! window.jQuery) {
 alert('No internet Connection !!');
  }
 else {
 // internet connected
 }

インターネット接続を検出するためのJqueryプラグイン

1
Mahmoude Elghandour

見返りに単純なtrueまたはfalseを取得することはできません。コールバックハンドラーを提供してください。

function is_internet_connected(callbackhandler)
{
$.get({
  url: "/app/check_connectivity/",
  success: function(){
     callbackhandler(true);
  },
  error: function(){
     callbackhandler(false);
  },
  dataType: 'text'
});
}
1
gurvinder372

W3Cによると、ナビゲーターのonLineプロパティを使用するだけです http://www.w3schools.com/jsref/prop_nav_online.asp

ただし、ナビゲーターは、ブラウザーにインターネット機能があるかどうか（ルーター、3Gなどに接続されているかどうか）のみを通知します。したがって、これがfalseを返す場合はおそらくオフラインですが、trueを返す場合は、ネットワークがダウンしているか、非常に遅い場合でもオフラインである可能性があります。これは、XHRリクエストをチェックするときです。

setInterval(setOnlineStatus(navigator.onLine), 10000);

function setOnlineStatus(online)
{
    if (online) {
    //Check Host reachable only if connected to Router/Wifi/3G...etc
        if (hostReachable())
            $('#onlineStatus').html('ONLINE').removeAttr('class').addClass('online');
        else
            $('#onlineStatus').html('OFFLINE').removeAttr('class').addClass('offline');
    } else {
        $('#onlineStatus').html('OFFLINE').removeAttr('class').addClass('offline');
    }
}

function hostReachable()
{
    // Handle IE and more capable browsers
    var xhr = new (window.ActiveXObject || XMLHttpRequest)("Microsoft.XMLHTTP");
    var status;

    // Open new request as a HEAD to the root hostname with a random param to bust the cache
    xhr.open("HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false);

    // Issue request and handle response
    try {
        xhr.send();
        return (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304));
    } catch (error) {
        return false;
    }

}

編集：ポート番号が80と異なる場合は使用し、そうでない場合は失敗します。

xhr.open("HEAD", "//" + window.location.hostname + ":" + window.location.port + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false);
0
Bogdan Trusca