IE 8 JavaScript Improvements

Hi All, I happen to read the release notes of Microsoft IE 8 here and was amazed from something I have discovered.

The story begins from a devolvement request I received a few days ago. The request was to check if there is a Internet connection every X second ( 30 seconds actually). Well At the beginning what I did was very simple : I injected a JavaScript block by using the base page of the project. This JavaScript code calls some functions that uses window.setInterval function to run the connectivity check every 30 seconds:

var nSetTimeOutInterval;
var oXmlhttpForConnectionChecking;
function StartInternetConnection() {
    nSetTimeOutInterval = window.setInterval("CheckInternetConnection();", 

     parseInt(GetConnectionTimeOut(), 10) * 1000);
}

As you can see, I am keeping my interval id (handler) as a global variable so that I can cancel it I want to. In addition I am using a web.config file to specify the time interval.

Now we need to actually check if the Internet is "on":

function CheckInternetConnection() {   
    oXmlhttp = new XMLHttpRequest();    
    var sURL = GetTestConnectionURL();

    oXmlhttp.timeout = 5000;

    oXmlhttp.ontimeout = TimeoutFired;

    oXmlhttp.open("GET", sURL, true);
    oXmlhttp.onreadystatechange = GotAnswer;
    oXmlhttp.send(null);
}

The GetTestConnectionURL function will return the url for an empty page in the web site (to reduce traffic).

The call will be Async of obviously so we will not stuck the UI. We also have to set a timeout so that the request will not hang too much. (This timeout property only exists in XMLHttpRequest object). Now all that is left is to check that the http status code is 200.

function GotAnswer() {
    // if xmlhttp shows "loaded"
    if (oXmlhttp.readyState == 4) {
        //if "OK"
        if (oXmlhttp.status == 200) {
            //Do nothing....                       
        }
        else {
            alert("Note:The internet connection is lost...");
            window.clearInterval(nSetTimeOutInterval);
        }
    }
}

Well today I found a better way. IE 8 added a new property to the window.navigator object - window.navigator.onLine. Amazing!!!
This property is has  boolean value of true if we are online and false if we are not.

Try to alert this value when your network cable is connected and when it is not....

This is not all! As a bonus we can even register our page to 2 new events: onoffline and ononline.

These events will be called when the onLine property changes from true to false and from false to true.