+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Ajax] Fonction de rafraîchissement automatique : lourd ou pas ? (/showthread.php?tid=2696)
RE: L'ajax, fonction qui refresh auto, lourd ou pas? - keke - 03-07-2008
Il me semble surtout que tout son site n'est pas implémenté en AJAX ... si il utilise d'autres options que la messagerie ou le tchat, il recharge toute sa page.
Je suis à côté de la plaque (ben si oui, moi je procède ainsi ^^)
RE: L'ajax, fonction qui refresh auto, lourd ou pas? - Ter Rowan - 03-07-2008
une manière simple mais plus très propre :
Code :
var obj = document.getElementById("communication");
obj.innerHTML +=texte;ou "texte" est le texte que tu veux rajouter à ton div (si tu veux remplacer, tu mets obj.innerHTML =texte; , sans le '+')
et ton div a comme id "communication"
pas propre dans le sens où innerHTML n'est plus (n'a jamais ?) été le standard, mais c'est tellement plus pratique (et surtout, de tête je ne sais plus comment faire ^^)
RE: L'ajax, fonction qui refresh auto, lourd ou pas? - Raoull - 03-07-2008
Non mon site est "normal" et j'implemente un peu d'ajax (xajax je me fais pas chier) là où c'est utile (pour vérifier si un nick est pris à l'inscription ou rafraichir cette shootbox).
Oui rafrachir quand l'user envoie un message, par contre je refais alors partir le décompte de 0, inutile de rafraichir à 1 ou 2 secondes d'iutervalle.
Et si l'user est pressé, j'ai mis un lien "rafraichir" (qui rafrachi donc et refais aussi partir le décompte de 0).
Chose que je fais aussi, je kill explicitement le timer JS quand tu quittes la page, pour les vieux navigateurs. J'avais eu ce probleme avec un autre essai ya 1 an disons, depuis je le fais, ca coute rien et c plus propre :
Code :
// --- Supprime le timer (si actif) pour les vieux navigateurs
window.onunload = function(){
if (cycle>0) {
clearTimeout(zetimer);
}
};RE: L'ajax, fonction qui refresh auto, lourd ou pas? - TiFred - 03-07-2008
RE: L'ajax, fonction qui refresh auto, lourd ou pas? - Kassak - 03-07-2008
Pour faire simple, tu fais juste un echo time(); pour voir si cela refresh ou pas dans ta div
Sinon pour mon cas, je vous donne le script ajax, et je souhaiterais savoir s'il y a un moyen de pouvoir rafraichir plusieurs divs différentes, sans devoir copié collé le script en entier et en changeant juste le nom de la div, la période de refresh, et la page à refresh.
Code PHP :
<?php
var obj = null;
var FILENAME = "affichage_chat.php";
function Chargeurl (url) {
if(document.getElementById('affichage_chat')){
if(window.XMLHttpRequest)
obj = new XMLHttpRequest();
else if(window.ActiveXObject) obj = new ActiveXObject("Msxml2.XMLHTTP");
else obj = null;
if (obj== null) return;
obj.open("GET", url, true);
obj.onreadystatechange = function () {
if(obj.readyState == 4 ) {
var req = obj.responseText;
if(document.getElementById)
{
document.getElementById("affichage_chat").innerHTML = req;
}
else if(document.all)
{
document.all["affichage_chat"].innerHTML = req;
}
}};
obj.send(null);
}
}
window.setInterval("Chargeurl(FILENAME)",5000);
Donc en haut le nom de la page, le nom de la div est "affichage_chat", et en bas la période de refresh, de 5s. Pour le moment, mon manque de compétence en ajax me fait copié collé ce script pour chaque nouvelle div que je veux rafraichir...pas cool !
RE: L'ajax, fonction qui refresh auto, lourd ou pas? - TiFred - 03-07-2008
Kassak a écrit :Pour faire simple, tu fais juste un echo time(); pour voir si cela refresh ou pas dans ta div
Pas mieux, pas de refresh
RE: L'ajax, fonction qui refresh auto, lourd ou pas? - Ter Rowan - 03-07-2008
@tiFred
sauf que...
new Ajax.PeriodicalUpdater('monDiv', 'test_update.php', {method: 'get', frequency: 10 } );
ne peut pas marcher
la fonction que tu utilises se résume à :
met dans la balise "monDiv" le résultat du fichier "test_update.php"
or ton fichier test_update.php génére une page entière, pas un bout de code html. c'est comme si tu écrivais une page avec
<html><body>blablabla<html><body>blablabla</body></html></body></html>
essaie de créer un deuxieme fichier php (ex toto.php)
avec dedans un simple echo "coucou"
new Ajax.PeriodicalUpdater('monDiv', 'toto.php', {method: 'get', frequency: 10 } );
normalement tu devrais voir apparaitre coucou dans ta page (maintenant je n ai pas vérifié la syntaxe, juste le soucis que je vois est la compréhension de la fonction periodicalupdater)
@kassak
soit tu veux faire autant d'appel ajax (client serveur) qu'il y a et tu es tout près, c'est juste un appel de fonction avec.... deux paramètres (le nom du fichier et l'id du div) je te laisse chercher ;=)
soit tu veux faire un seul appel ajax pour alimenter tous les div d'un coup
dans ce cas tu dois choisir comment faire communiquer le serveur et le client
en xml avec le premier niveau de balise qui t indiquera à quel div est attribué le contenu qui va suivre
en json, avec le meme principe
en fichier "maison" avec un séparateur que tu identifies clairement
tout dépend de tes connaissances pour naviguer dans l'information retour de la simple chaine texte à de l'interprétation xml (j'en reviens de l'interprétation xml pour un jeu php, c'est bien en théorie mais pas forcément le plus simple)
pour aller au plus simple à comprendre
supposons que tu veuilles alimenter deux div différents avec du simple texte genre heure minute
un div pour l'heure
un div pour les minutes
tu peux générer un echo dans ton fichier appelé qui génère, en texte un simple
12#26
(12 heures 26 quoi)
du coté client ton req = obj.responseText; contiendra 12#26
de la tu découpes ta chaine et tu obtiens 12 pour l'heure et 26 pour les minutes
te reste plus qu'a remplir chaque div avec les valeurs
document.getElementById("heure").innerHTML = reqHeure;
document.getElementById("minute").innerHTML = reqMinute;
c'est le cas simple, c'est à dire tu sais exactement ce qui est fourni dans le fichier, qui est à quelle place, quel est le séparateur, etc...
utiliser xml , json ou autre est là peu utile à mon sens. Par contre, là où cela prend toute sa force, c'est quand ce n'est pas le client javascript qui décide à l'avance quelles informations vont lui être remontées par le serveur
supposons qu'il y ait 8 champs qui peuvent être modifié par une requête ajax (donc ton client javascript doit être capable de modifier ces 8 champs) mais que pour optimiser, tu testes côté serveur et tu ne fournis que les informations des 2 champs qui ont changé (pour une opération donnée, pour une autre, peut être que trois champs auraient été à modifier). Ton fichier de retour n'aura pas 8 données mais seulement 2, il est inutile d encombrer la bande passante avec 6 données qui existent déjà sur le poste du client
la force de xml/json c'est de te permettre en suivant une norme d'interpréter ce retour, mais ceci est une autre histoire
RE: L'ajax, fonction qui refresh auto, lourd ou pas? - Kassak - 04-07-2008
Ter Rowan, bon j'ai pas tout pigé, mais je vais tenter un truc dès que j'aurais réglé les problèmes suivant :
Donc avec le script que je vous ai montré plus haut, je fait un refresh de 2 divs. Le temps de refresh étant différent, j'ai préféré séparé les deux scripts dans 2 pages .js différentes.
Donc chaque script permet de refresh une div avec un id différent, et la où je ne comprends, dans ma console firebug, je m'aperçoit que js ne fait pas la différence entre les 2 scripts, il charge toujours le même pour les 2 divs différentes, donc bien sur le refresh ne se fait pas... Je ne pige pas pourquoi?
Et un autre petit problème, un script ne devrait se lancer que sur le page où il y a le minichat, et malgré la vérification if(document.getElementById('affichage_chat')) en début de script, il se lance sur toutes les pages.
RE: L'ajax, fonction qui refresh auto, lourd ou pas? - Ter Rowan - 04-07-2008
je dirais en mode débug
1) vire le set intervalle
2) vérifie que les div sont bien les bons partout (que tu n aies pas deux div avec le même id ou un truc comme ça, ça peut avoir l'air bête mais ça arrive à tout le monde)
3) construit un bouton a la con qui lance le script 1 regarde si il marche
4) construit un bouton a la con qui lance le script 2 regarde si il marche
5) si les deux marchent, alors retente avec set intervalle.
si jamais tu rame pour les étapes 3 et 4, mp moi (ou post les là) les deux scripts js et juste le morceau html où il y a tes div
courage, la première fois qu'ajax marche, y a une petite joie à ne pas manquer
ps. je n'utilise pas set intervalle
une des raisons de ma démarche est de séparer le sujet ajax du sujet set intervalle que je ne maitrise pas (genre deux set intervalle, ça fonctionne ? quid si la fonction ajax est lancée une deuxième fois alors que le premier n'est pas terminé ? des contrôles supplémentaires à mettre ? a voir après, d'abord ajax doit marcher sur ordre humain, après on verra en automatique)
RE: L'ajax, fonction qui refresh auto, lourd ou pas? - TiFred - 09-07-2008
Ter Rowan a écrit :@tiFred
sauf que...
new Ajax.PeriodicalUpdater('monDiv', 'test_update.php', {method: 'get', frequency: 10 } );
ne peut pas marcher
la fonction que tu utilises se résume à :
met dans la balise "monDiv" le résultat du fichier "test_update.php"
or ton fichier test_update.php génére une page entière, pas un bout de code html. c'est comme si tu écrivais une page avec
<html><body>blablabla<html><body>blablabla</body></html></body></html>
essaie de créer un deuxieme fichier php (ex toto.php)
avec dedans un simple echo "coucou"
new Ajax.PeriodicalUpdater('monDiv', 'toto.php', {method: 'get', frequency: 10 } );
normalement tu devrais voir apparaitre coucou dans ta page (maintenant je n ai pas vérifié la syntaxe, juste le soucis que je vois est la compréhension de la fonction periodicalupdater)
...
Dans ce cas-là qu'est-ce que je mets dans MonDIV ?
Merci