Discussion :

[oceane751]

Bonjour à tous

Je tente de reproduire ça http://nicolaspied.developpez.com/ajax-premiers-pas/#L1

mais ça ne fonctionne pas des masses, rien ne n'affiche

voici le code :

le 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
function handleHttpResponse() {
 
 
// On démarre
    if(window.XMLHttpRequest){
    // Pour tous les navigateurs
        xhr = new XMLHttpRequest();
    }
    else{
    if(window.ActiveXObject){
      // Pour IE
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
 
/* La fonction handleHttpResponse est fournit plus loin dans cet article */
xhr.onreadystatechange = handleHttpResponse;
var url = "items.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);
    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;
    }
}

et le html (la partie qui nous interesse)

Code html :

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

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

Suis plus habitué à utiliser ajax avec php/mysql mais là je sèche complètement

Quelqu'un pourrait il m'aider?

Merci

[Bovino]

Code :

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

xhr.onreadystatechange = handleHttpResponse;

Mais elle est où la fonction handleHttpResponse() ???

[oceane751]

alors donc je dois la mettre à part
du genre

Code :

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

1
2
3
function handleHttpResponse() {    
 if(xhr.readyState == 4 && xhr.status == 200) {        
   response     = cleanXML(xhr.responseXML.documentElement);             } }

puis

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
function test() {     // On démarre    
 if(window.XMLHttpRequest){     // Pour tous les navigateurs         
xhr = new XMLHttpRequest();     }    
 else{     if(window.ActiveXObject){       // Pour IE          
 xhr = new ActiveXObject("Microsoft.XMLHTTP");     }     }   /* La fonction handleHttpResponse est fournit plus loin dans cet article */ xhr.onreadystatechange = handleHttpResponse; 
var url = "items.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);     
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;     } }

c'est ça?

[oceane751]

Bon maintenant j'ai ça comme erreur :

ReferenceError: cleanXML is not defined
response = cleanXML(xhr.responseXML.documentElement);

En gros, cleanXML n'est pas définit même dans le tuto. Du coup suis bloqué. J'ai cherché sur google mais rien de concluant.

[NoSmoking]

Bonjour,
tu peux toujours essayer celle qui est dans allez plus loin avec AJAX et XMLHttpRequest

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function clean(d){
	var bal=d.getElementsByTagName('*');
 
	for(i=0;i<bal.length;i++){
		a=bal[i].previousSibling;
		if(a && a.nodeType==3)
			go(a);
		b=bal[i].nextSibling;
		if(b && b.nodeType==3)
			go(b);
	}
	return d;
}

à renommer quand même .