• Save
Web de noticias en Ajax
Upcoming SlideShare
Loading in...5
×
 

Web de noticias en Ajax

on

  • 1,732 views

Pequeño proyecto en Ajax. Web de noticias con Ajax, PHP y MySQL.

Pequeño proyecto en Ajax. Web de noticias con Ajax, PHP y MySQL.

Statistics

Views

Total Views
1,732
Views on SlideShare
1,172
Embed Views
560

Actions

Likes
2
Downloads
0
Comments
0

1 Embed 560

http://bitcoach.wordpress.com 560

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web de noticias en Ajax Web de noticias en Ajax Document Transcript

    • 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.zipEn esta práctica vamos a realizar una web de noticias. La página web inicial muestra por defecto lasnoticias 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 HTMLEn este caso vamos a utilizar para el desarrollo del proyecto Adobe Dreamweaver, puesto que estaherramienta permite trabajar de forma integrada y cómoda con todos los componentes del proyecto.Crear base de datosUtilizamos phpMyAdmin para crear la base de datos bdnoticias que contrendrá la tabla noticias conlos campos y tipos de dato mostrados en la figura.A continuación insertamos algunas noticias.
    • Parte cliente del proyectoCompuesta 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.html1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 }3132 .container {33 width: 960px;34 background: #FFF;35 margin: 0 auto;36 }3738 .header {39 background: #ADB96E;40 }41 .content {4243 padding: 10px 0;44 }4546 .footer {47 padding: 10px 0;48 background: #CCC49F;49 text-align: center;50 }51
    • 52 /* Estilo para las noticias */5354 #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>6970 <body onload="peticion(hoy());">7172 <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>&nbsp; Noticias con AJAX</h1>76 <p>&nbsp;</p>77 <!-- end .header --></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 1de septiembrede 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><!-- end .content --></p>91 </div>92 <div class="footer">93 <p>Powered by Ajax</p>94 <!-- end .footer --></div>95 <!-- end .container --></div>96 </body>97 </html>funcionesajax.js1 //crear el objeto2 var ObjetoXMLHttpRequest;3 try { //intentamos el método más general, para todos los navegadoes excepto el InternetExplorer 6 ó anterior4 ObjetoXMLHttpRequest = new XMLHttpRequest();5 }catch(e){6 try{ //Internet Explorer, versión 2 del objeto7 ObjetoXMLHttpRequest = new ActiveXObject("XSXML2.XMLHTTP");8 }catch(e1){//IE más viejos9 try{10 ObjetoXMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");11 }catch(e2){12 ObjetoXMLHttpRequest = false; //no está soportado13 }14 }15 }
    • 16 //asignar la función para el procedimiento de evento17 ObjetoXMLHttpRequest.onreadystatechange=procesaRespuesta;18 //función de procedimiento de evento19 function procesaRespuesta(){20 if(ObjetoXMLHttpRequest.readyState == 4) {//datos listos21 if(ObjetoXMLHttpRequest.status == 200) {//respuesta correcta22 //aquí el código que procesa la respuesta23 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 noticia34 titulo=noticia.firstChild.firstChild.nodeValue;//tipo texto su valor está en firstchild35 contenido=noticia.lastChild.firstChild.nodeValue;//tipo texto su valor está enfirstchild36 html=html + "<h3>" + titulo + "</h3>";37 html=html + "<p>" + contenido + "</p>";38 }3940 //ir sacando titulos y cuerpos y concatenándolos41 document.getElementById("noticias").innerHTML=html;42 }43 }44 }45 //función que genera y ejecuta la petición46 function peticion(fecha){47 //preparar la petición48 ObjetoXMLHttpRequest.open("POST","noticias.php",true); //asíncrono49 ObjetoXMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");50 //enviar la petición51 ObjetoXMLHttpRequest.send("fecha=" + fecha);52 }Parte servidor del proyectoEl 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 lasnoticias para crear xml, establece la cabecera para informar y envía dicho xml.noticias.php1 <?php23 //conectarse a la base4 if (!($link=mysql_connect("localhost","root",""))) //servidor,usuario y contraseña5 {6 echo "Error conectando a la base de datos.";7 exit();8 }9 if (!mysql_select_db("bdnoticias",$link)) //nombre de la base de datos10 {11 echo "Error seleccionando la base de datos.";12 exit();13 }14 //hacer la consulta15 $result=mysql_query("select * from noticias where fecha=".$_POST["fecha"].";" ,$link);16 if ($result==null){17 //no hay noticias para este día18 mysql_close($link); //cierra la conexion19 exit();20 }
    • 21 //generar el xml de respuesta22 $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 respuesta32 header("Content-type: text/xml"); //informamos de que es un xml33 echo($respuesta);34 //liberar recursos35 mysql_free_result($result);36 mysql_close($link); //cierra la conexion37 ?>38