14.20. Ejercicio 20 (Introducción a AJAX)

El archivo util.js que utiliza el ejercicio se incluye en el archivo ZIP de la solución completa.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 20 - Monitorizar</title>

<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
var nodos = [{"nombre": "Google", "url": "http://www.google.com"}, {"nombre": "Yahoo", "url": "http://www.yahoo.com"},
             {"nombre": "MSN", "url": "http://www.msn.com"}, {"nombre": "eBay", "url": "http://www.ebay.com"},
             {"nombre": "YouTube", "url": "http://www.youtube.com"}, {"nombre": "Flickr", "url": "http://www.flickr.com"}];
var intervalo;

function monitoriza() {
  intervalo = setInterval(monitorizaNodos, 1000);
}

function detiene() {
  clearInterval(intervalo);
}

function monitorizaNodos() {
  for(var i=0; i<nodos.length; i++) {
    document.getElementById("nodo"+i).style.border = "3px solid #000000";
    var ping = new net.CargadorContenidosCompleto(nodos[i].url, procesaPing, noDisponible, "HEAD");
  }
}

function procesaPing() {
  if(new Date(this.req.getResponseHeader("Date"))) {
    var numeroNodo = calculaNumeroNodo(this.url);
    document.getElementById("nodo"+numeroNodo).style.border = "3px solid #00FF00";
    document.getElementById("nodo"+numeroNodo).className = "on";
    document.getElementById("datos"+numeroNodo).innerHTML = this.req.getResponseHeader("Server");
  }
}

function noDisponible() {
  var numeroNodo = calculaNumeroNodo(this.url);
  document.getElementById("nodo"+numeroNodo).style.border = "3px solid #FF0000";
  document.getElementById("nodo"+numeroNodo).className = "off";
}

function calculaNumeroNodo(url) {
  for(var i=0; i<nodos.length; i++) {
    if(nodos[i].url == url) {
      return i;
    }
  }
}

window.onload = function() {
  // Crear elemento de tipo <div> para mostrar cada uno de los nodos
  for(i=0; i<nodos.length; i++) {
    var nodo = document.createElement("div");
    nodo.id = "nodo"+i;
    nodo.innerHTML = "<strong>" + nodos[i].nombre + "</strong><br>" + nodos[i].url + "<span id=\"datos"+i+"\"></span>";
    document.getElementById("mapa_red").appendChild(nodo);
    document.getElementById("nodo"+i).className = "normal";
  }

  // Establecer los eventos en los botones
  document.getElementById("monitoriza").onclick = monitoriza;
  document.getElementById("detiene").onclick = detiene;
}

</script>

<style type="text/css">
body {font-size:14px; font-family:Arial, Helvetica, sans-serif;}
.normal, .consulta, .on, .off {width: 140px; text-align: center; margin: .5em; padding: .5em; }
form {display: inline; }
.normal {background-color: #FFFFFF; border: 3px solid #C0C0C0;}
.consulta {border:3px solid #000000;}
.on {background-color: #00CC00; border: 3px solid #00FF00;}
.off {background-color: #CC0000; border: 3px solid #FF0000;}
#mapa_red {border:5px solid #D0D0D0; float: left; padding: 1em 0; margin: 1em 0; width: 50%;}
#mapa_red div { float: left; margin: 1em; height: 5em; width: 35%;}
div span {display:block; padding:.3em;}
</style>

</head>

<body>
<h1>Consola de monitorización</h1>

<form>
  <input type="button" id="monitoriza" value="Monitorizar"></input>
  <input type="button" id="detiene" value="Detener"></input>
</form>

<div id="mapa_red"></div>

</body>
</html>
Descargar ZIP con la solución completa