SlideShare uma empresa Scribd logo
1 de 6
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>&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 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><!-- 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.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

Mais conteúdo relacionado

Mais procurados

Find File Servlet DB
Find File Servlet DBFind File Servlet DB
Find File Servlet DBjubacalo
 
Servlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTMLServlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTMLjubacalo
 
Práctica Completa en Flash – ActionScript
Práctica Completa en Flash – ActionScriptPráctica Completa en Flash – ActionScript
Práctica Completa en Flash – ActionScriptjubacalo
 
Conexión a postgres desde
Conexión a postgres desdeConexión a postgres desde
Conexión a postgres desdejbersosa
 
Servlets y jsp
Servlets y jspServlets y jsp
Servlets y jspdtbadboy0
 
Jsp servlet- Tutorial BD Conexión
Jsp servlet- Tutorial BD ConexiónJsp servlet- Tutorial BD Conexión
Jsp servlet- Tutorial BD ConexiónPattzy Montero
 
Conectar java con una base de datos
Conectar java con una base de datosConectar java con una base de datos
Conectar java con una base de datosjbersosa
 
Manual de la conexión de php con sqlserver 2012
Manual de la conexión de php con sqlserver 2012Manual de la conexión de php con sqlserver 2012
Manual de la conexión de php con sqlserver 2012Gustavo Inocente Chacón
 
Integrando React.js en aplicaciones Symfony (deSymfony 2016)
Integrando React.js en aplicaciones Symfony (deSymfony 2016)Integrando React.js en aplicaciones Symfony (deSymfony 2016)
Integrando React.js en aplicaciones Symfony (deSymfony 2016)Ignacio Martín
 
Django: el framework web definitivo
Django: el framework web definitivoDjango: el framework web definitivo
Django: el framework web definitivoAnder Beaskoetxea
 
Ser vlet conectar con base de datos
Ser vlet conectar con base de datosSer vlet conectar con base de datos
Ser vlet conectar con base de datosDavid
 
Toturial aplicacion base de datos jsp
Toturial aplicacion base de datos jspToturial aplicacion base de datos jsp
Toturial aplicacion base de datos jspGabriela Vazquez
 
Comunicacion entre formularios HTML y paginas JSP
Comunicacion entre formularios HTML y paginas JSPComunicacion entre formularios HTML y paginas JSP
Comunicacion entre formularios HTML y paginas JSPDanii Rodriguez
 

Mais procurados (20)

Find File Servlet DB
Find File Servlet DBFind File Servlet DB
Find File Servlet DB
 
Servlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTMLServlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTML
 
Práctica Completa en Flash – ActionScript
Práctica Completa en Flash – ActionScriptPráctica Completa en Flash – ActionScript
Práctica Completa en Flash – ActionScript
 
Conexión a postgres desde
Conexión a postgres desdeConexión a postgres desde
Conexión a postgres desde
 
Servlets y jsp
Servlets y jspServlets y jsp
Servlets y jsp
 
Jsp servlet- Tutorial BD Conexión
Jsp servlet- Tutorial BD ConexiónJsp servlet- Tutorial BD Conexión
Jsp servlet- Tutorial BD Conexión
 
Conectar java con una base de datos
Conectar java con una base de datosConectar java con una base de datos
Conectar java con una base de datos
 
Manual de la conexión de php con sqlserver 2012
Manual de la conexión de php con sqlserver 2012Manual de la conexión de php con sqlserver 2012
Manual de la conexión de php con sqlserver 2012
 
Integrando React.js en aplicaciones Symfony (deSymfony 2016)
Integrando React.js en aplicaciones Symfony (deSymfony 2016)Integrando React.js en aplicaciones Symfony (deSymfony 2016)
Integrando React.js en aplicaciones Symfony (deSymfony 2016)
 
Funciones
FuncionesFunciones
Funciones
 
Curso Jsp
Curso JspCurso Jsp
Curso Jsp
 
Django: el framework web definitivo
Django: el framework web definitivoDjango: el framework web definitivo
Django: el framework web definitivo
 
JSP
JSPJSP
JSP
 
Java web Lección 04 - JSTL
Java web Lección 04 - JSTLJava web Lección 04 - JSTL
Java web Lección 04 - JSTL
 
Conexión entre php y sql server
Conexión entre php y sql serverConexión entre php y sql server
Conexión entre php y sql server
 
Tutorial jsp
Tutorial jspTutorial jsp
Tutorial jsp
 
Java Web Lección 02 - JSP
Java Web Lección 02 - JSPJava Web Lección 02 - JSP
Java Web Lección 02 - JSP
 
Ser vlet conectar con base de datos
Ser vlet conectar con base de datosSer vlet conectar con base de datos
Ser vlet conectar con base de datos
 
Toturial aplicacion base de datos jsp
Toturial aplicacion base de datos jspToturial aplicacion base de datos jsp
Toturial aplicacion base de datos jsp
 
Comunicacion entre formularios HTML y paginas JSP
Comunicacion entre formularios HTML y paginas JSPComunicacion entre formularios HTML y paginas JSP
Comunicacion entre formularios HTML y paginas JSP
 

Destaque

Escenarios
EscenariosEscenarios
Escenariosjubacalo
 
Matrices02
Matrices02Matrices02
Matrices02jubacalo
 
Tabla de Datos
Tabla de DatosTabla de Datos
Tabla de Datosjubacalo
 
Tabla Dinámica
Tabla DinámicaTabla Dinámica
Tabla Dinámicajubacalo
 
Sincronizar Threads
Sincronizar ThreadsSincronizar Threads
Sincronizar Threadsjubacalo
 
Java::Acceso a Bases de Datos
Java::Acceso a Bases de DatosJava::Acceso a Bases de Datos
Java::Acceso a Bases de Datosjubacalo
 
Textura de agua
Textura de aguaTextura de agua
Textura de aguajubacalo
 
Funciones lógicas y condicionales
Funciones lógicas y condicionalesFunciones lógicas y condicionales
Funciones lógicas y condicionalesjubacalo
 
Crear Base de Datos en Oracle
Crear Base de Datos en OracleCrear Base de Datos en Oracle
Crear Base de Datos en Oraclejubacalo
 
Escenarios computacion 1_a_1
Escenarios computacion 1_a_1Escenarios computacion 1_a_1
Escenarios computacion 1_a_1nat_18
 
Ejercicio excel
Ejercicio excelEjercicio excel
Ejercicio excelLuz Marina
 
EJERCICIOS DE EXCEL
EJERCICIOS DE EXCEL EJERCICIOS DE EXCEL
EJERCICIOS DE EXCEL talozumba
 

Destaque (20)

Escenarios
EscenariosEscenarios
Escenarios
 
Gráficos
GráficosGráficos
Gráficos
 
Matrices02
Matrices02Matrices02
Matrices02
 
Solver
SolverSolver
Solver
 
Tabla de Datos
Tabla de DatosTabla de Datos
Tabla de Datos
 
Tabla Dinámica
Tabla DinámicaTabla Dinámica
Tabla Dinámica
 
Word VBA
Word VBAWord VBA
Word VBA
 
Sincronizar Threads
Sincronizar ThreadsSincronizar Threads
Sincronizar Threads
 
Java::Acceso a Bases de Datos
Java::Acceso a Bases de DatosJava::Acceso a Bases de Datos
Java::Acceso a Bases de Datos
 
Textura de agua
Textura de aguaTextura de agua
Textura de agua
 
Funciones lógicas y condicionales
Funciones lógicas y condicionalesFunciones lógicas y condicionales
Funciones lógicas y condicionales
 
Crear Base de Datos en Oracle
Crear Base de Datos en OracleCrear Base de Datos en Oracle
Crear Base de Datos en Oracle
 
Escenarios computacion 1_a_1
Escenarios computacion 1_a_1Escenarios computacion 1_a_1
Escenarios computacion 1_a_1
 
Excel avanzado
Excel avanzadoExcel avanzado
Excel avanzado
 
Cambios excel
Cambios excelCambios excel
Cambios excel
 
Ejercicio excel
Ejercicio excelEjercicio excel
Ejercicio excel
 
Ejercicios escenarios modi
Ejercicios escenarios modiEjercicios escenarios modi
Ejercicios escenarios modi
 
EJERCICIOS DE EXCEL
EJERCICIOS DE EXCEL EJERCICIOS DE EXCEL
EJERCICIOS DE EXCEL
 
EXCEL - FILTROS AVANZADOS
EXCEL - FILTROS AVANZADOSEXCEL - FILTROS AVANZADOS
EXCEL - FILTROS AVANZADOS
 
Escenarios
EscenariosEscenarios
Escenarios
 

Semelhante a Web de noticias en Ajax

Semelhante a Web de noticias en Ajax (20)

ASP.NET MVC - AJAX
ASP.NET MVC - AJAXASP.NET MVC - AJAX
ASP.NET MVC - AJAX
 
Clase 5 AJAX - Desarrollo de aplicaciones móviles
Clase 5  AJAX - Desarrollo de aplicaciones móvilesClase 5  AJAX - Desarrollo de aplicaciones móviles
Clase 5 AJAX - Desarrollo de aplicaciones móviles
 
De HTML a Express
De HTML a ExpressDe HTML a Express
De HTML a Express
 
Seminario jquery, html5 y wicket
Seminario jquery, html5 y wicketSeminario jquery, html5 y wicket
Seminario jquery, html5 y wicket
 
Unidad 3 AJAX
Unidad 3 AJAX Unidad 3 AJAX
Unidad 3 AJAX
 
Unidad3ajax
Unidad3ajaxUnidad3ajax
Unidad3ajax
 
Ajax
AjaxAjax
Ajax
 
Guía Practica conexión BD 2021
Guía Practica conexión BD  2021Guía Practica conexión BD  2021
Guía Practica conexión BD 2021
 
myprofly
myproflymyprofly
myprofly
 
Mi app-asp-net-mvc2
Mi app-asp-net-mvc2Mi app-asp-net-mvc2
Mi app-asp-net-mvc2
 
Esctructura basica-pagina-asp
Esctructura basica-pagina-aspEsctructura basica-pagina-asp
Esctructura basica-pagina-asp
 
Ajax
AjaxAjax
Ajax
 
JqueryMobile
JqueryMobile JqueryMobile
JqueryMobile
 
Php07 consultas bd
Php07 consultas bdPhp07 consultas bd
Php07 consultas bd
 
Presentacion ajax
Presentacion   ajaxPresentacion   ajax
Presentacion ajax
 
Introducción al desarrollo Web: Frontend con Angular 6
Introducción al desarrollo Web: Frontend con Angular 6Introducción al desarrollo Web: Frontend con Angular 6
Introducción al desarrollo Web: Frontend con Angular 6
 
Vb aspx sitio
Vb aspx sitioVb aspx sitio
Vb aspx sitio
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
[Ae3.1] – exposiciones ajax
[Ae3.1] – exposiciones ajax[Ae3.1] – exposiciones ajax
[Ae3.1] – exposiciones ajax
 

Mais de jubacalo

jQuery Mobile :: Enlaces a páginas internas.
jQuery Mobile :: Enlaces a páginas internas.jQuery Mobile :: Enlaces a páginas internas.
jQuery Mobile :: Enlaces a páginas internas.jubacalo
 
MIT App Inventor2 Pintar en Imagen
MIT App Inventor2 Pintar en ImagenMIT App Inventor2 Pintar en Imagen
MIT App Inventor2 Pintar en Imagenjubacalo
 
Cronómetro con MIT App Inventor 2
Cronómetro con MIT App Inventor 2Cronómetro con MIT App Inventor 2
Cronómetro con MIT App Inventor 2jubacalo
 
Configurar entorno Android
Configurar entorno AndroidConfigurar entorno Android
Configurar entorno Androidjubacalo
 
Proyecto JSP
Proyecto JSPProyecto JSP
Proyecto JSPjubacalo
 
Java Thread Cronometro
Java Thread CronometroJava Thread Cronometro
Java Thread Cronometrojubacalo
 
Java Thread Cronometro
Java Thread CronometroJava Thread Cronometro
Java Thread Cronometrojubacalo
 
Java AWT Tres en Raya
Java AWT Tres en RayaJava AWT Tres en Raya
Java AWT Tres en Rayajubacalo
 

Mais de jubacalo (8)

jQuery Mobile :: Enlaces a páginas internas.
jQuery Mobile :: Enlaces a páginas internas.jQuery Mobile :: Enlaces a páginas internas.
jQuery Mobile :: Enlaces a páginas internas.
 
MIT App Inventor2 Pintar en Imagen
MIT App Inventor2 Pintar en ImagenMIT App Inventor2 Pintar en Imagen
MIT App Inventor2 Pintar en Imagen
 
Cronómetro con MIT App Inventor 2
Cronómetro con MIT App Inventor 2Cronómetro con MIT App Inventor 2
Cronómetro con MIT App Inventor 2
 
Configurar entorno Android
Configurar entorno AndroidConfigurar entorno Android
Configurar entorno Android
 
Proyecto JSP
Proyecto JSPProyecto JSP
Proyecto JSP
 
Java Thread Cronometro
Java Thread CronometroJava Thread Cronometro
Java Thread Cronometro
 
Java Thread Cronometro
Java Thread CronometroJava Thread Cronometro
Java Thread Cronometro
 
Java AWT Tres en Raya
Java AWT Tres en RayaJava AWT Tres en Raya
Java AWT Tres en Raya
 

Último

Programación Anual 2024 - CIENCIAS SOCIALES.docx
Programación Anual 2024  - CIENCIAS SOCIALES.docxProgramación Anual 2024  - CIENCIAS SOCIALES.docx
Programación Anual 2024 - CIENCIAS SOCIALES.docxJhordanBenitesSanche1
 
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAPROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAJoaqunSolrzano
 
FICHA DE TRABAJO OLAS DE CALOR DENGUE.pdf
FICHA DE TRABAJO OLAS DE CALOR DENGUE.pdfFICHA DE TRABAJO OLAS DE CALOR DENGUE.pdf
FICHA DE TRABAJO OLAS DE CALOR DENGUE.pdfRafael Moreno Yupanqui
 
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdfRecursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdfNELLYKATTY
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Tecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxTecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxJulioSantin2
 
CARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCarolVigo1
 
Anuncio de Remitido Colegio SEK a la comunidad pública
Anuncio de Remitido Colegio SEK a la comunidad públicaAnuncio de Remitido Colegio SEK a la comunidad pública
Anuncio de Remitido Colegio SEK a la comunidad públicaIvannaMaciasAlvarez
 
Tecnologia- El computador funciones etc...
Tecnologia- El computador funciones etc...Tecnologia- El computador funciones etc...
Tecnologia- El computador funciones etc...SamuelGampley
 
GUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdf
GUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdfGUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdf
GUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdfNELLYKATTY
 
PPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptxPPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptxKarenSepulveda23
 
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdfceeabarcia
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCEIP TIERRA DE PINARES
 
plan espacios inspiradores para nivel primaria
plan espacios inspiradores para nivel primariaplan espacios inspiradores para nivel primaria
plan espacios inspiradores para nivel primariaElizabeth252489
 
Herbert James Drape. Erotismo y sensualidad.pptx
Herbert James Drape. Erotismo y sensualidad.pptxHerbert James Drape. Erotismo y sensualidad.pptx
Herbert James Drape. Erotismo y sensualidad.pptxArs Erótica
 
Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023Ivie
 
U2_EA1_descargable TIC 2 SEM VIR PRE.pdf
U2_EA1_descargable TIC 2 SEM VIR PRE.pdfU2_EA1_descargable TIC 2 SEM VIR PRE.pdf
U2_EA1_descargable TIC 2 SEM VIR PRE.pdfJavier Correa
 

Último (20)

Programación Anual 2024 - CIENCIAS SOCIALES.docx
Programación Anual 2024  - CIENCIAS SOCIALES.docxProgramación Anual 2024  - CIENCIAS SOCIALES.docx
Programación Anual 2024 - CIENCIAS SOCIALES.docx
 
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAPROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
 
Sesión de clase ES: Adoración sin fin...
Sesión de clase ES: Adoración sin fin...Sesión de clase ES: Adoración sin fin...
Sesión de clase ES: Adoración sin fin...
 
FICHA DE TRABAJO OLAS DE CALOR DENGUE.pdf
FICHA DE TRABAJO OLAS DE CALOR DENGUE.pdfFICHA DE TRABAJO OLAS DE CALOR DENGUE.pdf
FICHA DE TRABAJO OLAS DE CALOR DENGUE.pdf
 
Power Point E. Sab: Adoración sin fin...
Power Point E. Sab: Adoración sin fin...Power Point E. Sab: Adoración sin fin...
Power Point E. Sab: Adoración sin fin...
 
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdfRecursos Tecnológicos, página  AIP-CRT 2 0 2 4.pdf
Recursos Tecnológicos, página AIP-CRT 2 0 2 4.pdf
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
 
Tecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptxTecnología educativa en la era actual .pptx
Tecnología educativa en la era actual .pptx
 
CARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacionCARPETA PEDAGÓGICA 2024.docx para educacion
CARPETA PEDAGÓGICA 2024.docx para educacion
 
Anuncio de Remitido Colegio SEK a la comunidad pública
Anuncio de Remitido Colegio SEK a la comunidad públicaAnuncio de Remitido Colegio SEK a la comunidad pública
Anuncio de Remitido Colegio SEK a la comunidad pública
 
Tecnologia- El computador funciones etc...
Tecnologia- El computador funciones etc...Tecnologia- El computador funciones etc...
Tecnologia- El computador funciones etc...
 
GUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdf
GUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdfGUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdf
GUÍA SIANET - Agenda - Tareas - Archivos - Participaciones - Notas.pdf
 
PPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptxPPT Protocolo de desregulación emocional.pptx
PPT Protocolo de desregulación emocional.pptx
 
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
 
APARATO EXCRETOR EN ANIMALES BIOLOGÍA BAC
APARATO EXCRETOR EN ANIMALES BIOLOGÍA BACAPARATO EXCRETOR EN ANIMALES BIOLOGÍA BAC
APARATO EXCRETOR EN ANIMALES BIOLOGÍA BAC
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
 
plan espacios inspiradores para nivel primaria
plan espacios inspiradores para nivel primariaplan espacios inspiradores para nivel primaria
plan espacios inspiradores para nivel primaria
 
Herbert James Drape. Erotismo y sensualidad.pptx
Herbert James Drape. Erotismo y sensualidad.pptxHerbert James Drape. Erotismo y sensualidad.pptx
Herbert James Drape. Erotismo y sensualidad.pptx
 
Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023
 
U2_EA1_descargable TIC 2 SEM VIR PRE.pdf
U2_EA1_descargable TIC 2 SEM VIR PRE.pdfU2_EA1_descargable TIC 2 SEM VIR PRE.pdf
U2_EA1_descargable TIC 2 SEM VIR PRE.pdf
 

Web de noticias en Ajax

  • 1. 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.
  • 2. 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.
  • 3. 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
  • 4. 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>&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 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><!-- 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.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 }
  • 5. 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 }
  • 6. 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