14.12. Ejercicio 12 (Introducción a AJAX)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio 12 - Actualización periódica de contenidos</title>
<style type="text/css">
body { margin: 0; }
#contenidos { padding: 1em; }
#ticker {
  height: 20px;
  padding: .3em;
  border-bottom: 1px solid #CCC;
  background: #FAFAFA;
  font-family: Arial, Helvetica, sans-serif;
}
#ticker strong { margin-right: 1em; }
#acciones {
  position: absolute;
  top: 3px;
  right: 3px;
}
</style>
<script type="text/javascript">
Number.prototype.toString = function(){
  if (this < 10) {
    return '0' + this;
  }
  else {
    return this;
  }
}

var peticion = null;
var intervalo = null;
var noticias = [];
var numeroElemento = null;

window.onload = function(){
  intervalo = setInterval(descargaNoticia, 1000);
  document.getElementById('detener').onclick = detener;
  document.getElementById('anterior').onclick = anterior;
  document.getElementById('siguiente').onclick = siguiente;
}

function descargaNoticia(){
  if (peticion == null) {
    if (window.XMLHttpRequest) {
      peticion = new XMLHttpRequest();
    }
    else {
      peticion = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  else {
    peticion.abort();
  }

  peticion.onreadystatechange = procesaNoticia;

  peticion.open('GET', 'http://localhost/RUTA_HASTA_ARCHIVO/generaContenidos.php'+'?nocache='+Math.random(), true);
  peticion.send(null);
}

function procesaNoticia(){
  if (peticion.readyState == 4) {
    if (peticion.status == 200) {
      var fechaHora = new Date();
      var hora = fechaHora.getHours().toString() + ":" + fechaHora.getMinutes().toString() + ":" + fechaHora.getSeconds().toString();
      noticias.push({
        hora: hora,
        titular: peticion.responseText
      });
      muestraNoticia(noticias[noticias.length - 1]);
    }
  }
}

function detener(){
  clearInterval(intervalo);
  this.value = 'Iniciar';
  this.onclick = iniciar;
}

function iniciar(){
  intervalo = setInterval(descargaNoticia, 1000);
  this.value = 'Detener';
  this.onclick = detener;

  numeroElemento = null;
}

function anterior(){
  var detener = document.getElementById('detener');
  clearInterval(intervalo);
  detener.value = 'Iniciar';
  detener.onclick = iniciar;

  if (numeroElemento == null) {
    numeroElemento = noticias.length - 1;
  }

  if (numeroElemento > 0) {
    numeroElemento--;
  }

  var noticia = noticias[numeroElemento];
  muestraNoticia(noticia);
}

function siguiente(){
  var detener = document.getElementById('detener');
  clearInterval(intervalo);
  detener.value = 'Iniciar';
  detener.onclick = iniciar;

  if (numeroElemento == null) {
    numeroElemento = noticias.length - 1;
  }

  if (numeroElemento < noticias.length - 1) {
    numeroElemento++;
  }

  var noticia = noticias[numeroElemento];
  muestraNoticia(noticia);
}

function muestraNoticia(noticia){
  var ticker = document.getElementById('ticker');
  ticker.innerHTML = "<strong>" + noticia.hora + "</strong> " + noticia.titular;
  ticker.style.backgroundColor = '#FFFF99';
  setTimeout(limpiaTicker, 300);
}

function limpiaTicker(){
  var ticker = document.getElementById('ticker');
  ticker.style.backgroundColor = '#FAFAFA';
}
</script>
</head>
<body>
<div id="ticker"></div>

<div id="acciones">
  <input type="button" id="detener" value="Detener"/>
  <input type="button" id="anterior" value="&laquo; Anterior" />
  <input type="button" id="siguiente" value="Siguiente &raquo;" />
</div>

<div id="contenidos">
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h1>
<p>Proin tristique condimentum sem. Fusce lorem sem, laoreet nec, laoreet et, venenatis nec, ligula.
Nunc dictum sodales lorem. Fusce turpis. Nullam semper, ipsum ut ultrices mattis, nulla magna luctus
purus, sit amet vehicula magna magna vel velit.</p>

<h2>Morbi a lacus. Proin pharetra nisi id est.</h2>

<p>Maecenas mollis suscipit sapien. Pellentesque blandit dui eu mauris. Etiam elit urna, iaculis non,
dignissim in, fermentum nec, ipsum. Nulla commodo aliquam lectus. Sed vulputate diam ac sapien accumsan
consequat. Aliquam id urna sed dolor tincidunt tempor.</p>

<h2>Quisque consequat. Nullam vel justo.</h2>

<p>Cras sit amet elit a mauris ultricies viverra. Phasellus placerat quam et magna. Nunc sed tellus.
Pellentesque hendrerit pellentesque nunc. Aenean turpis. Sed justo tellus, mollis at, euismod at,
pellentesque eu, tellus. Nam vulputate. Nunc porttitor sapien tristique velit. Vestibulum tempus,
quam non dapibus pellentesque, sem nulla sagittis ligula, et volutpat turpis felis vitae nunc.</p>

<p>Ut eros magna, congue in, sodales ac, facilisis ac, dolor. Aenean faucibus pellentesque est. Proin
cursus. Vivamus mollis enim in magna. Donec urna risus, convallis eget, aliquet non, auctor sit amet, leo.
Duis tellus purus, pharetra in, cursus sed, posuere semper, lorem. Fusce eget velit nec felis tempus
gravida. Donec et augue vitae nulla posuere hendrerit. Nulla vehicula scelerisque massa. Phasellus eget
lorem id quam molestie ultrices. Integer ac ligula sit amet lectus condimentum euismod. Sed malesuada
orci eu neque.</p>
</div>
</body>
</html>
Descargar ZIP con la solución completa