[AJAX] Form xml recherche

Version imprimable

24/06/2008, 09h40
Go_Ahead

[AJAX] Form xml recherche

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.
24/06/2008, 09h48
E.Bzz

Bonjour,

Citation:

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.

Citation:

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+
24/06/2008, 10h17
Go_Ahead

Citation:

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, ...).
24/06/2008, 10h22
E.Bzz

Citation:

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 :roll:

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+

Citation:

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:

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>

24/06/2008, 10h55
E.Bzz

Citation:

Envoyé par DoubleU

Citation:

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+
24/06/2008, 20h03
Bovino

Citation:

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' :

Citation:

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...

Citation:

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 ! :king:
25/06/2008, 08h24
Go_Ahead

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...
25/06/2008, 09h33
E.Bzz

@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:

tatillon : absolute;

:mouarf:

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

A+
25/06/2008, 12h16
Go_Ahead

Citation:

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...
25/06/2008, 12h22
E.Bzz

Citation:

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 ...
25/06/2008, 12h23
Bovino

Citation:

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

Citation:

Envoyé par E.Bzz

Qu'est-ce qui ne va pas ?
25/06/2008, 14h05
Go_Ahead

Citation:

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 :

Citation:

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.
25/06/2008, 14h12
DoubleU

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.
25/06/2008, 14h17
Bovino

Si l'erreur est d'afficher [Object] dans un alert, la solution est simple, ne demande pas d'afficher un alert sur un objet !
:yaisse2:
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.
25/06/2008, 14h26
Go_Ahead

Tout d'abord merci pour vos réponses.

Citation:

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.

Voici ce que j'ai :
bdd.xml

Code:

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:

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:

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.

02/07/2008, 13h14
Bovino

Ben... fais un tableau et insère tes résultats dedans...:koi:
Où as-tu un problème ?
02/07/2008, 13h36
Go_Ahead

Citation:

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:

document.forms[0]...

par

Code:

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.
02/07/2008, 13h50
Bovino

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:

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...:mouarf:), ensuite, récupérer la valeur du noeud est plutôt simple (nodeValue).
Documente toi sur le DOM.
02/07/2008, 13h52
E.Bzz

Citation:

Envoyé par Bovino

Documente toi sur le DOM.

Dans la FAQ Javascript, par exemple ;)

A+
02/07/2008, 14h03
Go_Ahead

Code:

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...),

Pour ce qui est du navigateur, pour l'instant je me fixe sur IE...

Code:

ensuite, récupérer la valeur du noeud est plutôt simple (nodeValue).

moi ce qui m'interesse c'est de faire un event OnChange sur un select qui lancera une fonction javascript qui ecrit un table avec tous les elements se rapportant à la value du select...
02/07/2008, 14h09
E.Bzz

Citation:

Envoyé par Go_Ahead

Pour ce qui est du navigateur, pour l'instant je me fixe sur IE...

Le "pour l'instant" est inquiétant : si à terme tu dois rendre ta page compatible, traite le problème dès le départ ...

Dans tous les cas, cf. ci-dessus ...

A+

Code:

1
2
3
Le "pour l'instant" est inquiétant : si à terme tu dois rendre ta page compatible, traite le problème dès le départ ...
 
Dans tous les cas, cf. ci-dessus ...

ce que je veux dire c'est qu'on utilise tous IE.