Comment rafraichir qu'une partie de page web

Comment rafraichir qu’une partie de page web

20 novembre 2017
Posted by jmcrea

Dans ce tutoriel, nous allons voir comment rafraichir qu’une partie de page web de manière simple.

Comme vous l’avez déjà vu, il existe de plus en plus de sites Internet qui utilisent cette fonction. Exemple : vous cliquez sur un lien présent sur le site, et seulement une partie du contenu se charge. La page en elle-même ne se recharge pas entièrement.

Dans bien des cas, ce « mécanisme » peut s’avérer pratique pour l’internaute qui visite votre site, même si parfois ça parait compliqué à mettre en place pour le développeur.

Vous allez voir que c’est relativement simple à mettre en place.

Passons à la pratique

Dans un premier temps, nous allons créer 2 fichiers. Le premier sera la page normale et le second sera la page qui sera appelée lors d’un clic.

Pour le premier fichier : nous allons l’appeler index.php et nous allons appeler la bibliothèque jquery et un petit peu de javascript comme ceci :

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<script>
$(document).ready(function () {
$("#actualisez_moi").load("rand.php", {
});
var refreshId = setInterval(function () {
$("#actualisez_moi").load("rand.php", {
});
}, 2000); //Touts les 2 secondes le div sera actualisé
$.ajaxSetup({
cache: false
});
});
</script>
<div id="actualisez_moi">Merci de patienter ...</div>
</body>

On récapitule :
– 1 On appel la bibliothèque jquery dans les balises head
– 2 On appel la fonction javascript dans le body
– 3 On place le div dans le body

Pour le deuxième fichier : nous allons l’appeler rand.php et nous allons mettre ce que l’on veut dedans. Dans cet exemple, nous allons générer des nombres aléatoires de 0 à 9999. Vous pouvez bien sûr y mettre ce que vous voulez.