erreur requete ajax

Version imprimable

erreur requete ajax

salut,

je suivre un exemple d'affichage avec ajax et il marche avec sucée

le but est d'afficher des résultat d'un fichier .xml

avec un bouton de mise a jour
l'exemple qui marche contient ce code

pour le fichier myxml.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" ?>
<donnees>
<categorie titre="Catégorie 1">
<donnee texte="Donnée A" valeur="15"></donnee>
</categorie>
<categorie titre="Catégorie 2">
<donnee texte="Donnée B" valeur="2"></donnee>
<donnee texte="Donnée C" valeur="3"></donnee>
<donnee texte="Donnée D" valeur="4"></donnee>
</categorie>
<categorie titre="Catégorie 3">
<donnee texte="Donnée E" valeur="5"></donnee>
<donnee texte="Donnée F" valeur="6"></donnee>
<donnee texte="Donnée G" valeur="7"></donnee>
<donnee texte="Donnée H" valeur="8"></donnee>
<donnee texte="Donnée I" valeur="9"></donnee>
</categorie>
</donnees>

pour le myxml.css

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
 
 
 
#affichageData{
               width: 200px;
               background-color: #F3F9FE;
}
.categorie {
         color: #21536A;
         border: 1px solid;
         background-color: #EAEEEE;
         padding: 4px;
         font-family: Verdana;
         font-size: 11px;
         border-color: #FEFEFE #C3C8CB #C3C8CB;
         margin: 0px;
         text-decoration: none;
         padding-left: 3px;
}
.donnee {
          font-family: Verdana;
          font-size: 10px;
          padding-top: 3px;
          padding-bottom: 4px;
          padding-left: 20px;
          border-right: 1px solid #C3C8CB;
          border-left: 1px solid #C3C8CB;
          border-bottom: 1px solid #C3C8CB;
}

pour le code de myxml.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
      <title>MyXML</title>
      <meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <link rel="stylesheet" href="myxml.css" type="text/css"/>
      <script type="text/javascript" src="myxml.js"></script>
</head>
 
<body>
<input type="button" onClick="gen_data('myxml.xml');" value="Générer" /><br /><br />
<input type="button" onClick="lancer('myxml.xml');" value="Mise à jour en boucle" /><br /><br />
<div id="affichageData"></div>
</body>
</html>

pour myxml.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
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
 
 
 
function lancer(url){
         setInterval("regen_data(url)",300);
}
var ie5 = (document.getElementById && document.all);
function setXML(xmldocument){
         var k = 0;
         var categorie = xmldocument.getElementsByTagName('categorie');
 
         if(document.getElementById('themaindiv')){
           var x = document.getElementById('themaindiv');
           x.parentNode.removeChild(x);
         }else{
               var themaindiv = document.createElement('div');
               themaindiv.setAttribute("id","themaindiv");
               document.getElementById('affichageData').appendChild(themaindiv);
         }
 
         for (var i=0;i<categorie.length;i++){
             var mydiv = document.createElement('div');
             var attributs = categorie[i].attributes;
             var txt = attributs.getNamedItem("titre").nodeValue;
             mydiv.appendChild(document.createTextNode(">> " + txt));
             if(ie5){
               mydiv.style.cssText = 'width: 100%';
             }
             ie5?mydiv.setAttribute("className", "categorie"):mydiv.setAttribute("class", "categorie");
             /*document.getElementById('affichageData').appendChild(mydiv);*/
             themaindiv.appendChild(mydiv);
             mydiv.setAttribute("id", "categorie" + i);
 
             var mysecdiv = document.createElement('div');
             mysecdiv.setAttribute("id", "sub" + i);
             ie5?mysecdiv.setAttribute("className", "donnee"):mysecdiv.setAttribute("class", "donnee");
             mysecdiv.style.cssText = 'display:block;';
             /*document.getElementById('affichageData').appendChild(mysecdiv);*/
             themaindiv.appendChild(mysecdiv);
 
             var mydata = categorie[i].getElementsByTagName('donnee');
             for (var j=0;j<mydata.length;j++){
                 var attributs= mydata[j].attributes;
                 var txt = attributs.getNamedItem("texte").nodeValue;
                 var valeur = attributs.getNamedItem("valeur").nodeValue;
                 var spn1 = document.createElement('span');
                 spn1.appendChild(document.createTextNode(txt + " : "));
                 var spn2 = document.createElement('span');
                 spn2.appendChild(document.createTextNode(valeur));
                 spn2.setAttribute("id","donnee"+k);
                 k++;
                 mysecdiv.appendChild(spn1);
                 mysecdiv.appendChild(spn2);
                 var b = document.createElement('br');
                 mysecdiv.appendChild(b);
             }
 
         }
}
function resetXML(xmldocument){
         var lesdonnees = xmldocument.getElementsByTagName('donnee');
         for(var l=0;l<lesdonnees.length;l++){
                 document.getElementById('donnee'+l).innerHTML = lesdonnees[l].attributes.getNamedItem("valeur").nodeValue;
         }
}
 
var xhr = null;
function gen_data(url){
         if(window.XMLHttpRequest) {
                                   xhr = new XMLHttpRequest();
         }else if(window.ActiveXObject){
               xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }else{
               alert("Votre navigateur n'est pas compatible avec AJAX...");
         }
         if(xhr) {
                 xhr.onreadystatechange = function(){
                                        if(xhr.readyState == 4 && xhr.status == 200){
                                                          var xmldocument = xhr.responseXML;
                                                          setXML(xmldocument);
                                        }
                 }
                 xhr.open("GET",url+"?ms="+new Date().getTime(),true);
                 xhr.setRequestHeader("Cache-Control","no-cache");
                 xhr.send(null);
         }
}
function regen_data(url){
         if(window.XMLHttpRequest) {
                                   xhr = new XMLHttpRequest();
         }else if(window.ActiveXObject){
               xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }else{
               alert("Votre navigateur n'est pas compatible avec AJAX...");
         }
         if(xhr) {
                 xhr.onreadystatechange = function(){
                                        if(xhr.readyState == 4 && xhr.status == 200){
                                                          var xmldocument = xhr.responseXML;
                                                          resetXML(xmldocument);
                                        }
                 }
                 xhr.open("GET",url+"?ms="+new Date().getTime(),true);
                 xhr.setRequestHeader("Cache-Control","no-cache");
                 xhr.send(null);
         }
}

le problème est quand j'utilise ce type de fichier myxml.xml

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
<?xml version="1.0" encoding="UTF-8"?>
<donnees>
<categorie>
<titre>Catégorie 1</titre>>
<donnee>
<texte>Donnée A</texte>
<valeur>15</valeur>
</donnee>
</categorie>
<categorie>
<titre>Catégorie 2</titre>>
<donnee>
<texte>Donnée B</texte>
<valeur>2</valeur>	
</donnee>
<donnee>
<texte>Donnée C</texte>
<valeur>3</valeur>
</donnee>
<donnee>
<texte>Donnée D</texte>
<valeur>4</valeur>
</donnee>
</categorie>
<categorie>
<titre>Catégorie 3</titre>>
<donnee>
<texte>Donnée E</texte>
<valeur>5</valeur>
</donnee>
<donnee>
<texte>Donnée F</texte>
<valeur>6</valeur>
</donnee>
<donnee>
<texte>Donnée G</texte>
<valeur>7</valeur>
</donnee>
<donnee>
<texte>Donnée H</texte>
<valeur>8</valeur>
</donnee>
<donnee>
<texte>Donnée I</texte>
<valeur>9</valeur>
</donnee>
</categorie>
</donnees>

il n'a rien afficher (pourtant pour le premier exemple de fichier myxml.xml il a bien afficher le résultat)

merci d'avance

05/04/2011, 20h06
danielhagnoul

Bonsoir

Je ne vois aucune trace de jQuery dans votre code ?

La structure du second fichier XML étant complètement différente du premier, il est normal que le programme conçu pour exploiter la première version du fichier XMl, n'arrive pas à exploiter la deuxième version du fichier XML.
05/04/2011, 20h18
alen22

merci pour la réponse

vous avez raison c'est pour cela je cherche à connaitre les truc possibles pour exploiter la deuxième version de fichier .xml

l'affichage est bien structuré en exploitant la première version c'est pour cela je veux exploiter ce code pour avoir le même type d'affichage

je cherche quelqu'un qui a une idée sur le changement possible à mon code

pour avoir le même type d'affichage en travaillent avec la deuxième version de fichier .xml

je trouve un autre exemple qui travail avec même type de fichier dvd.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="utf-8"?>
<dvd>    
    <item>
        <title>Princesse Mononoké</title>
        <director>Hayao Miyazaki</director>
        <price>14,99</price>
    </item>
    <item>
        <title>Mon voisin Totoro</title>
        <director>Hayao Miyazaki</director>
        <price>19,99</price>
    </item>
    <item>
        <title>Blood, The Last Vampire</title>
        <director>Hiroyuki Kitakubo</director>
        <price>11,99</price>
    </item>
</dvd>

le code de la page jsp est :

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
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>page de test</title>
<script type="text/javascript">
var xhr = getXMLHttpRequest();
/* La fonction handleHttpResponse est fournit plus loin dans cet article */
xhr.onreadystatechange = handleHttpResponse;
var url = "dvd.xml";
xhr.open("GET", url, true);
/* A préciser pour les requêtes de type POST
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
*/
xhr.send(null);
 
function handleHttpResponse() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        /* xhr.responseXML permet d'obtenir le fichier XML
           xhr.responseText aurait retourné le fichier sous format texte */
        response     = cleanXML(xhr.responseXML.documentElement);
        // ...
    }
}/* Récupérer la liste des items donc la liste des DVD */
var items    = response.getElementsByTagName("item");
var html     = ''; /* Présentation HTML de la liste des DVD */
/* Nombre de DVD */
count        = items.length;
for(i = 0; i < count; i++) { /* POUR CHAQUE item */
    html += '<div class="item">';
    html += '<h1>' + items[i].getElementsByTagName("title")[0].firstChild.nodeValue + '</h1>';
    html += '<div class="author">R&eacute;alisateur : ';
    html += items[i].getElementsByTagName("director")[0].firstChild.nodeValue + '</div>';
    html += '<div class="price">Prix : ';
    html += items[i].getElementsByTagName("price")[0].firstChild.nodeValue + ' €</div>';
    html += '</div>';
}
document.getElementById('content').innerHTML += html;
   </script>
</head>
 
<body>
<div id="content"></div>
 
</body>
</html>

après l'exécution il n'affiche rien

j'espère que quelqu'un pouvez m'aidez

je trouve un exemple de debutant dans ce site :
http://nicolaspied.developpez.com/ajax-premiers-pas/#L1

qui admet un exemple détaillé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<dvd>    
    <item>
        <title>Princesse Mononoké</title>
        <director>Hayao Miyazaki</director>
        <price>14,99</price>
    </item>
    <item>
        <title>Mon voisin Totoro</title>
        <director>Hayao Miyazaki</director>
        <price>19,99</price>
    </item>
    <item>
        <title>Blood, The Last Vampire</title>
        <director>Hiroyuki Kitakubo</director>
        <price>11,99</price>
    </item>
</dvd>

et il me donné ces codes séparément

Code:

1
2
3
4
5
6
7
8
9
var xhr = getXMLHttpRequest();
/* La fonction handleHttpResponse est fournit plus loin dans cet article */
xhr.onreadystatechange = handleHttpResponse;
var url = "dvd.xml";
xhr.open("GET", url, true);
/* A préciser pour les requêtes de type POST
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
*/
xhr.send(null);

Code:

1
2
3
4
5
6
7
8
function handleHttpResponse() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        /* xhr.responseXML permet d'obtenir le fichier XML
           xhr.responseText aurait retourné le fichier sous format texte */
        response     = cleanXML(xhr.responseXML.documentElement);
        // ...
    }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Récupérer la liste des items donc la liste des DVD */
var items    = response.getElementsByTagName("item");
var html     = ''; /* Présentation HTML de la liste des DVD */
/* Nombre de DVD */
count        = items.length;
for(i = 0; i < count; i++) { /* POUR CHAQUE item */
    html += '<div class="item">';
    html += '<h1>' + items[i].getElementsByTagName("title")[0].firstChild.nodeValue + '</h1>';
    html += '<div class="author">R&eacute;alisateur : ';
    html += items[i].getElementsByTagName("director")[0].firstChild.nodeValue + '</div>';
    html += '<div class="price">Prix : ';
    html += items[i].getElementsByTagName("price")[0].firstChild.nodeValue + ' €</div>';
    html += '</div>';
}
document.getElementById('content').innerHTML += html;

peut être l'emplacement des ces codes dans la page jsp est erronée
aussi l'appel avec

Code:

<div id="content"></div>

peut être erroné

merci d'avance

j'essaye avec cette maniere code jsp

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
50
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>page de test</title>
<script type="text/javascript">
var xhr = getXMLHttpRequest();
/* La fonction handleHttpResponse est fournit plus loin dans cet article */
xhr.onreadystatechange = handleHttpResponse;
var url = "dvd.xml";
xhr.open("GET", url, true);
/* A préciser pour les requêtes de type POST
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
*/
xhr.send(null);
 
function handleHttpResponse() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        /* xhr.responseXML permet d'obtenir le fichier XML
           xhr.responseText aurait retourné le fichier sous format texte */
        response     = cleanXML(xhr.responseXML.documentElement);
        // ...
    }
}/* Récupérer la liste des items donc la liste des DVD */
var items    = response.getElementsByTagName("item");
var html     = ''; /* Présentation HTML de la liste des DVD */
/* Nombre de DVD */
count        = items.length;
for(i = 0; i < count; i++) { /* POUR CHAQUE item */
    html += '<div class="item">';
    html += '<h1>' + items[i].getElementsByTagName("title")[0].firstChild.nodeValue + '</h1>';
    html += '<div class="author">R&eacute;alisateur : ';
    html += items[i].getElementsByTagName("director")[0].firstChild.nodeValue + '</div>';
    html += '<div class="price">Prix : ';
    html += items[i].getElementsByTagName("price")[0].firstChild.nodeValue + ' €</div>';
    html += '</div>';
}
document.getElementById('content').innerHTML += html;
   </script>
</head>
 
<body>
 
 
<div id="content"></div>
 
</body>
</html>

peut être je ne dois pas écrit cette ligne

Code:

<div id="content"></div>

merci d'avance