Web de noticias en Ajax

Materia: Ajax
Sección: Web de noticias utilizando Ajax y PHP.
Nivel de Dificultad: Básico.
Objetivo de la Práctica: Implementar Ajax en un pequeño proyecto.

Fichero del proyecto: ajax_webNoticias.zip

En esta práctica vamos a realizar una web de noticias. La página web inicial muestra por defecto las
noticias del día y un buscador para filtrar noticias por fecha.

Aspectos del proyecto:
Tecnologías utilizadas: Servidor Web Apache, PHP, MySQL (XAMMP), Dreamweaver, Ajax.
Las sucesivas cargas de noticias se harán mediante Ajax.
Las noticias se guardarán en una base de datos y se accederá a ellas desde un script php.
La carga inicial de datos se hará en el load del body.

Editor HTML

En este caso vamos a utilizar para el desarrollo del proyecto Adobe Dreamweaver, puesto que esta
herramienta permite trabajar de forma integrada y cómoda con todos los componentes del proyecto.

Crear base de datos

Utilizamos phpMyAdmin para crear la base de datos bdnoticias que contrendrá la tabla noticias con
los campos y tipos de dato mostrados en la figura.

A continuación insertamos algunas noticias.

Parte cliente del proyecto

Compuesta por los archivos index.html, funcionesajax.js

Estilos css incorporados.
El archivo funcionesajax.js contiene el código Ajax.
Div para las noticias con id noticias.
Un formulario llama al objeto Ajax para realizar la petición.

index.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra
nsitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Noticias con AJAX</title>
6 <script language="javascript" src="funcionesajax.js"></script>
7 <script language="javascript">
8 function hoy(){
9 var fecha=new Date();
10 var formateada=fecha.getFullYear() + "-" + (fecha.getMonth()+1) + "-" + fecha.getDate();
11 return formateada;
12 }
13 </script>
14 <style type="text/css">
15 <!--
16 body {
17 font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
18 background: #42413C;
19 margin: 0;
20 padding: 0;
21 color: #000;
22 }
23 h1, h2, p {
24 margin-top: 0;
25 padding-right: 15px;
26 padding-left: 15px;
27 }
28 a img {
29 border: none;
30 }
31
32 .container {
33 width: 960px;
34 background: #FFF;
35 margin: 0 auto;
36 }
37
38 .header {
39 background: #ADB96E;
40 }
41 .content {
42
43 padding: 10px 0;
44 }
45
46 .footer {
47 padding: 10px 0;
48 background: #CCC49F;
49 text-align: center;
50 }
51

52 /* Estilo para las noticias */
53
54 #noticias {
55 font-family: Verdana, Geneva, sans-serif;
56 font-size: 10px;
57 border-top-width: thin;
58 border-right-width: thin;
59 border-bottom-width: thin;
60 border-left-width: thin;
61 border-top-style: dotted;
62 border-right-style: dotted;
63 border-bottom-style: dotted;
64 border-left-style: dotted;
65 margin: 10px;
66 }
67 -->
68 </style></head>
69
70 <body onload="peticion(hoy());">
71
72 <div class="container">
73 <div class="header">
74 <img src="ajax-logo.jpg" alt="Insertar logotipo aquí" name="Insert_logo" width="91"
height="90" align="left" id="logo" style="background: #C6D580; display: inline-block;" />
75 <h1>  Noticias con AJAX</h1>
76 <p> </p>
77 </div>
78 <div class="content">
79 <h1>Noticias del día</h1>
80 <div id="noticias">
81 <p>Hoy no hay noticias</p>
82 </div>
83 <h2>Buscador de noticias</h2>
84 <p>Introduce la fecha de la siguiente forma aaaa-mm-dd, por ejemplo 2010-09-01 para el 1
de septiembre
de 2010.</p>
85 <form id="buscador" name="buscador" style="margin: 10px;">
86 <label for="fecha">Fecha</label>
87 <input type="text" name="fecha" id="fecha" />
88 <input type="button" name="enviar" id="enviar" value="Enviar"
onclick="peticion(document.forms[0].elements['fecha'].value);"/>
89 </form></p>
90 <p></p>
91 </div>
92 <div class="footer">
93 <p>Powered by Ajax</p>
94 </div>
95 </div>
96 </body>
97 </html>

funcionesajax.js

1 //crear el objeto
2 var ObjetoXMLHttpRequest;
3 try { //intentamos el método más general, para todos los navegadoes excepto el Internet
Explorer 6 ó anter
ior
4 ObjetoXMLHttpRequest = new XMLHttpRequest();
5 }catch(e){
6 try{ //Internet Explorer, versión 2 del objeto
7 ObjetoXMLHttpRequest = new ActiveXObject("XSXML2.XMLHTTP");
8 }catch(e1){//IE más viejos
9 try{
10 ObjetoXMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
11 }catch(e2){
12 ObjetoXMLHttpRequest = false; //no está soportado
13 }
14 }
15 }

16 //asignar la función para el procedimiento de evento
17 ObjetoXMLHttpRequest.onreadystatechange=procesaRespuesta;
18 //función de procedimiento de evento
19 function procesaRespuesta(){
20 if(ObjetoXMLHttpRequest.readyState == 4) {//datos listos
21 if(ObjetoXMLHttpRequest.status == 200) {//respuesta correcta
22 //aquí el código que procesa la respuesta
23 var objxml=ObjetoXMLHttpRequest.responseXML;
24 if(objxml.documentElement.childNodes.length==0){
25 document.getElementById("noticias").innerHTML="No hay noticias hoy";
26 return;
27 }
28 var html="";
29 var titulo;
30 var contenido;
31 var noticia;
32 for (i=0;i<objxml.documentElement.childNodes.length;i++){
33 noticia=objxml.documentElement.childNodes[i]; //etiqueta-nodo noticia
34 titulo=noticia.firstChild.firstChild.nodeValue;//tipo texto su valor está en firstchild
35 contenido=noticia.lastChild.firstChild.nodeValue;//tipo texto su valor está en
firstchild
36 html=html + "<h3>" + titulo + "</h3>";
37 html=html + "<p>" + contenido + "</p>";
38 }
39
40 //ir sacando titulos y cuerpos y concatenándolos
41 document.getElementById("noticias").innerHTML=html;
42 }
43 }
44 }
45 //función que genera y ejecuta la petición
46 function peticion(fecha){
47 //preparar la petición
48 ObjetoXMLHttpRequest.open("POST","noticias.php",true); //asíncrono
49 ObjetoXMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-
urlencoded");
50 //enviar la petición
51 ObjetoXMLHttpRequest.send("fecha=" + fecha);
52 }

Parte servidor del proyecto

El componente de servidor lo compone el fichero noticias.php que recibe como parámetro la fecha,
conecta con la base de datos y extrae las noticias correspondientes. A continuación formatea las
noticias para crear xml, establece la cabecera para informar y envía dicho xml.

noticias.php

1 <?php
2
3 //conectarse a la base
4 if (!($link=mysql_connect("localhost","root",""))) //servidor,usuario y contraseña
5 {
6 echo "Error conectando a la base de datos.";
7 exit();
8 }
9 if (!mysql_select_db("bdnoticias",$link)) //nombre de la base de datos
10 {
11 echo "Error seleccionando la base de datos.";
12 exit();
13 }
14 //hacer la consulta
15 $result=mysql_query("select * from noticias where fecha='".$_POST["fecha"]."';" ,$link);
16 if ($result==null){
17 //no hay noticias para este día
18 mysql_close($link); //cierra la conexion
19 exit();
20 }

21 //generar el xml de respuesta
22 $respuesta='<?xml version="1.0" encoding="ISO-8859-1"?>';
23 $respuesta=$respuesta."<noticias>";
24 while($row = mysql_fetch_array($result)) {
25 $respuesta=$respuesta."<noticia>";
26 $respuesta=$respuesta."<titulo>".$row["titulo"]."</titulo>";
27 $respuesta=$respuesta."<contenido>".$row["contenido"]."</contenido>";
28 $respuesta=$respuesta."</noticia>";
29 }
30 $respuesta=$respuesta."</noticias>";
31 //enviar la respuesta
32 header("Content-type: text/xml"); //informamos de que es un xml
33 echo($respuesta);
34 //liberar recursos
35 mysql_free_result($result);
36 mysql_close($link); //cierra la conexion
37 ?>
38

Web de noticias en Ajax

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Web de noticias en Ajax

Similar to Web de noticias en Ajax (20)

More from jubacalo

More from jubacalo (8)

Recently uploaded

Recently uploaded (20)

Web de noticias en Ajax