[AJAX] Traitement de données xml en AJAX

**Ervael** · 11/06/2009, 13h57

Bonjour à tous !

Je vous expose mon problème. Je dois récupérer des données d'un fichier xml et les afficher à l'aide de javascript, les afficher dans une div. A titre d'exemple je pense nous limiter au contenu de la balise "arttr_libelle".

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
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
 
<root>
−<art_detail_from_art_code art_code="24601A" tarif_particulier="" tarif_general="HT" current_language="FR">
−<article_detail>
<art_code type="VARCHAR">24601A</art_code>
<art_ancien_code type="VARCHAR"/>
<art_lien_sfa_code type="VARCHAR">AC</art_lien_sfa_code>
<art_lien_fam_code type="VARCHAR">M</art_lien_fam_code>
<art_remplace type="VARCHAR"/>
<art_substitution type="VARCHAR"/>
<art_type type="VARCHAR"/>
<art_colisage type="DOUBLE">1</art_colisage>
<art_sous_colisage type="DOUBLE">0</art_sous_colisage>
<art_code_barre type="VARCHAR">3700414015818</art_code_barre>
<art_suivi type="INT">1</art_suivi>
<art_lien_tai_index type="VARCHAR"/>
<art_lien_gtai_code type="VARCHAR"/>
<art_lien_clr_code type="VARCHAR"/>
<art_d3e_soumis type="TINYINT">0</art_d3e_soumis>
<art_d3e_code type="VARCHAR"/>
<art_racine type="VARCHAR"/>
<art_qte_mini_vente type="DOUBLE">0</art_qte_mini_vente>
<art_qte_arrivage type="INT">0</art_qte_arrivage>
<art_qte_rav type="INT">83</art_qte_rav>
<art_qte_dispo type="INT">83</art_qte_dispo>
<art_lien_fo_code type="VARCHAR">A214</art_lien_fo_code>
<art_d3e_cat type="VARCHAR"/>
<art_ligne_type type="TINYINT">0</art_ligne_type>
<art_origine_lien_pay_code type="VARCHAR">IN</art_origine_lien_pay_code>
<art_tpf_taux type="DOUBLE">0</art_tpf_taux>
<art_tva_taux type="DOUBLE">19.6</art_tva_taux>
<art_catalogue_page type="VARCHAR">031</art_catalogue_page>
<art_dimension_carton type="VARCHAR"/>
<art_volume_carton type="DOUBLE">0</art_volume_carton>
<art_dimension_piece type="VARCHAR"/>
<art_volume_piece type="DOUBLE">0</art_volume_piece>
<art_poids_piece_net type="DOUBLE">2.04</art_poids_piece_net>
<art_poids_carton_brut type="DOUBLE">0</art_poids_carton_brut>
<clr_code type="VARCHAR">null</clr_code>
<clr_pantone type="DOUBLE">null</clr_pantone>
<clr_couleur_web type="VARCHAR">null</clr_couleur_web>
<clr_image type="VARCHAR">null</clr_image>
<clr_ligne_type type="TINYINT">null</clr_ligne_type>
<clrres_lien_clr_code type="VARCHAR">null</clrres_lien_clr_code>
<clrres_lien_lg_code type="VARCHAR">null</clrres_lien_lg_code>
<clrres_index type="VARCHAR">null</clrres_index>
<clrres_libelle type="VARCHAR">null</clrres_libelle>
<clrres_ligne_type type="TINYINT">null</clrres_ligne_type>
<taires_lien_tai_index type="VARCHAR">null</taires_lien_tai_index>
<taires_lien_lg_code type="VARCHAR">null</taires_lien_lg_code>
<taires_index type="VARCHAR">null</taires_index>
<taires_libelle type="VARCHAR">null</taires_libelle>
<taires_ligne_type type="TINYINT">null</taires_ligne_type>
<arttr_index type="VARCHAR">24601A#FR</arttr_index>
<arttr_default type="INT">0</arttr_default>
<arttr_lien_art_code type="VARCHAR">24601A</arttr_lien_art_code>
<arttr_lien_lg_code type="VARCHAR">FR</arttr_lien_lg_code>
<arttr_libelle type="VARCHAR">COFFRE A BIJOUX  DEUX TIROIRS</arttr_libelle>
<arttr_description type="VARCHAR"/>
<arttr_presentation type="VARCHAR"/>
<arttr_inf_comm type="VARCHAR"/>
<arttr_inf_tec type="VARCHAR">Coffret à 2 tiroirs en bois de sesham ciselé. </arttr_inf_tec>
<arttr_dimensions type="VARCHAR">33x15x13.5cm</arttr_dimensions>
<arttr_ordre type="DOUBLE">-1</arttr_ordre>
<arttr_lib_court type="VARCHAR">null</arttr_lib_court>
<arttr_norme_titre type="VARCHAR"/>
<arttr_norme_texte type="VARCHAR"/>
<arttr_part_titre type="VARCHAR"/>
<arttr_part_texte type="VARCHAR"/>
<arttr_part2_titre type="VARCHAR"/>
<arttr_part2_texte type="VARCHAR"/>
<arttr_ct_refass type="VARCHAR"/>
<arttr_ct_matiere type="VARCHAR">null</arttr_ct_matiere>
<arttr_ct_frm_ass type="VARCHAR">null</arttr_ct_frm_ass>
<arttr_ct_dbl type="VARCHAR"/>
<arttr_ct_info type="VARCHAR"/>
<arttr_ct_finition type="VARCHAR"/>
<arttr_ct_acc_int type="VARCHAR"/>
<arttr_ct_bulle type="VARCHAR"/>
<arttr_ct_taille type="VARCHAR"/>
<arttr_ct_partie type="VARCHAR"/>
<arttr_ct_ss_part type="VARCHAR"/>
<arttr_ct_coef_ph type="DOUBLE">0</arttr_ct_coef_ph>
<arttr_ct_coef_sal type="DOUBLE">0</arttr_ct_coef_sal>
<arttr_ct_usage type="VARCHAR"/>
<arttr_ligne_type type="TINYINT">0</arttr_ligne_type>
<arttar_index type="VARCHAR">24601A#HT#1</arttar_index>
<arttar_lien_art_code type="VARCHAR">24601A</arttar_lien_art_code>
<arttar_lien_cat_code type="VARCHAR">HT</arttar_lien_cat_code>
<arttar_qte type="INT">1</arttar_qte>
<arttar_prix type="DOUBLE">46.405</arttar_prix>
<arttar_prix_ht type="DOUBLE">46.405</arttar_prix_ht>
<arttar_montant_tpf type="DOUBLE">0</arttar_montant_tpf>
<arttar_montant_d3e_ttc type="DOUBLE">55.5</arttar_montant_d3e_ttc>
<arttar_montant_tva type="DOUBLE">9.1</arttar_montant_tva>
<arttar_promo_prix_ht type="DOUBLE">0</arttar_promo_prix_ht>
<arttar_promo_montant_tpf type="DOUBLE">0</arttar_promo_montant_tpf>
<arttar_promo_montant_d3e_ttc type="DOUBLE">55.5</arttar_promo_montant_d3e_ttc>
<arttar_promo_montant_tva type="DOUBLE">0</arttar_promo_montant_tva>
<arttar_promo_date_fin type="DATE">null</arttar_promo_date_fin>
<arttar_prix_net type="TINYINT">0</arttar_prix_net>
<arttar_ligne_type type="TINYINT">0</arttar_ligne_type>
<arttar_prix_vente_conseille type="DOUBLE">0</arttar_prix_vente_conseille>
<arttar_prix_vente_public type="DOUBLE">0</arttar_prix_vente_public>
<arttar_prix_ttc type="DOUBLE">111.01</arttar_prix_ttc>
<arttar_promo_prix_ttc type="DOUBLE">0</arttar_promo_prix_ttc>
−<article_prix_liste type="MULTI">
−<article_prix>
<arttar_index type="VARCHAR">24601A#HT#1</arttar_index>
<arttar_lien_art_code type="VARCHAR">24601A</arttar_lien_art_code>
<arttar_lien_cat_code type="VARCHAR">HT</arttar_lien_cat_code>
<arttar_qte type="INT">1</arttar_qte>
<arttar_prix type="DOUBLE">46.405</arttar_prix>
<arttar_prix_ht type="DOUBLE">46.405</arttar_prix_ht>
<arttar_montant_tpf type="DOUBLE">0</arttar_montant_tpf>
<arttar_montant_d3e_ttc type="DOUBLE">55.5</arttar_montant_d3e_ttc>
<arttar_montant_tva type="DOUBLE">9.1</arttar_montant_tva>
<arttar_promo_prix_ht type="DOUBLE">0</arttar_promo_prix_ht>
<arttar_promo_montant_tpf type="DOUBLE">0</arttar_promo_montant_tpf>
<arttar_promo_montant_d3e_ttc type="DOUBLE">55.5</arttar_promo_montant_d3e_ttc>
<arttar_promo_montant_tva type="DOUBLE">0</arttar_promo_montant_tva>
<arttar_promo_date_fin type="DATE">null</arttar_promo_date_fin>
<arttar_prix_net type="TINYINT">0</arttar_prix_net>
<arttar_ligne_type type="TINYINT">0</arttar_ligne_type>
<arttar_prix_vente_conseille type="DOUBLE">0</arttar_prix_vente_conseille>
<arttar_prix_vente_public type="DOUBLE">0</arttar_prix_vente_public>
<arttar_prix_ttc type="DOUBLE">111.01</arttar_prix_ttc>
<arttar_promo_prix_ttc type="DOUBLE">0</arttar_promo_prix_ttc>
</article_prix>
</article_prix_liste>
−<article_image_liste type="MULTI">
−<article_image>
<artimg_libelle type="VARCHAR">24601a.jpg</artimg_libelle>
<artimg_numero_ordre type="INT UNSIGNED">1</artimg_numero_ordre>
</article_image>
−<article_image>
<artimg_libelle type="VARCHAR">24601a.jpg</artimg_libelle>
<artimg_numero_ordre type="INT UNSIGNED">2</artimg_numero_ordre>
</article_image>
−<article_image>
<artimg_libelle type="VARCHAR">24601a.jpg</artimg_libelle>
<artimg_numero_ordre type="INT UNSIGNED">3</artimg_numero_ordre>
</article_image>
−<article_image>
<artimg_libelle type="VARCHAR">24601a.jpg</artimg_libelle>
<artimg_numero_ordre type="INT UNSIGNED">4</artimg_numero_ordre>
</article_image>
</article_image_liste>
</article_detail>
</art_detail_from_art_code>
</root>

Voici le fichier JS que j'ai fait. le script dans son déroulement, fonctionne jusqu'à l'affichage de la photo. C'est à partir de l'affichage des infos qu'il ne marche pas. Non pas à cause d'une erreur syntaxique de codage, mais parce que rien ne se passe à partir de là.

A notre que prototype est utilisé pour ce script.

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
 
function appelXml( artCode ) {
    var adress = getAdresseSite() + "domaine.jsp?Query&queryName=art_detail_from_art_code&art_code=" + artCode
 
    var laRequete = new Ajax.Request(adress,{
        method: 'get',
        parameters: '',
        onComplete: function( requeteReponse ) {
 
             analyseReponse( requeteReponse ) ;
 
             //Affichage de la photo
             document.getElementById("photo_article").innerHTML = "<img src=\"/images/images1/"+artCode+".jpg />";
             alert('test1');
 
             //Affichage des infos
             //var divInfos = document.getElementById('infos_article');
             var infos_article = $('infos_article');
             alert('test2 : '+infos_article);
             var artDesc = data.evaluate(
               '//*[name()="arttr_libelle"]',data,null,
                XPathResult.STRING_TYPE, null).value;
 
                infos_article.update(artDesc);
 
                var desc = document.getElementsByTagName("arttr_libelle");
                infos_article.innerHTML = desc[0];
                alert('test3');
 
        }
    } );
}
 
function showResponse(requete) {
    $('reponse').value = requete.responseText;
}
 
function analyseReponse( requeteReponse ) {
    var reponseXML = requeteReponse.responseXML ;
    //alert(reponseXML);
}

Je vous remercie d'avance pour votre aide.

**Ervael** · 11/06/2009, 15h25

Update de mon fichier js. Je ne sais pas si avec ces modifs je me me dirige vers la bonne voie, vu que je n'affiche toujours pas mes infos, mais peut-être est-ce déjà mieux.

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
 
function appelXml( artCode ) {
    var adress = getAdresseSite() + "domaine.jsp?Query&queryName=art_detail_from_art_code&art_code=" + artCode
 
    var laRequete = new Ajax.Request(adress,{
        method: 'get',
        parameters: '',
        onComplete: function( requeteReponse ) {
 
             analyseReponse( requeteReponse ) ;
 
             //Affichage de la photo
             document.getElementById("photo_article").innerHTML = "<img src=\"/images/images1/"+artCode+".jpg />";
             alert('test1');
 
              var adresse = '/domaine.jsp?alias=cat.fam.sfa&fam_code='+famCode+'&sfa_code='+sfaCode;
             //alert('adresse : '+adresse);
 
             //Affichage des infos
             //var divInfos = document.getElementById('infos_article');
             var infos_article = $('infos_article');
             alert('test2 : '+infos_article);
             var artDesc = data.evaluate(
               '//*[name()="arttr_libelle"]',data,null,
                XPathResult.STRING_TYPE, null).value;
 
               var update = new Ajax.Updater('infos_article', adresse,{
                    method:'get',
                    parameters:'',
                    insertion:Insertion.Before
                });
 
        }
    } );
}
 
function showResponse(requete) {
    $('reponse').value = requete.responseText;
}
 
function analyseReponse( requeteReponse ) {
    var reponseXML = requeteReponse.responseXML ;
    //alert(reponseXML);
}

**Bovino** · 11/06/2009, 15h50

Code :

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

var artDesc = data.evaluate(

il sort d'où ce data ?

**Ervael** · 11/06/2009, 16h05

Cette partie de code je l'ai trouvé sur un site. Le data serait-il une variable et non un mot de programmation ? Je l'avais pris pour cela. Dans ce cas là, qu'elle variable je dois appeler de nouveau reponseXML qui contient les données de mon xml ?

Edit : j'ai corrigé mon script en ne mettant pas ma récupération de xml dans une fonction pour pouvoir la récupérer. J'ai ensuite modifié le evaluate en remplaçant les 2 data par responseXML.

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
 
function appelXml( artCode ) {
    var adress = getAdresseSite() + "domaine.jsp?Query&queryName=art_detail_from_art_code&art_code=" + artCode
 
    var laRequete = new Ajax.Request(adress,{
        method: 'get',
        parameters: '',
        onComplete: function( requeteReponse ) {
 
             var reponseXML = requeteReponse.responseXML ;
             //alert(reponseXML);
 
             //Affichage de la photo
             document.getElementById("photo_article").innerHTML = "<img src=\"/images/images1/"+artCode+".jpg />";
             alert('test1');
 
              var adresse = '/domaine.jsp?alias=cat.fam.sfa&fam_code='+famCode+'&sfa_code='+sfaCode;
             //alert('adresse : '+adresse);
 
             //Affichage des infos
             //var divInfos = document.getElementById('infos_article');
             var infos_article = $('infos_article');
             alert('test2 : '+infos_article);
 
             var xmlChemin = '/root/art_detail_from_art_code/article_detail/arttr_libelle';
 
             var artDesc = reponseXML .evaluate(
               '//*[name()="arttr_libelle"]',reponseXML ,null,
                XPathResult.STRING_TYPE, null).value;
 
               var update = new Ajax.Updater('infos_article', xmlChemin,{
                    method:'get',
                    parameters:'',
                    insertion:Insertion.Before
                });
 
        }
    } );
}
 
function showResponse(requete) {
    $('reponse').value = requete.responseText;
}

Premier progrès, j'ai quelque chose qui s'affiche dans ma div, mais c'est une erreur 404.

**Ervael** · 12/06/2009, 09h23

J'avance, j'ai changé dans le var update, l'argument xmlChemin par adress.

xmlchemin renvoyait à l'attribut dont je veux récupérer la valeur dans mon xml, hors d'après ce que j'ai compris, il faut donner le chemin du fichier xml en fait.

Je n'ai plus mon erreur 404 du coup, mais ceci :

Appel d'un WUtils sans paramètre "name"

J'avouerai ne pas trouver à quoi cela correspond sachant que WUtils est un fichier jsp.

Edit : je viens de m'apercevoir que sous IE, la photo n'apparait pas.

**Ervael** · 12/06/2009, 10h22

J'ai trouvé la solution en simplifiant mon script grandement.

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
 
function appelXml( artCode, famCode, sfaCode ) {
//    alert( 'update page' ) ;
    var adressXml = getAdresseSite() + "ColCMS/pages/WUtils.jsp?name=Query&queryName=art_detail_from_art_code&art_code=" + artCode
 
    var laRequete = new Ajax.Request(adressXml,{
        method: 'get',
        parameters: '',
        onComplete: function( requeteReponse ) {
//            alert( 'analyse réponse' ) ;
             var reponseXML = requeteReponse.responseXML ;
             var infoArticle = reponseXML.getElementsByTagName('arttr_libelle')[0] ;
             $('infos_article').innerHTML = infoArticle.firstChild.nodeValue  ;
 
             var photoArticle = reponseXML.getElementsByTagName('artimg_libelle')[0].firstChild.nodeValue ;
             $('photo_article').innerHTML = '<img src="/images/images1/' + photoArticle + '" />' ;
 
        }
    } );
}

[AJAX] Traitement de données xml en AJAX

AJAX

Discussions similaires

Partager

Partager