En utilisant Ajax dans un site web, un programme écrit en langage de programmation Javascript, incorporé dans une page web, est exécuté par le navigateur. Celui-ci envoie des demandes de calcul au serveur Web, puis modifie le contenu de la page actuellement affichée par le navigateur Web en fonction du résultat reçu du serveur, évitant ainsi la transmission et l’affichage d’une nouvelle page.

Voici pour la partie théorique, pour simplifier nous dirons que l’Ajax permet d’exécuter des actions côté serveur et de mettre à jour une page web côté utilisateur sans que ce dernier ne doive avoir à recharger la page, le changement se fait pour lui de manière quasi instantanée.

Pratique

Pour vous apprendre comment utiliser l’Ajax, je vais utiliser mon site Teen Quotes avec lequel j’avais déjà montré comment faire des traductions, créer un site mobile et comment traquer ses erreurs 404.

Comme nous l’avons vu, il faut pour utiliser Ajax, faire appel à du JavaScript. J’utilise la librairie jQuery qui facilite l’utilisation d’Ajax. Pour utiliser le script suivant, vous devrez donc inclure la dernière version de jQuery auparavant.

Code ajax.js

// déclaration de la fonction et des variables qui seront utilisées
function favorite(id_quote,id_user) {
	$(".favorite[data-id="+id_quote+"]").html("Wait..."); // texte que verra l'utilisateur sur l'élement HTML cible pendant l’exécution de la requête
	$.ajax({ // l'url désigne la page distante où le code PHP sera éxécuté, data désigne les variables qui seront envoyées ici en post à cette page
		type: 'post',
		url: 'http://teen-quotes.com/ajax/favorite.php',
		data: {
			id_quote: id_quote,
			id_user: id_user
		},
		success: function(data) {
			$(".favorite[data-id="+id_quote+"]").html(data);
		} // affiche un message définit dans la page PHP sur l'élément HTML ciblé quand la requête a été exécutée avec succès
	});
	
	return false;
}

J’ai bien détaillé chaque partie du code JavaScript, vous ne devriez pas avoir de mal à comprendre celui-ci.

Vous avez donc vu que nous faisons appel à une page distante, qui servira à exécuter l’action voulue puis à mettre à jour l’affichage de notre page.

Code de la page ajax/favorite.php

 
// Permet d’exécuter la page depuis un domaine extérieur ou un sous-domaine
header("Access-Control-Allow-Origin: *");

// Connexion en base de données
require "../kernel/config.php";
$db = mysql_connect($host, $user, $pass)  or die('Erreur de connexion '.mysql_error());
mysql_select_db($user, $db)  or die('Erreur de selection '.mysql_error()); 
require "../kernel/fonctions.php";

// Récupération des données envoyées par le script JS
$id_quote = mysql_real_escape_string($_POST['id_quote']);
$id = mysql_real_escape_string($_POST['id_user']);

// vérification que la requête ne provient pas d'un serveur externe
if (preg_match('/teen-quotes.com/', $_SERVER['SERVER_NAME'])) 
{
	if (empty($id_quote))
		echo 'Erreur id !';
	else
	{
		$query = mysql_query('INSERT INTO teen_quotes_favorite (id_quote, id_user) VALUES ('.$id_quote.','.$id.')');

		if ($query) 
			echo $add_succes;
		else
			echo $error;
	}
}
else
	echo ''.$_SERVER['SERVER_NAME'].'';

Encore une fois, rien de très compliqué, je pense avoir suffisamment détaillé pour que vous puissiez comprendre facilement.

Maintenant que notre Javascript va pouvoir éxécuter notre page PHP puis mettre à jour l’affichage, il ne reste plus qu’à appeler notre fonction JavaScript dans notre page de la manière suivante :

Vous devez faire en sorte que les informations que vous souhaitez envoyer à la fonction JavaScript soient dans le bon ordre, dans notre cas 900 désigne donc id_quote et 42 id_user

Pensez à bien cibler l’élément HTML dont vous souhaitez mettre à jour le contenu, une fois la requête exécutée avec succès, l’ancien contenu texte sera effacé et mis à jour par ce que vous avez défini dans votre page appelée par votre fonction JavaScript.

Vous voilà donc prêts à utiliser l’Ajax a foison, vous avez les clés en main !