title: JavaScript: Check if a remote server is online
body: <p>Before you mark it as a duplicate, please read.</p>
  
  <p>I am trying to simulate ping using javascript e.g. It should show status (Up/Down) for a given website.</p>
  
  <p>www.google.com => Up<br>
  www.dummysite.com => down</p>
  
  <p>I tried four approaches<br>
   1. Using AJAX (works only for the same origin server)<br>
   2. Using Image trick (works only if the remote server returns an image)<br>
   3. Using JSONP (Doesn't work as server returns an HTML page)<br>
   4. Using $.getScript (Works for all site except lorem pixel because its MIME type ('image/jpeg') is not executable.) Didn't quite understand how it's different than 3.</p>
  
  <h2> <a href="https://jsfiddle.net/heyrohit/xus5e6p9/" rel="nofollow noreferrer">JSFiddle: CORS</a></h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var sites = {
    google: {
      url: "https://www.google.com",
      id: "googleStatus"
    },
    dummy: {
      url: "http://www.dummysitealphabeta2.com",
      id: "dummySiteStatus"
    },
    jsfiddle: {
      url: "https://fiddle.jshell.net",
      id: "jsfiddleStatus"
    },
    lorem: {
      url: "https://lorempixel.com/400/200/",
      id: "loremStatus"
    }
  };
  
  // Default
  refreshAllSites('ajax');
  
  function refreshAllSites(approach) {
    Object.keys(sites).forEach(function(name) {
      // Four approaches
      switch (approach) {
        case "ajax":
          // 1. Using AJAX (works only for the same origin)
          checkStatusUsingAJAX(sites[name]);
          break;
  
        case "image":
          // 2. Using Image trick (works only if 
          // the remote server returns image)
          checkStatusUsingImage(sites[name]);
          break;
  
        case "jsonp":
          // 3. Using JSONP (Doesn't work because server is an HTML page)
          checkStatusUsingJSONP(sites[name]);
          break;
  
        case "getscript":
          // 4. Using GetScript (Doesn't work for lorem pixel because its MIME type ('image/jpeg') is not executable.)
          checkStatusUsingGetScript(sites[name]);
          break;
      }
    });
  }
  
  // Approach 4: Using GetScript
  function checkStatusUsingGetScript(site) {
    $.getScript(site.url + "?callback=?").done(function() {
      document.getElementById(site.id).innerHTML = "Up"
    }).fail(function() {
      document.getElementById(site.id).innerHTML = "Down"
    });
  }
  
  // Approach 3: Using JSONP
  // Doesn't work as server returns an HTML page
  function checkStatusUsingJSONP(site) {
    jsonp(site.url, function() {
      document.getElementById(site.id).innerHTML = "Up"
    }, function() {
      document.getElementById(site.id).innerHTML = "Down"
    });
  
    // Define JSONP
    function jsonp(url, success, fail) {
      var callbackName = 'jsonpCallback' +
        Math.round(10000 * Math.random());
  
      window[callbackName] = function(data) {
        console.log("calling callback");
        delete window[callbackName];
        document.body.removeChild(script);
        success(escape(data));
      }
  
      var script = document.createElement('script');
      script.src = url + "?callback=" + callbackName;
      script.onerror = fail;
  
      document.body.appendChild(script);
    }
  }
  
  // Approach 2: Using Image loading trick
  // Only works if the remote server returns Image e.g. lorem pixel
  // https://stackoverflow.com/a/5224638/351708
  function checkStatusUsingImage(site) {
    var image = document.createElement("img");
    image.onload = function() {
      document.getElementById(site.id).innerHTML = "Up"
    };
    image.onerror = function() {
      document.getElementById(site.id).innerHTML = "Down"
    };
  
    image.src = site.url;
  }
  
  
  // Approach 1
  // Using AJAX - It will only be successful in case of JSFiddle
  // as for the rest of the sites it will throw CORS exception
  function checkStatusUsingAJAX(site) {
    $.ajax(site.url).done(function() {
      document.getElementById(site.id).innerHTML = "Up"
    }).fail(function() {
      document.getElementById(site.id).innerHTML = "Down"
    });
  };
  
  // Other functions
  var select = document.getElementById("approachOptions");
  select.addEventListener("change", function(e) {
    refreshAllSites(this.value);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    border-collapse: collapse;
    width: 100%;
  }
  
  td,
  th {
    border-bottom: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  Ping server using
  &lt;select id="approachOptions"&gt;
    &lt;option value="ajax"&gt;AJAX&lt;/option&gt;
    &lt;option value="image"&gt;Image Trick&lt;/option&gt;
    &lt;option value="jsonp"&gt;JSONP&lt;/option&gt;
    &lt;option value="getscript"&gt;$.getScript()&lt;/option&gt;
  &lt;/select&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;Website&lt;/th&gt;
      &lt;th&gt;Status&lt;/th&gt;
      &lt;th&gt;Uptime&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Google&lt;/td&gt;
      &lt;td&gt;
        &lt;label id="googleStatus"&gt;&lt;/label&gt;
      &lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Dummy Site&lt;/td&gt;
      &lt;td&gt;
        &lt;label id="dummySiteStatus"&gt;&lt;/label&gt;
      &lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;JS Fiddle&lt;/td&gt;
      &lt;td&gt;
        &lt;label id="jsfiddleStatus"&gt;&lt;/label&gt;
      &lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Lorem Pixel&lt;/td&gt;
      &lt;td&gt;
        &lt;label id="loremStatus"&gt;&lt;/label&gt;
      &lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Similar questions:<br>
  <a href="https://stackoverflow.com/q/5224197/351708">Javascript: Check if server is online</a><br>
  <a href="https://stackoverflow.com/a/11941783/351708">Is it possible to ping a server from Javascript?</a><br>
  <a href="https://stackoverflow.com/q/7531823/351708">Use JSONP to load an html page</a><br>
  <a href="https://stackoverflow.com/a/22780569/351708">JavaScript XMLHttpRequest using JsonP</a></p>