Pour "faire" de l'AJAX :
1. On ajoute, dans le fichier index.php (ou dans le fichier adéquat) un DIV qui contiendra le programme...
<div id="horaires"></div>
2. On crée un fichier PHP (appelons-le
horaires.php) qui appellera la fonction.
fichier horaires.php :
// Soit on écrit la fonction directement ici,
// soit on fait un include du fichier qui contient nos fonctions.
function LireHoraires($fichier) {
..
}
LireHoraires("horaires.txt");
3. On crée un fichier Javascript (appelons-le
radio.js) qui va contenir les fonctions nécessaires à l'affichage et au rafraîchissement...
La fonction de base d'AJAX : le javascript lance une requête au serveur, et récupère le résultat (une chaîne HTML).
function file (fichier) {
if (window.XMLHttpRequest) { // FIREFOX
xhr_object = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
}
else
return (false);
xhr_object.open("GET", fichier, false);
xhr_object.send(null);
if (xhr_object.readyState == 4) {
return (xhr_object.responseText);
}
else
return(false);
}
Et la fonction qui s'occupe de faire l'affichage :
function ChercherHoraires() {
texte = "";
// On teste si on récupère bien quelque chose à partir de la requête asynchrone
if (texte = file ("radio.php")) {
//On affecte le résultat de la requête au conetnu HTML
// du bloc ayant comme ID "horaires"
document.getElementById("horaires").innerHTML = texte;
}
// On relance la fonction dans 5000 millisecondes - 5 secondes. Délai à ajuster...
setTimeout( "ChercherHoraires()",5000)
}
4. Il reste à associer le fichier javascript.
Dans l'en-tête de la page HTML, on rajoute :
<head>...
<script language="javascript" type="text/javascript" src="radio.js"></script>
...</head>
5. Surtout, il faut que la fonction ChercherHoraires() s'éxécute une première fois (ensuite, elle s'appelle régulièrement, donc le rafraîchissement se fait sans problème)
On peut, par exemple, rajouter un
onLoad au
body de la page :
<body onload="ChercherHoraires()">
Comme tu peux le voir, ce n'est pas si difficile que ça de faire de l'AJAX de base ;-)
Si tu donnes à celui qui a faim un poisson, tu le nourris pour un jour
Si tu lui apprends à pêcher, tu le nourris pour toujours.
Changer couleur texte html
