Bonjour j'essaye de faire un lecteur de podcasts et je voudrais afficher une documentation. La documentation est dans un fichier html très simple :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
<html>
<h1>Documentation :</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor turpis, interdum molestie consequat viverra, semper vel ex. Donec maximus non velit nec sollicitudin. Integer et commodo mi. Praesent diam augue, congue non ullamcorper quis, ornare vel tortor. Donec rhoncus at mauris sit amet placerat. Proin rhoncus felis nec felis auctor, porttitor pellentesque ligula venenatis. Nullam molestie imperdiet mi vel congue. Maecenas egestas commodo ligula quis feugiat. Fusce sit amet suscipit risus. Nulla commodo purus tempor elit porttitor cursus. Integer placerat fringilla accumsan.</p>
<p>Nunc posuere viverra facilisis. Pellentesque ac nisi eget metus lacinia varius. Pellentesque a consectetur augue, non condimentum libero. Duis vestibulum magna ut risus vestibulum, at blandit elit dignissim. Pellentesque eu nibh at ligula venenatis facilisis. Suspendisse facilisis mauris ut tellus consequat finibus. Quisque mattis dolor magna, sit amet facilisis ligula tincidunt quis. Donec lacinia sem non condimentum malesuada.</p>
</html>

Voici le code de mon fichier javascript :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
items = null;
function documentationLoad() {
	var req = new XMLHttpRequest();
	req.open("GET", "Documentation.html");
	req.onreadystatechange = function() {
		if (req.readyState === 4) {
			if (req.status === 200) {
				xmlDoc=req.responseXML;
				x=xmlDoc.getElementsByTagName("h1");
				txt=x[0].nodeValue;
				document.getElementById("documentation").innerHTML=txt;
			} else {
				handleError(req);
			}
		}
	};
	req.send();
}
/*Cette fonction est appelée lors du clic sur le bouton Valider. Elle récupère l'URL saisie et la tronque
car pour utiliser le podcast on passe par un proxy afin de contourner les règles du SOP. Ce proxy ajoute ensuite
des en-têtes CORS qui demandent l'autorisation au serveur d'envoyer des requêtes en Get. En l'occurence, l'adresse de la requête sera l'adresse du proxy
suivie de l'adresse du site hébergeant le podcast, comme par exemple https://cors-anywhere.herokuapp.com.
La fonction modifie l'adresse de la page en ajoutant en GET podcasturl=url_du_podcast#0. En effet par défaut on lira le premier podcast */
function validatePodcastSelection(){
	url = document.getElementById("inputurl").value;
	url = url.replace("http://", "");
	url = url.replace("www.", "");
	window.location = "index.html?podcasturl=" + url + "#0";
}
function loadPodcastXML(url){
	var podcasturl = document.getElementById("podcasturl");
	podcasturl.textContent = "URL du podcast : " + url;
	//url = "radiofrance-podcast.net/podcast09/rss_11591.xml";
	//http://cdn3-europe1.new2.ladmedia.fr/var/exports/podcasts/sound/le-grand-direct.xml
	//http://rss.allocine.fr/fauxraccord/ipod
	proxy = "http://cors-anywhere.herokuapp.com";
	var req = new XMLHttpRequest();
	req.open("GET", proxy+"/"+url, true);
	req.setRequestHeader('Origin', 'http://liris.cnrs.fr');
	req.onreadystatechange = function() {	
		console.log(req);
		if (req.readyState === 4) {
			if (req.status === 200) {
				handleLoadSuccess(req);
			} else {
				handleLoadError(req);
			}
		}
	};
	req.send();
}
function handleLoadSuccess(req){
	var objetXML = req.responseXML;	
	var channel = objetXML.getElementsByTagName("channel");
	items = channel[0].getElementsByTagName("item");
	var table = document.getElementById("entries");
	var tableHTML = "";
	for (var i=0; i<items.length; i++){
		var item = items[i];
		var title = item.getElementsByTagName("title")[0].textContent;
		var link = "<a href=#" + i + ">" + title + "</a>";
		tableHTML += "<tr><td>" + link + "</td></tr>";
	}
	table.innerHTML = tableHTML;
	window.addEventListener("hashchange",locationHashChanged, false);
	locationHashChanged();
}
function handleLoadError(req){
	console.log(req);
}
function locationHashChanged(){
	var index = location.hash !== '' ? location.hash.substr(1) : 0;
	playItem(index);
}
function playItem(index){
	if (items!=null && index<items.length){
		var playeraudio = document.getElementById("playeraudio");
		var playervideo = document.getElementById("playervideo");
		playeraudio.pause();
		playervideo.pause();
		var item = items[index];
		var itemtitle = document.getElementById("itemtitle");
		itemtitle.innerHTML = "Titre du média en cours : " + item.getElementsByTagName("title")[0].textContent;
		//TODO: date, description etc
		var enclosure = item.getElementsByTagName("enclosure")[0];
		var type = enclosure.getAttribute("type");
		if (type.search("audio") != -1){
			playeraudio.style.display = "block"; 
			playervideo.style.display = "none"; 
			playeraudio.src = enclosure.getAttribute("url");
			playeraudio.play();
		}
		else{
			playeraudio.style.display = "none"; 
			playervideo.style.display = "block";
			playervideo.src = enclosure.getAttribute("url");
			playervideo.play();
		}
	}
}
function loadPodcastXMLFromWindowLocation(){
	if (location.search) {
		var parameter = "podcasturl=";
		var index = location.search.search(parameter);
		if (index != -1){
			var url = location.search.substring(index + parameter.length);
			var inputURL = document.getElementById("inputurl");
			inputURL.value = url;
			loadPodcastXML(url);
		}
	}
}
window.addEventListener("load", function(){
	document.getElementById("podcastButton").addEventListener("click", validatePodcastSelection);
	document.getElementById("documentationButton").addEventListener("click", documentationLoad);
	loadPodcastXMLFromWindowLocation();
});
Voici le contenu de mon fichier html :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Lecteur de podcast</title>
	</head>
	<body>
		<label>Veuillez saisir l'URL du podcast à écouter/voir :
			<input id="inputurl" type="text">
		</label>
		<button id="podcastButton">Valider</button>
		<button id="documentationButton">Lire la documentation</button>
		<div id="documentation" style='display:inline-block'></div>
		<br>
		<br>
		<div id="podcasturl"></div>
		<div id="itemtitle"></div>
		<br>
		<audio controls id="playeraudio" style='display:none'>
			Your browser does not support the audio element.
		</audio>
		<video controls id="playervideo" style='display:none'>
			Your browser does not support the video element.
		</video>
		<table id="entries" border="1"></table>
		<script rel="text/javascript" src="podcast.js"></script>
	</body>
</html>

Le problème se situe au niveau de la fonction documentationLoad. Lorsque j'affiche la documentation avec req.responseText ça marche mais quand je veux l'afficher avec req.responseXML ça ne marche pas, pouvez-vous m'aider ?