Rechargement automatique en AJAX

Exemple pour un chat :

Dans ce fichier tu fais la requête sur ta base de données comme tu le fais actuellement.

Dans ce fichier tu fais la requête sur ta base de données comme tu le fais actuellement :

<?php
  $base = new PDO(mysql:host=hostname;dbname=db;charset=utf8;', 'pseudo', 'pass');
  $result = $base->query('SELECT pseudo,message FROM chat ORDER BY ID DESC');
  while($chat = $result->fetch())
  {
   echo '<p><nav>'. $chat['pseudo'] .': </nav> '. $chat['message'] .'</p>';
  }
  ?>

Par contre au lieu de faire echo dans ta boucle tu enregistre le contenu dans une variable.

Le code devient :

 <?php
  $base = new PDO(mysql:host=hostname;dbname=db;charset=utf8;', 'pseudo', 'pass');
  $result = $base->query('SELECT pseudo,message FROM chat ORDER BY ID DESC');
  $chat_content = NULL;
  while($chat = $result->fetch()) {
       $chat_content .= '<p><nav>'. $chat['pseudo'] .': </nav> '. $chat['message'] .'</p>';
  }
 ?>

Ensuite tu retourne un json avec le contenue de cette variable :

//PREPARE JSON ARRAY
$json = array(
	"chat" => $chat_content,
);
	
//RETURN JSON
header('Content-Type: application/json');
echo json_encode($json);

Ensuite à l’aide de AJAX de JQUERY tu peux récupérer le contenue de ce fichier autant de fois que tu veux sans recharger ta page.

Dans la balise head tu ajoute jquery :

<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

Puis tu utilise AJAX :

<div id="resultat"></div>
<script type="text/javascript">
// <![CDATA[
	function refresh_chat() {
		$.get( "chemin_vers_le_fichier/get_chat.php", function(data) {
			$("#resultat" ).html(data.chat);
		});
	}
    $(function() { window.setInterval("refresh_chat()", 3000); });
	refresh_chat();
// ]]>
</script>

 

De cette façon ton chat est automatiquement mis à jours chaque 3 secondes.