IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Afficher un fichier XML


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Lycéen
    Inscrit en
    Avril 2014
    Messages
    123
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Avril 2014
    Messages : 123
    Par défaut Afficher un fichier XML
    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 ?

  2. #2
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    Je pense que la réponse à ton problème se trouve ici : https://developer.mozilla.org/fr/doc...st#responseXML
    Si vous chargez un document XML, la propriété responseXML contiendra le document sous la forme d'un objet XmlDocument manipulables en utilisant les méthodes du DOM. Si le serveur transmet un XML bien formé mais sans préciser un entête Content-Type XML, vous pouvez utiliser overrideMimeType() pour forcer le document à être traité comme du XML. Si toutefois le serveur transmet un document XML mal formé, responseXML aura une valeur null quelque soit le remplacement de type mime appliqué.
    Donc déjà, si ton serveur n'envoie pas d'entête Content-Type, tu dois appeler overrideMimeType avant de lancer la requête (avant send mais après open).
    responseXML est assez capricieux : il demande du « vrai » XML. Ça demande que tu mettes, entre autres, une déclaration <?xml ?> au début du fichier. De plus, le type MIME n'est pas le même.

    Dans ton code tu utilises innerHTML après avoir essayer d'interpréter le document comme XML. Pourquoi ne pas sauter l'étape XML et utiliser directement innerHTML ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var $tempDiv = document.createElement("div");
    $tempDiv.innerHML = req.responseText;
    var x = $tempDiv.getElementsByTagName("h1");
    ...
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

Discussions similaires

  1. afficher un fichier xml dans une page jsp
    Par Sun03 dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 05/08/2009, 17h50
  2. Afficher un fichier XML dans un WebBrowser
    Par kronos85 dans le forum VB.NET
    Réponses: 2
    Dernier message: 28/11/2008, 13h43
  3. Afficher partiel fichier XML
    Par devroot dans le forum XML/XSL et SOAP
    Réponses: 2
    Dernier message: 17/06/2008, 17h25
  4. [XSL] Afficher un fichier xml dans un fichier php
    Par Sylvain245 dans le forum Bibliothèques et frameworks
    Réponses: 1
    Dernier message: 22/12/2006, 12h21
  5. [Firefox] Impossible d'afficher un fichier XML distant
    Par jamidoquai dans le forum XML/XSL et SOAP
    Réponses: 1
    Dernier message: 04/12/2006, 13h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo