Exemple de tagboard avec xmlhttp request

Soyez le premier à donner votre avis sur cette source.

Vue 10 404 fois - Téléchargée 567 fois

Description

Ok, ceci est juste un tout petit exemple. Il n'a pas pour but d'etre mis sur un site, il lui manque bien des choses pour un tagboard ;-) Il n'a pas non plus pour ambition de vous presenter les requetes XMLHTTP de maniere exhaustive, ou meme de vous montrer comment realiser une application complexe grace a elles. Encore une fois : c'est un tout petit exemple.

Ceci dit, j'ai voulu faire un exemple simple, comprehensible, et un minimum ludique, avec une application courante.
Je me suis beaucoup inspire des exemples sur de nombreux sites, evidemment. Notamment de celui-ci a qui j'ai "pique" et modifie la fonction sendData () (la flemme de la reecrire et puis bon...il n'y a pas 36 manieres de faire non plus) :
http://qwix.media-box.net/

Vous avez un zip, et une copie des 2 pages necessaires si vous n'avez pas envie de telecharger le zip ;-)
Le code est commente, je l'espere clair.
Les benefices des requetes XMLHTTP parlent d'elles-memes en testant le code...

Source / Exemple :


--- index.php ---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <LINK rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />
  <script type="text/javascript">
	/**

  • Permet d'envoyer des données en GET ou POST en utilisant les XmlHttpRequest
  • /
function sendData(data, page) { if(document.all) { //Internet Explorer var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ; }//fin if else { //Mozilla var XhrObj = new XMLHttpRequest(); }//fin else //définition de l'endroit d'affichage: var content = document.getElementById("contenu"); XhrObj.open("POST", page); //Ok pour la page cible XhrObj.onreadystatechange = function() { if (XhrObj.readyState == 4 && XhrObj.status == 200) content.innerHTML = XhrObj.responseText ; } XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); XhrObj.send(data); }//fin fonction SendData </script> <title>exemples XmlHttpRequest</title> </head> <body> <!-- Formulaire --> <fieldset class="formulaire"> <legend><em>TAGBOARD</em></legend> <form name="formPost" method="post"> Nom: <br /><input type="text" name="nom" class="input"/><br /> Message: <br /><input type="text" name="message" class="input"/><br /> <input type="button" value="Envoyer" onclick="sendData('nom='+document.formPost.nom.value+'&message='+document.formPost.message.value, 'get.php')" class="button"/> </form> </fieldset> <!-- Le contenu du tagboard, ou vont s'afficher les messages' --> <div id="contenu" class="contenu"> <?php // affichage par defaut. Meme script que dans get.php. Je n'ai pas trouve mieux, rapidement, pour que l'affichage par defaut du fichier soit effectif. if (file_exists ('messages.txt')) { $fp = fopen ('messages.txt', 'r'); $read = fread ($fp, filesize ('messages.txt')); $tab = explode ('<br />', $read); $tab = array_reverse ($tab); $read = implode ('<br />', $tab); echo $read; } ?> </div> </body> </html> ---- get.php ---- <?php header('Content-type: text/html') ; // on declare ce qui va etre affiche // test des POST emis if(isset($_POST['nom']) && !empty($_POST['nom']) && isset($_POST['message']) && !empty($_POST['message'])){ $fp = fopen ('messages.txt', 'a+'); if (!get_magic_quotes_gpc()) { $_POST['nom'] = addslashes(utf8_decode ($_POST['nom'])); $_POST['message'] = addslashes(utf8_decode ($_POST['message'])); } $add = htmlentities ($_POST['nom'].' => '.$_POST['message']).'<br />'; fwrite ($fp, $add); fclose ($fp); } // on affiche :-) if (file_exists ('messages.txt')) { $fp = fopen ('messages.txt', 'r'); $read = stripslashes (fread ($fp, filesize ('messages.txt'))); $tab = explode ('<br />', $read); $tab = array_reverse ($tab); $read = implode ('<br />', $tab); echo $read; } ?>

Codes Sources

A voir également

Ajouter un commentaire Commentaires
cs_YASSINE1982
Messages postés
6
Date d'inscription
mercredi 7 juillet 2004
Statut
Membre
Dernière intervention
16 mars 2007

14 mars 2007 à 13:27
ok
malalam
Messages postés
10839
Date d'inscription
lundi 24 février 2003
Statut
Membre
Dernière intervention
2 mars 2010
25
13 mars 2007 à 11:47
Hello,

poste ton bin's sur le forum plutôt.
Là je n'ai pas le temps de regarder en détail, mais d'autre le pourront peut-être :-)
cs_YASSINE1982
Messages postés
6
Date d'inscription
mercredi 7 juillet 2004
Statut
Membre
Dernière intervention
16 mars 2007

12 mars 2007 à 22:07
Merci malalam pour ce joli exemple

J'ai essayé de modifier un tout petit peu ta fonction en fixant la variable page en une constante ?functions.php? j'a déterminer la méthode comme POST, mais j'ai ajouter un paramètre ?MyFunction?. Le but de ca c'est de pouvoir faire appel à une fonction PHP bien déterminée, en déterminant la place où on veut afficher ses résultats.
Finalement avec ça notre site va se composer de 3 fichiers : index.html ; functions.php (qui contient tous les fonctions PHP) ; un fichier script.js qui contient le actions script entre outre Ta fonction SendData.
Ça marché très bien, mais par la suite j'ai essayé de voir plus loin, c'est de développer une Fonction SendMultiData dont le nombre de paramètres est indéterminé qui permet d'envoyer de 1 à plusieurs requêtes au même temps et de recevoir les résultats et de les placer successivement dans des différents places : SendMultiData(param1,Place1,Function1, param2,Place2,Function2?)
Ce que j'ai fait c'est exécuter SendData Plusieurs fois avec des paramètres différents.
<script type="text/javascript">
/**
* Permet d'envoyer des données en GET ou POST en utilisant les XmlHttpRequest
*/
function sendData(param,place,myfunction)
{
myparam= param+'&myfunction='+myfunction;
page = 'function.php';
if(document.all)
{
//Internet Explorer
var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
}//fin if
else
{
//Mozilla
var XhrObj = new XMLHttpRequest();
}//fin else

//définition de l'endroit d'affichage:
var content = document.getElementById(place);

XhrObj.open("POST", page);

//Ok pour la page cible
XhrObj.onreadystatechange = function()
{
if (XhrObj.readyState 4 && XhrObj.status 200)
content.innerHTML = XhrObj.responseText ;
}

XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XhrObj.send(myparam);
param=null;
}//fin fonction SendData

function sendMultiData()
{

for (var i=0; i < sendMultiData.arguments.length; i=i+3)
{
para = sendMultiData.arguments[i] ;
placy = sendMultiData.arguments[i+1] ;
fction = sendMultiData.arguments[i+2] ;
sendData(para,placy,fction);
}
}

</script>
Le problème que ça par marché parce que, tout simplement, JavaScript continue l'exécution sans attendre la réponse du serveur qui sera traitée quand elle arrivera, d'où le nom ?Asychronous?
Quelqu'un peut trouver une solution ?
A mon avis la boucle il faut que ca soit coté serveur comme ca le fichier php s'execute une seule fois, il faut peut être envoyer un tableau de données au serveur (param1,Place1,Function1, param2,Place2,Function2?)

Si vous pouvez m?aider !
malalam
Messages postés
10839
Date d'inscription
lundi 24 février 2003
Statut
Membre
Dernière intervention
2 mars 2010
25
16 juin 2005 à 15:26
Ouais, je suis d'accord, meme si bon, dans une fonction comme ici, ce n'est pas vraiment plus genant. Sauf si on doit utiliser l'objet pour plusieurs utilisations differentes, evidemment.
coucou747
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Membre
Dernière intervention
30 juillet 2012
41
16 juin 2005 à 14:50
ce qui serait interessant, c'est de faire un objet js, pour qu'ensuite, on n'ai pas à vérifier ces **** de spécificitées de MSIE...

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.