11548 sujets

JavaScript, DOM et API Web HTML5

CountDown JavaScript

EDIT: Aie dans le faut Forum merci de changer Smiley confused

Bonjours,

Je cherche à lancer une requête php toute les 3 secondes.

Il s'agit d'un chat qui fonctionne un peut comme msn (il fonctionne très bien d'ailleur Smiley lol ) mais pour l'instant il se rafraichit dans le head ce qui est plus lourd (de recharger toute l'iframe) que de juste renvoyer la requête.

J'ai pensé à JavaScript mais je n'y ai jamais "vraiment" touché, juste quelque notions par ci par la... et je me suis donc construit un script Smiley murf (bourré d'erreurs je pense Smiley bawling ) Mais il ne fonctionne pas
Smiley fache

voila le script



var time=3  //Temps en secondes
time2=time*100
function CountDown()
{
        if(time>0)
        {
                if(time>1)
                {
                        window.status="Dans "+time+" secondes vous aurez atteint votre destination"
                        document.s.Time.value="Dans "+time+" secondes vous aurez atteint votre destination"
                }
                else
                {
                        window.status="Dans "+time+" seconde vous aurez atteint votre destination"
                        document.s.Time.value="Dans "+time+" seconde vous aurez atteint votre destination"
                }
                time=time-1
                setTimeout("CountDown()", time2)
        }
        else
        {
                ma requete php
        }
}


J'avais pensé la charger dans le body de la page de cette manière


<body onLoad="CountDown();">


Une idée de ce qui ne fonctionne pas? Smiley ohwell

Merci d'avance

EDIT: Aie dans le faut Forum merci de changer Smiley confused
Modifié par pikoo (20 Dec 2006 - 11:59)
Bonjour.

On en avait déjà parlé, mais le système le plus léger pour obtenir le résultat passe par xmlHttpRequest.

Je vous conseille donc de vous initier à cette technique en utilisant xhrconnection:
http://xhrconnection.sutekidane.net/
Rien n'empêche de réecrire la fonction, mais l'usage de cet objet rend hommage au travail de son auteur...

La mise en oeuvre est ultra simplifiée, et peut se résumer à l'appel de simples fonctions : 


/** Charger un fichier ou une url serveur dans un domNode
@param aCible string l'identificateur du noeud d'accueil
@param aFile string path relatif ou url du contenu à charger
@return boolean Toujours true
@todo Réviser le return
*/
function loadHtm(aCible,aFile)
{
	var XHR = new XHRConnection();
	XHR.setRefreshArea(aCible);
	XHR.sendAndLoad(aFile, "GET");
	return true;
}

/** Envoyer la donnée à l'ul par POST */ 
function postField(aNode)
{
	var XHR = new XHRConnection();
	data = aNode.id + "=" + aNode.value
	XHR.appendData(data);
	XHR.sendAndLoad("php/prog2.php", "POST");
}


En supposant que le php soit "php/prog.php", donc accessible à partir de la racine du site dans le répertoire relatif "php", la mise en oeuvre peut se faire comme suit:


<html>
<head>
<title>Chat !</title>

<script type="text/javascript" src="XHRConnection.js"> </script>
<script type="text/javascript"> 
function loadHtm(...
}

function postField(...
}

function refresh()
{
	loadHtm('id_cible','php/prog.php');
	window.setTimeout("refresh()",3000);
}
</script>


</head>
<body onload="refresh()">
<h1>Titre</h1>
<div id="id_cible"></div><!-- ici la zone des messages rafraichie -->
<textarea id="edit" onchange="postField(this)">
</body>
</html>


Voilà. ça, c'est la théorie... (j'ai rien testé, donc, il doit y avoir des fôtes. Lire ceci dans le but de comprendre le fonctionnement...)
Modifié par GeorgesM (20 Dec 2006 - 12:36)
Merci beaucoup de ton aide Georges c'est vraiment sympa la peine que tu te donne!

Ton script ma donné une idée qui me semble presque plus simple encore (et surtout que je peut comprendre à 100% par la même occasion) et je peut même afficher le temps restant ^^


<SCRIPT LANGUAGE="JavaScript">
window.setTimeout("document.form.time.value='5'",1000)
window.setTimeout("document.form.time.value='4'",2000)
window.setTimeout("document.form.time.value='3'",3000)
window.setTimeout("document.form.time.value='2'",4000)
window.setTimeout("document.form.time.value='1'",5000)
window.setTimeout("document.form.time.value='0';location=('sondagedesign3.php');",6000)
</script>
<FORM name="form">
<INPUT TYPE="text" NAME="time" size="1" style="border: 0; font-size: 8pt; font-weight: bold; font-family: tahoma, Arial, Helvetica, sans-serif;">secondes.
</FORM>

?
Bon la je charge encore une fois toute la page (en faite je connais que location=... comme fonction a déclancher Smiley confused )

Y à t'il moyen de lancer une requete mysql à la place de location=...?

Si oui on fait comment? Bonne soirée Smiley murf
Modifié par pikoo (21 Dec 2006 - 19:25)
Ce que veut dire GeorgesM, c'est que tu devrais éviter d'utiliser "location" pour recharger tes données.
Son exemple sers à t'expliquer comment executer ton script php (dans lequel tu peux faire tes requetes sql) sans avoir besoin de recharger toute ta page.

Tu n'as donc ensuite qu'a faire cet appel toutes les x secondes pour que tes infos soient à jour, sans avoir à utiliser des "location" Smiley biggrin
Sujet clos
Aller à