Exemple de tagboard avec xmlhttp request

Télécharger le projet
Commenter

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;
}

?>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (malalam)