[AJAX] Affichage d'un xml + mise a jour automatique toutes les x sec

**WeDgEMasTeR** · 11/05/2007, 16h42

Bonjour!
En me fiant aux tutos disponible sur le site, j'ai commencé a écrire un code pour que ma liste de membre connecté soit automatiquement actualisé toute les x seconde sans rafraichissement de la page.

J'ai donc fait la partie php->XML.
J'ai créé quelque chose de ce type:

<user>

<user_id>23</user_id>
<user_name>toto</user_name>
<time>8h</time>

</user>

<user>

<user_id>14</user_id>
<user_name>toto2</user_name>
<time>9h</time>

</user>

</lastseen>

Mais après pour afficher en une liste, j'y arrives pas, rien s'affiche.
J'ai écris ce code ci-dessous, toujours en m'inspirant du tutorial...

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
 
<script language='javascript' type='text/javascript'>
 
	function ajax()
	{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { affichage_ajax(xhr); };
 
    //on appelle le fichier reponse.txt
    xhr.open('GET', 'mon_url_xml', true);
    xhr.send(null);
}
 
 
function affichage_ajax(xhr)
{
    if (xhr.readyState==4) 
    {
    	var docXML= xhr.responseXML;
    	var items = docXML.getElementsByTagName('user')
    	var html     = ''; /* Présentation HTML de la liste des connectés */
		/* Nombre de membre a afficher */
		count        = items.length;
		for(i = 0; i < count; i++) { /* POUR CHAQUE item */
			html += '<table cellpadding="0" cellspacing="0" width="100%">';
    		html += '<tr>
<td class="side-small" align="left"><img src="../themes/fusion/images/bullet.gif" alt="">
';
   			html += '<a href="../profile.php?lookup=' + items[i].getElementsByTagName("user_id")[0].firstChild.nodeValue + '" ';
			html += 'title="' + items[i].getElementsByTagName("user_name")[0].firstChild.nodeValue + '" class="side">
';
   			html += items[i].getElementsByTagName("user_name")[0].firstChild.nodeValue + '</a></td>';
			html += '<td class="side-small" align="right">' + items[i].getElementsByTagName("time")[0].firstChild.nodeValue + '</td>
</tr>
"';
			html += '</table>';
		}
		document.getElementById('content').innerHTML += html;
    }
}
 
ajax();
</script>
<table cellpadding='0' cellspacing='0' width='100%'>
    <tr>
        <td class='scapmain'>Last Seen Users</td>
    </tr>
    <tr>
        <td class='side-body'>
<div id='content'></div>
        </td>
    </tr>
</table>

Je suis completement débutant, et j'essais de commencer par un truc simple pour apprendre.

Et par ailleurs je voudrais savoir comment mettre à jour automatiquement la liste?

merci d'avance!

update: Bon j'arrive à afficher, mais maintenant j'aimerai une mise ajour automatique et que ca soit compatible opera car ca ne lai pas.
comment faire ?

**lodan** · 12/05/2007, 21h40

Bonsoir,

Quel tuto as-tu utilisé ?

Quand appels-tu ajax ou affichage_ajax dans ton html ?

**WeDgEMasTeR** · 12/05/2007, 22h15

celui là http://gael-donat.developpez.com/web/intro-ajax/

et un autre aussi.
M'enfin maintenant ca s'affiche très bien.
C'est que dans les html += .... j'avais laissé des \n qui me fesait bugé et donc rien ne s'affichait.

Maintenant ce que je voudrai, c'est pouvoir actualisé automatiquement le code. Je sais pas trop comment faire. Et puis j'aimerai rendre compatible avec opera car là cela marche que sur ie et firefox.

**lodan** · 12/05/2007, 22h32

Si tu veux exécuter ton code en permance, il faut mettre un onload dans ton body.

Après tu peux temporiser.

Pour opéra, il faut être en version 8 minimum.

**WeDgEMasTeR** · 12/05/2007, 22h46

Voilà mon code corriger et j'ai ajouté window.onload=ajax; pour lexecuter.

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
<script language='javascript' type='text/javascript'>
 
	function ajax()
	{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { affichage_ajax(xhr);};
 
    //on appelle le fichier reponse.txt
    xhr.open('GET', 'http://www...mon adresse../reponse.php', true);
    xhr.send(null);
}
 
 
function affichage_ajax(xhr)
{
    if (xhr.readyState==4) 
    {
    	var docXML= xhr.responseXML;
    	var items = docXML.getElementsByTagName('user')
    	var html     = ''; /* Présentation HTML de la liste des connectés */
		/* Nombre de membre a afficher */
		count        = items.length;
 
	html += '<table cellpadding="0" cellspacing="0" width="100%">';
 
		for(i = 0; i < count; i++) { 	
    		html += '<tr><td class="side-small" align="left"><img src="../themes/fusion/images/bullet.gif" alt="">';
   			html += '<a href="../profile.php?lookup=' + items[i].getElementsByTagName("user_id")[0].firstChild.nodeValue + '" ';
			html += 'title="' + items[i].getElementsByTagName("user_name")[0].firstChild.nodeValue + '" class="side">';
   			html += items[i].getElementsByTagName("user_name")[0].firstChild.nodeValue + '</a></td>';
			html += '<td class="side-small" align="right">' + items[i].getElementsByTagName("time")[0].firstChild.nodeValue + '</td></tr>';		
		}
		html += '</table>';
		document.getElementById('lastseen').innerHTML += html;	
    }	
}
 
window.onload=ajax;
</script>
<table cellpadding='0' cellspacing='0' width='100%'>
    <tr>
        <td class='scapmain'>Last Seen Users</td>
    </tr>
    <tr>
        <td class='side-body'>
<div id='lastseen'></div>
        </td>
    </tr>
</table>

Mais je sais pas executer en permanence le code.
Et j'ai opera 9.20 et rien ne s'affiche :/

**lodan** · 13/05/2007, 08h51

Tu places ceci à la fin de ajax

Code :

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

setTimeout("ajax()",1000);

J'ai mis 1000, mais à toi de mettre le temps que tu veux

Pour Opera que te dis la console javascript ?

Utilises-tu un outils comme firebug pour voir le Dom ?

**WeDgEMasTeR** · 13/05/2007, 13h59

Alors le setTimeout pose problème car il me réaffiche tout le tableau a chaques fois.

Et d'après la console d'opera, apparement il arrive pas a le lancer le javascript c'est peut-être le window.load qu'il aime pas.

j'ai firebug sur firefox aussi

**lodan** · 13/05/2007, 15h49

tu peux montrer ton code complet pour ton html ?

Le résultat exécuté bien sûr pas le PHP

**WeDgEMasTeR** · 13/05/2007, 16h10

Le code complet, c'est celui plus haut.
J'ai le code ci dessous:

Code :

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

1
2
3
4
5
6
7
8
9
html += '<table cellpadding="0" cellspacing="0" width="100%">';
for(i = 0; i < count; i++) { 	
html += '<tr><td class="side-small" align="left"><img src="../themes/fusion/images/bullet.gif" alt="">';
html += '<a href="../profile.php?lookup=' + items[i].getElementsByTagName("user_id")[0].firstChild.nodeValue + '" ';
html += 'title="' + items[i].getElementsByTagName("user_name")[0].firstChild.nodeValue + '" class="side">';
html += items[i].getElementsByTagName("user_name")[0].firstChild.nodeValue + '</a></td>';
html += '<td class="side-small" align="right">' + items[i].getElementsByTagName("time")[0].firstChild.nodeValue + '</td></tr>';		
}
html += '</table>';

Qui représente un tableau, avec pour chaques lignes le pseudo et la date de dernière visites.
Et ce code est affiché dans un <div> qui a pour id lastseen:

Code :

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

<div id='lastseen'></div>

Et le settimeout va afficher en boucle ce tableau toutes les x seconde...
En gros j'ai la meme liste qui s'ajoutes mis à jour.

exemple:

toto En ligne
tutu 1h03.12
robert 2h30.40
toto En ligne
tutu 1h03.15
robert 2h30.43
toto En ligne
tutu 1h03.18
robert 2h30.46

Il faut peut-être modifier, ou ajouter une fonction..

**WeDgEMasTeR** · 15/05/2007, 18h24

C'est bon! en fait faut betement vider le div... et c'est bon.

**WeDgEMasTeR** · 16/05/2007, 13h14

Un ptit soucis... sous IE ca ne marche pas.
J'ai bien la liste qui s'affiche, mais aucune mise à jour est fait.
et quand j'actualise la page, cela ne mets toujours pas la liste à jour.
Je suis obligé de fermer la fenêtre, et rouvrir une autre pour avoir une liste actualisé, mais elle ne le fait pas automatiquement, meme a l'actualisation de la page.

Sur opera et firefox, ca marche sans problème.

D'où peut provenir ce problème ?

**WeDgEMasTeR** · 20/05/2007, 20h11

J'arrives pas a comprendre pourquoi sous IE cela marche pas et même après une actualisation de la page les données ne change pas...

**lodan** · 21/05/2007, 10h30

J'ai la chance de na pas avoir à utiliser IE donc je ne peux pas t'aider.

Tu as marqué résolu sur ton post, donc personne ne viendra voir.

Repost le sur ce sujet ailleur.

[AJAX] Affichage d'un xml + mise a jour automatique toutes les x sec

JavaScript

Discussions similaires

Partager

Partager