[AJAX] Afficher un fichier XML

**benjamin_malaussene** · 04/06/2015, 12h23

Bonjour, je voudrais afficher un fichier xml en local, il s'agit d'un fichier RSS que j'ai enregistré en local. Je voudrais ensuite le parcourir et afficher les éléments contenus dans les balises <title> par ordre chronologique inverse. JSLint ne m'aide pas beaucoup, pour l'instant je voudrais juste afficher dans la console le fichier XML mais ça ne marche pas, et ensuite comment faut-il faire pour le parser ensuite ?

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Lecteur de podcast</title>
	</head>
	<body>
		<form id="formulaire">
			<label>Veuillez saisir l'URL du podcast :
				<input id="champ" type="text">
			</label>
			<button onclick="fichier()" type="submit" id="bouton">Valider</button>
		</form>
	<script rel="text/javascript" src="index.js"></script>
	</body>
</html>

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
fichier(){
	var URL = document.getElementById("champ");
	var req = new XMLHttpRequest();
	req.open(URL);
	req.onreadystatechange = function() {
		if (req.readyState === 4) {
			if (req.status === 200) {
				handleSuccess(req.responseXML);
			} else {
				handleError(req);
			}
		}
	};
	req.send();
}
function handleSuccess(texteXML){
	console.log(texteXML);
}
function handleError(req){
	console.log(req);
}

**Bovino** · 04/06/2015, 14h31

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var URL = document.getElementById("champ");

Ca, ça va te donner l'objet JavaScript qui correspond à la balise <input />, j'ai quelques doutes quant au fait que ce soit une URL valide.

**benjamin_malaussene** · 04/06/2015, 15h47

J'ai changé le code et j'ai ajouté "GET" dans req.open mais là j'ai le message :
"ReferenceError: fichier is not defined" :/

**Bovino** · 04/06/2015, 15h50

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function fichier(){
	var URL = document.getElementById("champ");
	console.log(URL);
}

Peut-être que comme ça, tu comprendras mieux ce que je te dis...

**benjamin_malaussene** · 05/06/2015, 14h43

J'ai modifié mon code et je voudrais essayer de récupérer un podcast(celui de radiofrance en l'occurence). J'essaye d'utiliser cors anywhere (mais je comprends pas bien comment ça marche). J'obtiens ce message d'erreur dans ma console :

"Une demande multi-origines (Cross-Origin Request) a été bloquée : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://cors-anywhere.herokuapp.com/r.../rss_11591.xml. Ceci peut être corrigé en déplaçant la ressource sur le même domaine ou en activant CORS."

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Lecteur de podcast</title>
	</head>
	<body>
		<form id="formulaire">
			<label>Veuillez saisir l'URL du podcast :
				<input id="champ" type="text">
			</label>
			<button onclick="fichier()" id="bouton">Valider</button>
		</form>
	<script rel="text/javascript" src="index.js"></script>
	</body>
</html>

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
function fichier(){
	//url = document.getElementById("champ").value;
	url = "radiofrance-podcast.net/podcast09/rss_11591.xml";
	proxy = "http://cors-anywhere.herokuapp.com";
	console.log(proxy+"/"+url);
	var req = new XMLHttpRequest();
	req.open("GET", proxy+"/"+url, true);
	req.setRequestHeader('Origin', 'http://liris.cnrs.fr');
	console.log(req);
	req.onreadystatechange = function() {
		console.log(req);
		if (req.readyState === 4) {
			if (req.status === 200) {
				handleSuccess(req.responseXML);
			} else {
				handleError(req);
			}
		}
	};
	console.log("hihi");
	req.send();
	console.log("haha");
}
function handleSuccess(texteXML){
	console.log(texteXML);
}
function handleError(req){
	console.log(req);
}

**Bovino** · 05/06/2015, 15h03

mais je comprends pas bien comment ça marche

Oui, manifestement...

Passer par ce service ne va pas activer les autorisations cross-request sur le serveur tiers comme par magie, il permet juste d'interroger un serveur n'importe quel serveur ayant déjà les directives cross-request activée. Ce n'est pas le cas de celui que tu tentes d'interroger, donc inutile de persister, ça ne pourra pas marcher en JavaScript.

[AJAX] Afficher un fichier XML

AJAX

Discussions similaires

Partager

Partager