TP AJAX - Ecrire et lire un fichier texte

Attention, depuis PHP 5.5.0, certaines extensions SQL sans doute utilisées dans ce tutoriel peuvent être obsolètes et seront supprimées dans le futur, vous devez donc adapter les codes! Exemples ici.
Pour comprendre un peut plus le fonctionnement d'AJAX, nous allons réaliser un petit travail pratique dont le but sera d'écrire et d'afficher des données transmis par un formulaire dans un fichier texte qui sera ensuite retranscrit automatiquement dès la validation.

Pour ce tutoriel nous allons créer 3 fichiers :
  1. 1 fichier nommé "index.php".
  2. 1 fichier nommé "traitement.php".
  3. 1 fichier nommé "fonctions.js".
Commençons par concevoir le fichier "index.php" qui va contenir un simple formulaire de 2 champs texte, une pointe de CSS et l'appel au fichier Javascript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<title>Teste d'un formulaire AJAX</title>
<head>
<style type="text/css">
.bordure{
border:1px solid red;
margin:5px;
padding:5px;
}
</style>
<script type="text/javascript" src="fonctions.js"></script>
</head>
 
<body>
 
<form method="post" id="monform">
Pseudo : <input type="text" name="pseudo" id="pseudo" value=""/><br/>
Message : <input type="text" name="message" id="message" value=""/><br/>
Envoyer : <input type="button" value="Go" onclick="teste_ajax()">
</form>
 
<div id="mondiv">La réponse sera affiché à la place de ce texte.</div>
 
</body>
</html>
Lors du clique sur le bouton "Go" une fonction nommé "teste_ajax()" va être lancé dans le fichier "fonctions.js" et la réponse sera affiché dans la div nommé "mondiv".

Passons maintenant au fichier "fonctions.js".

La première chose que l'on met en place c'est la fonction d'instance permettant de vérifier si le navigateur supporte l'objet XMLHTTPRequest :
//Fonction d'instance permettant de vérifier si le navigateur supporte l'objet XMLHTTPRequest
function objet_XMLHttpRequest()
{
//On déclare une variable "mavariable" à null
var mavariable = null;
//Teste si le navigateur prend en charge les XMLHttpRequest
if (window.XMLHttpRequest || window.ActiveXObject){
// Si Internet Explorer alors on utilise les ActiveX
if(window.ActiveXObject){
//On teste IE7 ou supérieur
try{
mavariable = new ActiveXObject("Msxml2.XMLHTTP");
}
//Si une erreur est levée, alors c'est IE 6 ou inférieur
catch(e){
mavariable = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//Navigateurs récents (Firefox, Opéra, Chrome, Safari, ...)
else{
mavariable = new XMLHttpRequest();
}
}
//XMLHttpRequest non supporté par le navigateur
else{
alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
return null;
}
//On retourne l'objet mavariable
return mavariable;
}
Ceci fait, nous allons à présent créer la fonction "teste_ajax()". Pour bien comprendre comment elle fonctionne, je vais ajouter bout à bout les différentes parties qui la compose.
function teste_ajax(){
//Reste du code
}
Dans un premier temps on déclare un objet :
function teste_ajax(){
//On déclare une variable
var
mavariable = objet_XMLHttpRequest();

 
}
On récupère les données du formulaire :
function teste_ajax(){
//On déclare une variable
var mavariable = objet_XMLHttpRequest();
 
//récupération des données
var
pseudo = encodeURIComponent(document.getElementById("pseudo").value);
var
message = encodeURIComponent(document.getElementById("message").value);

 
}
On vérifie que les 2 champs ne soient pas vides :
function teste_ajax(){
//On déclare une variable
var mavariable = objet_XMLHttpRequest();
 
//récupération des données
var pseudo = encodeURIComponent(document.getElementById("pseudo").value);
var message = encodeURIComponent(document.getElementById("message").value);
 
//Si le pseudo est vide
if
(pseudo == ''){
//On lance une alert

alert
('Pseudo vide!');
//On stop tout

return
false;
}

//idem pour le message

if
(message == ''){
alert('Message vide!');
return
false;
}

 
}
Les contrôles effectués, on assigne une fonction à la propriété onreadystatechange dans laquelle on va définir ce que l'on va faire. Dans cet exemple, on va donc afficher la réponse dans le div nommé "mondiv" et vider le champ nommé "message" du formulaire de la page "index.php" :
function teste_ajax(){
//On déclare une variable
var mavariable = objet_XMLHttpRequest();
 
//récupération des données
var pseudo = encodeURIComponent(document.getElementById("pseudo").value);
var message = encodeURIComponent(document.getElementById("message").value);
 
//Si le pseudo est vide
if(pseudo == ''){
//On lance une alert
alert('Pseudo vide!');
//On stop tout
return false;
}
//idem pour le message
if(message == ''){
alert('Message vide!');
return false;
}
 
//On assigne une fonction à la propriété onreadystatechange
mavariable.onreadystatechange = function(){
//Si l'attribut readyState renvoie 4 et que l'attribut status renvoie 200

if
(mavariable.readyState == 4 && mavariable.status == 200){
//On affiche le résultat chargé dans l'attribut responseText qui est affiché dans un div nommé "mondiv"
document.getElementById("mondiv").innerHTML=mavariable.responseText;
//On vide le champ message

document.getElementById("message").value='';
}

}
;

 
}
Ceci fait, reste plus qu'à choisir la méthode d'envoie. Dans notre cas, on va choisir la méthode "POST" en mode asynchrone (true) sur le fichier "traitement.php".
function teste_ajax(){
 
//On déclare une variable
var mavariable = objet_XMLHttpRequest();
 
//récupération des données
var pseudo = encodeURIComponent(document.getElementById("pseudo").value);
var message = encodeURIComponent(document.getElementById("message").value);
 
//Si le pseudo est vide
if(pseudo == ''){
//On lance une alert
alert('Pseudo vide!');
//On stop tout
return false;
}
//idem pour le message
if(message == ''){
alert('Message vide!');
return false;
}
 
//On assigne une fonction à la propriété onreadystatechange
mavariable.onreadystatechange = function(){
//Si l'attribut readyState renvoie 4 et que l'attribut status renvoie 200
if(mavariable.readyState == 4 && mavariable.status == 200){
//On affiche le résultat chargé dans l'attribut responseText qui est affiché dans un div nommé "mondiv"
document.getElementById("mondiv").innerHTML=mavariable.responseText;
//On vide le champ message
document.getElementById("message").value='';
}
};
 
//On déclare la méthode d'envoie
mavariable.open("POST","traitement.php",true);
//On assigne un header

mavariable.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//On envoie

mavariable.send("pseudo="+pseudo+"&message="+message);

}
Pour rappel, quand on utilise la méthode "POST" on doit assigner un "header" en utilisant l'attribut "setRequestHeader" et les variables (si il y en a) doivent être passé par la méthode "send()".

La fonction "texte_ajax()" étant à présent terminé, on passe passe au traitement des données PHP dans le fichier "traitement.php".
Dans un premier temps, on récupère les données et on les vérifies :
<?php
//Vérification des données
$pseudo = (isset($_POST["pseudo"])) ? $_POST["pseudo"] : NULL;
$message = (isset($_POST["message"])) ? $_POST["message"] : NULL;
?>
Si vous ne connaissez pas la syntaxe PHP ci-dessus, voici ce qu'elle signifie en plus long (exemple pour la variable $speudo) :
if(isset($_POST["pseudo"])){
$pseudo = $_POST["pseudo"];
}
else{
$pseudo = NULL;
}
Comme indiqué au début du tutoriel, nous allons écrire les données du formulaire dans un simple fichier texte (fopen() - lire et écrire dans un fichier):
<?php
//Vérification des données
$pseudo = (isset($_POST["pseudo"])) ? $_POST["pseudo"] : NULL;
$message = (isset($_POST["message"])) ? $_POST["message"] : NULL;
 
//On créé une variable pour donner un nom au fichier
$fichier
= "tchat.txt";  
//On ouvre le fichier. Si il n'existe pas il sera créé automatiquement

$fichier_a_ouvrir
= fopen ($fichier, "a+");
//On écrit dans le fichier

fwrite
($fichier_a_ouvrir, '<div class="bordure">'.$pseudo.' : '.$message.'</div>');
//On ferme la connexion

fclose
($fichier_a_ouvrir);

?>
A ce stade, les données transmis par AJAX sont donc écrites dans le fichier  nommé "tchat.txt" mais rien n'est encore renvoyé... Pour afficher les données dans le div "mondiv", on va simplement ré-ouvrir le fichier "tchat.txt" et afficher son contenu par un simple "echo" :
<?php
//Vérification des données
$pseudo = (isset($_POST["pseudo"])) ? $_POST["pseudo"] : NULL;
$message = (isset($_POST["message"])) ? $_POST["message"] : NULL;
 
//On créé une variable pour donner un nom au fichier
$fichier = "tchat.txt";
 
//On ouvre le fichier. Si il n'existe pas il sera créé automatiquement
$fichier_a_ouvrir = fopen ($fichier, "a+");
//On écrit dans le fichier
fwrite($fichier_a_ouvrir, '<div class="bordure">'.$pseudo.' : '.$message.'</div>');
//On ferme la connexion
fclose ($fichier_a_ouvrir);
 
//On ouvre le fichier en lecture
$fichier_a_ouvrir = fopen ($fichier, "r");
//On lit son contenu

$contenu_du_fichier
= fgets($fichier_a_ouvrir, 1024);
//On affiche son contenu

echo $contenu_du_fichier;
//On ferme la connexion

fclose
($fichier_a_ouvrir);

?>
Et voila vous pouvez à présent tester votre code et vous verrez que le texte que vous saisissez via le formulaire sera automatiquement affiché en dessous de celui-ci sans aucun rechargement de la page .

Petit récapitulatif :

Le formulaire transmet les données à la fonction teste_ajax() qui se charge de les vérifier. Les données sont ensuite traitées par le fichier "traitement.php" qui se charge d'écrire et de renvoyer le contenu du fichier "tchat.txt". La réponse obtenu dans le fichier "traitement.php" est récupérer par la fonction "test_ajax()" qui se charge de l'afficher dans le div "mondiv" du fichier "index.php".

Ce tutoriel est théoriquement terminé mais comme vous l'avez lut jusqu'ici, voici un petit bonus qui pourrait bien vous plaire...

Si vous ouvrez la page "index.php" dans 2  pages ou 2 navigateurs différents et que vous essayez de dialoguer, que se passe t'il? Pas grand chose...le texte saisie sur une page ne s'affiche pas dans l'autre sauf si celle-ci est rafraichit! Vous voyez ou je veux en venir ...? Non ... et bien nous allons faire en sorte que le texte saisie sur une page s'affiche automatiquement sur l'autre et vis et versa comme un mini tchat  . Je vous rassure tout de suite, ça ne va pas être long et il il ni y a rien à modifier! On va juste ajouter une fonction dans le fichier "fonctions.js" qui va servir à afficher le contenu du fichier "tchat.txt" dans la div "mondiv" et demander que celle-ci soit actualisée tout les secondes :
//Fonction permettant de rafraichir le div "mondiv"
function refresh()
{
var xhr = objet_XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("mondiv").innerHTML = xhr.responseText;
}
};
xhr.open("POST","tchat.txt", true);
xhr.send(null);
}
//On lance la fonction toute les secondes
setInterval("refresh()", 1000);
Je ne vous détaille pas la fonction car vous devez à présent en comprendre son fonctionnement. Sachez juste que setInterval() permet d'appeler une fonction de manière répétée avec un délai fixé entre chaque appel.
setInterval("fonction appelé", temps en milliseconde);
Bonne éclate !
Voir/déposer un commentaire (2) | Signaler un problème