Código de JavaScript - Leer un archivo RSS desde JavaScript y mostrar su contenido en nuestra Web

Imágen de perfil

Leer un archivo RSS desde JavaScript y mostrar su contenido en nuestra Webgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 06 de Junio del 2016 por Xavi
993 visualizaciones desde el 06 de Junio del 2016. Una media de 42 por semana
Este simple código sirve de ejemplo para mostrar como leer nuestro archivo RSS y mostrarlo en la web desde JavaScript

Versión 1.0
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 09 de Junio del 2016 (Creado el 06 de Junio del 2016)gráfica de visualizaciones de la versión: Versión 1.0
994 visualizaciones desde el 06 de Junio del 2016. Una media de 42 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Hay que tener en cuenta, que el archivo xml tiene que estar en el mismo dominio que el archivo html.

El contenido de nuestro archivo (miCodigo.xml) RSS es:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
	<channel>
		<title>La Web del Programador</title>
		<link>http://www.lawebdelprogramador.com</link>
		<description>Mis códigos en La Web del Programador</description>
		<language>es-es</language>
		<pubDate>Mon, 06 Jun 2016 08:12:16 +0200</pubDate>
		<item>
			<title>habilitar, deshabilitar combos según la selección en otro combo</title>
			<link>http://lwp-l.com/s2470</link>
			<description>Código que muestra como habilitar y deshabilitar un combo (select) según la sección de otro combo.</description>
			<language>es-es</language>
			<pubDate>Mon, 06 Jun 2016 08:12:16 +0200</pubDate>
		</item>
		<item>
			<title>Cuenta atrás</title>
			<link>http://lwp-l.com/s2192</link>
			<description>Código que muestra una cuenta atrás desde un valor dado, permitiendo indicar el número de días si fuera superior a 1.</description>
			<language>es-es</language>
			<pubDate>Mon, 06 Jun 2016 08:12:16 +0200</pubDate>
		</item>
		<item>
			<title>Efecto nieve con JavaScript y CSS</title>
			<link>http://lwp-l.com/s2688</link>
			<description>Código que muestra como con javascript y css podemos hacer el efecto nieve, donde se visualizan copos bajando por la pantalla</description>
			<language>es-es</language>
			<pubDate>Mon, 06 Jun 2016 08:12:16 +0200</pubDate>
		</item>
	</channel>
</rss>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<header>
	<meta charset="utf-8">
	<title>lector de RSS</title>
 
	<style>
	h1, h2 {margin-bottom:0px;}
	.link {font-size:0.8em}
	.desc {}
	</style>
 
	<script>
	function getRSS(param)
	{
		var xmlhttp;
		xmlhttp=new XMLHttpRequest();
 
		// El archivo xml tiene que estar en el mismo servidor que el código javascript.
		// Por temas de seguridad, no se permite acceder desde javascript a archivos
		// alojados en otro servidor
		xmlhttp.open("GET","miCodigo.xml",false); // tambien puedes poner http://localhost/miCodigo.xml
		xmlhttp.send();
		xmlDoc=xmlhttp.responseXML;
 
		var strBuffer= "";
 
		// obtenemos los datos genericos del RSS
		title=xmlDoc.getElementsByTagName("title")[0].innerHTML;
		link=xmlDoc.getElementsByTagName("link")[0].innerHTML;
		desc=xmlDoc.getElementsByTagName("description")[0].innerHTML;
 
		strBuffer=strBuffer+"<h1>"+title+"</h1>";
		strBuffer = strBuffer +"<div class='link'><a href='"+link+"' target='_blank'>"+link+"</a></div>";
		strBuffer = strBuffer +"<div class='desc'>"+desc+"</div><hr>";
 
		// Recorremos todos los <item> del RSS
		var x=xmlDoc.getElementsByTagName("item");
		for (i=0;i<x.length;i++)
		{
			title=x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
			link=x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
			desc=x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue.substring(0,180);
 
			strBuffer = strBuffer +"<h2>"+title+"</h2>";
			strBuffer = strBuffer +"<div class='link'><a href='"+link+"' target='_blank'>"+link+"</a></div>";
			strBuffer = strBuffer +"<div class='desc'>"+desc+"</div>";
			if(i==10){
				break;
			}
		}
		document.getElementById(param).innerHTML =strBuffer;
	}
	</script>
</header>
 
<body onload ="getRSS('contenidoRSS');">
	<div id="contenidoRSS"></div>
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (1)

Imágen de perfil
ScriptShow
06 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
Muy interesante y útil.

Gracias.
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3547