Cargar contenidos con AJAX estándar

Especificaciones del ejercicio

  1. Estilos CSS:
      Los estilos referente a los elementos contenidos en el div con clase "result" se localizan en el documento css/contenidoDinamico.css.
  2. Dados los documentos noticiasAjax.html y lib/generaNoticias.php. Implementar el código necesario para cargar las noticias generadas por el documento generaNoticias.php, en la sección con id divNoticia. Para ello se debe cumplir con:
    1. De forma periódica cada 4 segundos, se debe realizar una petición al servidor a través de AJAX, para obtener la noticia siguiente del arreglo de noticias. Esa noticia se debe cargar en la sección con id divNoticia.
    2. Las noticias se van actualizando cada 4 segundos hasta traer todas las noticias del documento generaNoticias.php. Cuando las noticias se agotan se debe deshabilitar el boton con id detener (ya que su funcionalidad pierde sentido).
    3. Las noticias recibidas del servidor se deben almacenar, ya que cuando se pulsen los botones de anterior y siguiente, la petición al servidor para traer noticias se detiene y es posible navegar por las noticias almacenadas. Siguiendo la lógica de acción el botón anterior devuelve la noticia anterior y la carga en el div especificado y el botón siguiente realiza una operación similar pero con la noticia siguiente.
    4. Si aun no se han obtenido todas las noticias y se accionan los botones de anterior o siguiente, la petición al sevidor se detiene y el botón "detener" pasa a poseer el valor de "iniciar", el cual debe realizar la tarea de reanudar las peticiones obteniendo la siguiente noticia, dada la última noticia solicitada. Además es posible navegar por las noticias almacenadas a través de los botones de anterior y siguiente.
    5. Al cargar una noticia en el div con id divNoticia, se debe presentar un efecto de parpadeo o flash de color amarillo claro, el cual debe ocurrir en menos de un segundo. Este efecto también ocurre cuando se van pasando las noticias usando los botones anterior y siguiente.

Resultado de aplicar las funciones requeridas.

Cargar noticias con AJAX.

Resultado del ejercicio

Cargar Noticias con AJAX

Morbi a lacus. Proin pharetra nisi id est.

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.

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.

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.