[AJAX] Form xml recherche

**Go_Ahead** · 24/06/2008, 09h40

Salut à tous,

Je souhaiterais faire un formulaire de recherche avec Ajax sur des données provenant d'un fichier xml. Est ce possible ? y a t il des scripts dispo ou des tuto ?

Merci pour votre aide.

**E.Bzz** · 24/06/2008, 09h48

Bonjour,

Envoyé par Go_Ahead

Je souhaiterais faire un formulaire de recherche avec Ajax sur des données provenant d'un fichier xml. Est ce possible ?

Oui.

Envoyé par Go_Ahead

y a t il des scripts dispo ou des tuto ?

Bien sûr : juste au-dessus des discussions de ce forum

A+

**Go_Ahead** · 24/06/2008, 10h17

Bien sûr : juste au-dessus des discussions de ce forum

Merci pour ce link, mais mon souhait c'est de pouvoir parser un fichier xml, avec Javascript ou Ajax et ne pas passer par un langage serveur (php, ...).

**E.Bzz** · 24/06/2008, 10h22

Envoyé par Go_Ahead

Merci pour ce link, mais mon souhait c'est de pouvoir parser un fichier xml, avec Javascript ou Ajax et ne pas passer par un langage serveur (php, ...).

Oui, j'ai bien compris

Tu n'a pas besoin de langage serveur pour Ajax (ni même de serveur d'ailleurs : ça peut être un fichier local).

Les tutos te montrent comment faire l'appel au fichier, puis en traiter la réponse.

Et puis, ce n'est pas "Javascript ou Ajax", mais plutôt "Ajax donc Javascript"

A+

**DoubleU** · 24/06/2008, 10h51

Et puis, ce n'est pas "Javascript ou Ajax", mais plutôt "Ajax donc Javascript"

T'es pas obligé d'utiliser Ajax pour parser un fichier xml.

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
<html>
<body>
<script type="text/javascript">
var doc = null;
 
if (window.ActiveXObject)
	doc = new ActiveXObject("Microsoft.XMLDOM");
else
	doc = document.implementation.createDocument("","",null);
 
doc.async=false;
doc.load("file.xml");
 
var root = doc.documentElement;
alert(root);
</script>
</body>

**E.Bzz** · 24/06/2008, 10h55

Envoyé par DoubleU

Et puis, ce n'est pas "Javascript ou Ajax", mais plutôt "Ajax donc Javascript"

T'es pas obligé d'utiliser Ajax pour parser un fichier xml.

Ce n'était qu'une remarque sur le vocabulaire (confusion récurrente) et non sur la méthode

A+

**Bovino** · 24/06/2008, 20h03

Envoyé par E.Bzz

Tu n'a pas besoin de langage serveur pour Ajax (ni même de serveur d'ailleurs : ça peut être un fichier local).

Désolé de faire mon tatillon, mais je ne suis pas tout à fait d'accord avec ça...
Certes, il est possible de récupérer des fichiers en local en utilisant le modèle de requête Ajax, sauf que ce n'est ici qu'une utilisation impropre de l'objet XMLHttpRequest.
Pour faire cela, tu ne peux plus passer par un protocole http qui est pourtant l'essence même de XMLHttpRequest ! De plus, impossible de travailler avec les codes retour (readyState et satus).
Enfin, l'argument 'qui tue' :

The XMLHttpRequest Object specification defines an API that provides scripted client functionality for transferring data between a client and a server.

La source ici, on ne peut plus fiable...
Mais bon, tout cela ne sert qu'à chipoter et n'est que question de point de vue et de terminologie.
En guise de conclusion, tu as malgré tout raison de dire qu'une requête de type Ajax peut récupérer des données en local, mais selon moi, ce n'est plus de l'Ajax...

Envoyé par E.Bzz

Et puis, ce n'est pas "Javascript ou Ajax", mais plutôt "Ajax donc Javascript"

Mille fois d'accord et ça a déjà été dit assez souvent, mais j'ai peur que l'on soit encore obligés de le répéter souvent !

**Go_Ahead** · 25/06/2008, 08h24

DoubleU, merci pour ton début de script.
Le but pour moi est de parser un fichier xml, et de pouvoir faire des recherches dessus, afficher un tableau par exemple etc...

**E.Bzz** · 25/06/2008, 09h33

@Bovino > je simplifie en assimilant Ajax à XMLHttpRequest + Javascript, mais d'accord sur le reste.
Sauf sur l'argument qui tue : il s'agit d'une phrase d'introduction descriptive : ce n'est pas parce qu'un parapluie fournit un moyen efficace de se protéger de la pluie, qu'il ne peut pas être utilisé pour se protéger tout aussi efficacement du soleil

Mais tu peux ajouter dans ta feuille de style :

Code :

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

tatillon : absolute;

@Go_ahead :

C'est bien là-dessus qu'on t'a répondu ...
Qu'est-ce qui ne va pas ?

A+

**Go_Ahead** · 25/06/2008, 12h16

C'est bien là-dessus qu'on t'a répondu ...
Qu'est-ce qui ne va pas ?

Le fait que ça ne fonctionne pas, mais aussi je souhaiterais afficher sous forme de tableau un noeud complet...

**E.Bzz** · 25/06/2008, 12h22

Envoyé par Go_Ahead

Le fait que ça ne fonctionne pas,

Qu'est-ce qui ne fonctionne pas ?
On a pas une ligne de ton code et on ne sait même pas ou tu en es ...

**Bovino** · 25/06/2008, 12h23

Envoyé par Go_Ahead

Le fait que ça ne fonctionne pas, mais aussi je souhaiterais afficher sous forme de tableau un noeud complet...

Montre nous quand même un peu comment tu procèdes... sinon, c'est difficile de t'aider avec comme seule indication : ça ne fonctionne pas !
Donc

Envoyé par E.Bzz

Qu'est-ce qui ne va pas ?

**Go_Ahead** · 25/06/2008, 14h05

Qu'est-ce qui ne va pas ?

Alors je suis parti du code et je me rends compte que j'ai une erreur à cause du :

alert(root);

j'ai cette erreur : [object], il ne reconnait pas l'objet 'root'..
En plus de cela, je souhaiterais mettre en forme le resultat sous forme de tableau et pas en alert...

Merci pour votre aide.

**DoubleU** · 25/06/2008, 14h12

En fait, je t'avais juste mis cette ligne pour illustrer le fait que root contient le noeud racine de ton arbre xml.

Apres, tu peux faire tes traitements (mettre en tableau?) dessus.

**Bovino** · 25/06/2008, 14h17

Si l'erreur est d'afficher [Object] dans un alert, la solution est simple, ne demande pas d'afficher un alert sur un objet !

Désolé, plus sérieusement, ça montre au contraire que ça marche, maintenant, à toi de naviguer dans le xml pour récupérer les données que tu veux.

**Go_Ahead** · 25/06/2008, 14h26

Tout d'abord merci pour vos réponses.

En fait, je t'avais juste mis cette ligne pour illustrer le fait que root contient le noeud racine de ton arbre xml.

Ok je viens de comprendre pour quelles raisons j'ai ce type d'affichage...
Mon fichier xml contient plusieurs noeud, et je souhaiterais faire un outil de recherche assez rapide, et donc avoir en sortie un tableau, après avoir rempli certains champs de recherche.
Je cherchais simplement voir si de tels exemples étaient dispo, pour me faciliter un peu le boulot.

**Go_Ahead** · 26/06/2008, 16h58

Voici ce que j'ai :
bdd.xml

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
<?xml version="1.0" encoding="iso-8859-1" ?> 
<bibliotheque>
 <livre>
  	<nom>Le guet des orfèvres</nom> 
  	<auteur>Terry Pratchett</auteur> 
  	<date>1993</date> 
 </livre>
 <livre>
 	<nom>Nobliaux et sorcières</nom> 
  	<auteur>Terry Pratchett</auteur> 
  	<date>1992</date> 
 </livre>
 <livre>
 	<nom>Mécomptes de fées</nom> 
  	<auteur>Terry Pratchett</auteur> 
  	<date>1991</date> 
 </livre>
</bibliotheque>

fichier .js :

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
function loadXML(){
 
	if (document.implementation && document.implementation.createDocument) {
		// déclaration pour Mozilla et FF
		docXml = document.implementation.createDocument('', '', null);
 
	}
	else if (window.ActiveXObject){
		// déclaration pour IE
		docXml = new ActiveXObject("Microsoft.XMLDOM");
 
	}
	else {
 
		alert('Votre navigateur ne saurait pas éxécuter ce script.');
 
	}
 
	docXml.load("bdd.xml");
 
}
function biblio(num) {
 
	var numero = parseInt(num, 10);
 
	var book = docXml.getElementsByTagName('nom');
	var author = docXml.getElementsByTagName('auteur');
	var parution = docXml.getElementsByTagName('date');
 
	document.forms[0].elements[2].value = book[numero].firstChild.nodeValue;
	document.forms[0].elements[3].value = author[numero].firstChild.nodeValue;
	document.forms[0].elements[4].value = parution[numero].firstChild.nodeValue;
 
}
 
 
window.onload = function() {
 
	document.forms[0].reset();
 
	loadXML();
 
	document.forms[0].elements[1].onclick = function() {
		biblio(document.forms[0].elements[0].value);
	};
};

fichier .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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE" lang="fr-BE">
	<head>
 
		<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />			
 
		<script type="text/javascript" src="Js_script.js"></script>	
	</head>
 
	<body>
		<div id="all-box">
 
			<form action="#">
				<p>
					<label>
						Afficher le 
						<select name="setBook" size="1">
							<option value="0" selected="selected">premier</option>
							<option value="1">deuxieme</option>
							<option value="2">troisieme</option>
						</select>
						 livre de la bibliotheque. 
						 <input type="button" value="valider" />
					 </label>
				</p>
 
 
 
 
				<p>
					Titre: <input type="text" value="" size="30" />
				</p>
 
				<p>
					Auteur: <input type="text" value="" size="20" />
				</p>
 
				<p>
					Annee de parution en langue originale: <input type="text" value="" size="5" />
				</p>
 
			</form>
 
 
 
 
		</div>
	</body>
</html>

Voila, le procédé me plait sauf que j'aimerais modifié l'affichage, la il se fait sur des input, pour moi j'aimerais afficher le resultat de ma recherche dans un tableau.
J'espere avoir l'aide d'un expert en javascript...

Merci à ceux qui pourront m'aider.

**Bovino** · 02/07/2008, 13h14

Ben... fais un tableau et insère tes résultats dedans...

Où as-tu un problème ?

**Go_Ahead** · 02/07/2008, 13h36

Ben... fais un tableau et insère tes résultats dedans...
Où as-tu un problème ?

Le probleme c'est l'automatisation.
Je devrais remplacer dans le .js

Code :

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

document.forms[0]...

par

Code :

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

document.write("<table>")...

dans une boucle de préference...
Et aussi l'autre probleme, c'cest que je souhaiterais faire des recherches sur les valeurs des noeuds et pas sur les id ... mais je ne sais pas comment faire.

**Bovino** · 02/07/2008, 13h50

Bon, déjà, document.write(), c'est pas très joli... Il existe des méthodes plus propres pour créer et insérer des éléments dans une page.
Du style :

Code :

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

document.createElement('table')

et insertRow(), insertCell().
Tu peux facilement créer des boucles avec ces instructions.

Pour ce qui est des valeurs de noeuds, le plus compliqué est d'atteindre le noeud en question (gestion différente selon que tu utilises IE ou un navigateur...

), ensuite, récupérer la valeur du noeud est plutôt simple (nodeValue).
Documente toi sur le DOM.

[AJAX] Form xml recherche

JavaScript

Discussions similaires

Partager

Partager