Javascript XMLHttpRequest issue

Question

Hello everyone,

I am using the following script to monitor whether I can connect to a web site in a regular interval (10 seconds in my sample code). I met with two issues, any ideas how to solve them?

1. If a web site is very slow and no response within 10 seconds (making PingWebSite not return), I find 2 second call to PingWebSite will be executed because of 10 second interval arrives. My purpose is I want only one call to PingWebSite is under execution, and if 10 seconds interval arrives and previous PingWebSite is executing, I want to prevent current PingWebSite from execution. Any ideas how to solve this?

2. I find a strange issue, when I connect to a very slow web site, and code path executes to "alert("connecting");", then I expect exception to be thrown for timeout, but in my debug, no exception is thrown. Any ideas how to catch timeout exception?

Here is my code,

var index = 0;

function setup() {
    window.setInterval(PingWebSite, (10 * 1000));
}

function PingWebSite() {

    var http_request = new XMLHttpRequest();
    try {
        http_request.open("GET", "http://www.google.com", true);
        http_request.onreadystatechange = function() {
            if (http_request.readyState == 4) {
                if (http_request.status == 200) {
                    MonitorInformation.innerText = "http://www.google.com" + " Connection ok";
                    alert("ok");
                }
                else {
                    alert("fail");
                }
                http_request = null;
            } // if if (http_request.readyState == 4)
            else {
                // if execute here, no exception will be thrown
                alert("connecting");
            }
        }  // end of function
        http_request.send(null);
    } // try
    catch (e) {
        alert("service is not available");
    }
}

EDIT 1: I have followed advice here to modify my code. Here is the below version. The new issue is index value (e.g. 0) will be prompted in alert message box before ok/fail alert message box. I think index value (e.g. 0) should be prompted in alert message box after ok/fail alert message box. Any ideas why?

var index = 0;
var http_request;
var xhrTimeout;
var chkConn;

function setup() {
    chkConn = window.setInterval(PingWebSite, (10 * 1000));
}

function WebMonitorTimeout() {
    http_request.abort();
    alert("timeout");
    index = index + 1;
}

function PingWebSite() {

    http_request = new XMLHttpRequest();
    http_request.open("GET", "http://www.google.com", true);

    http_request.onreadystatechange = function()
    {
        if (http_request.readyState == 4) {
            if (chkConn) { clearInterval(chkConn); }
            if (http_request.status == 200) {
                alert("ok");
                index = index + 1;
                if (xhrTimeout) { clearTimeout(xhrTimeout); }
            }
            else {
                alert("fail");
                index = index + 1;
                if (xhrTimeout) { clearTimeout(xhrTimeout); }
                }

                http_request = null;
            } //if (http_request.readyState == 4)

    }    // end of event function
    http_request.send(null);
    xhrTimeout = setTimeout("WebMonitorTimeout();", 30000);
    alert(index);
    chkConn = window.setInterval(PingWebSite, (30 * 1000));
}

thanks in advance, George

Answer 1

Duplicate of http://stackoverflow.com/questions/1184638/javascript-connect-to-web-site-code-not-working/1184650#1184650

You can't do Cross Site XHR requests because of browser security

Answer 2

<SCRIPT language=javascript>
// Needed for IE6 and older to replicate the standard XMLHttpRequest object
if (window.ActiveXObject && !window.XMLHttpRequest){window.XMLHttpRequest =
 function(){progIds=new Array("Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0",
 "Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP",
 "Microsoft.XMLHTTP");for(i in progIds){try{return new
 ActiveXObject(progIds[i]);}catch(ex){alert(progIds[i]);}}return null;};}

// Standard asynchonous AJAX code
var xhr = new XMLHttpRequest();
// You would normally trade out the location.href with an actual .ashx
// page.  It's like this here only for testing, thereby requesting this
// same page back from the server.
xhr.open("POST",location.href,true);

// The function that will be called asynchronously when the server sends
// back its response
xhr.onreadystatechange=function(){
   // If you're using the file system instead of a web server then xhr.status
   // will come back as 0, not 200.  And of course if the page isn't found
   // then a web server will send back a status of 404.  xhr.readyState is 4
   // when the page is done.
   if (xhr.readyState == 4 && xhr.status == 200) {
      clearTimeout(xhrTimeout);   // Looks like we didn't time out!
      // Use xhr.responseText to parse the server's response
      alert(xhr.responseText);
   }
}

// Now that we're ready to handle the response, we can make the request
xhr.send("My excellent post info");
// Timeout to abort in 5 seconds
var xhrTimeout=setTimeout("ajaxTimeout();",5000);
function ajaxTimeout(){
   xhr.abort();
   alert("Well dang, the AJAX request timed out.  Did you lose network "+
         "connectivity for some reason?");
   // Note that at this point you could try to send a notification to the
   // server that things failed, using the same xhr object.
}
</SCRIPT>