Bonjour,
Voici une solution rudimentaire à la question posée, qui devrait permettre de comprendre le mécanisme de base des requêtes AJAX :
1) quand l'utilisateur clique sur "le bouton" de la page, il suffit que cela lance une fonction javascript (ou jQuery, mais bon, selon moi, ça revient quasi au même) qui déclenchera une requête ajax, requête qui provoquera l'exécution d'un script php sur le serveur, script qui stockera une information quelque part sur ce serveur (par exemple dans une base de données ou un fichier).
2) pour afficher cette information chez tout ceux qui observent la page, il suffit d'inclure dans celle-ci une fonction en javascript qui va tourner en boucle, et qui déclenche une requête ajax qui ira lire sur le serveur l'information déposée, rapatriera cette information sur la machine de l'internaute, et l'affichera quelque part dans la page.
Concrètement, il faut donc commencer par écrire une page en HTM contenant au moins le bouton sur lequel l'un des internautes va cliquer, et un élément HTML (disons pour faire simple un DIV) dans lequel on ira écrire périodiquement l'information stockée sur le serveur. J'ai rajouté un input de type texte dont le contenu sera l'information transmise tel quel au serveur pour simplifier, le serveur ne conservant ici que la dernière information transmise.
Ensuite, il faut un script javascript qui contient deux fonctions, l'une pour envoyer l'information au serveur (putInfoOnServer) et qui se déclenche quand un internaute clique sur "le bouton", l'autre (getInfoFromServer) qui tourne en boucle (via un setInterval) pour récupérer cette information sur le serveur et l'afficher dans les navigateurs de tous ceux qui observent. Ça donne ce qui suit si on fait court (ce qui veut dire que je n'ai pas essayé de faire en sorte que ça marche sur les vieux navigateurs, et que les tests de détection d'erreur sont réduits au minimum) :
<html>
<head>
</head>
<body>
<div id="information"></div>
<input id="data" type="text" value="">
<button type="button" onclick="putInfoOnServer()">Envoie</button>
<script>
function putInfoOnServer()
{
var xhr=new XMLHttpRequest(),s;
xhr.open("POST","putInformation.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
s=document.getElementById("data").value;
s=s.replace(/\(/g,'(').replace(/\)/g,')');//
xhr.send("information="+encodeURIComponent(s));
};
function getInfoFromServer()
{
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if ((this.readyState==4)&&(this.status==200))
{
document.getElementById("information").innerHTML=this.responseText;
}
};
xhr.open("GET","getInformation.php",true);
xhr.send(null);
};
setInterval("getInfoFromServer()",1000);
</script>
</body>
</html>
EDIT : remplacement des éventuelles parenthèses dans l'information envoyée par leur équivalent en html (par sécurité).
Enfin, sur le serveur, il faut déposer 2 scripts php que j'ai nommé "putInformation.php" (qui stocke l'information sur le serveur) et "getInformation.php" qui la récupère. L'exécution de ces scripts est déclenchée par les requêtes AJAX correspondantes. J'ai simplifié en me contentant d'écrire et lire cette information dans un simple fichier texte, mais ça peut être bien plus sophistiqué si besoin est.
Le script putInformation.php :
<?php
$information=($_POST["information"]?$_POST["information"]:"Erreur");
file_put_contents("information.txt",stripslashes($information));
?>
Le script getInformation.php :
<?php
print file_exists("information.txt")?file_get_contents("information.txt"):"Rien";
?>
Pour tester, il suffit d'afficher la page dans deux navigateurs différents, de taper un texte quelconque dans le champ de saisie de la page affichée dans l'un des navigateurs, et d'observer la mise à jour de la page dans l'autre navigateur.
Et voilà ! (au passage, bien qu'on ne voulait pas spécialement faire une application de tchat, on en a fait une quand même finalement).
Amicalement,
Modifié par parsimonhi (06 Jun 2014 - 05:42)