Définition d’Ajax :
Ajax (Asynchronous JavaScript and XML) est une technique utilisée dans le développement web qui permet de mettre à jour une partie d’une page web sans avoir à la recharger complètement. Cela améliore l’expérience utilisateur en rendant les interactions plus rapides et fluides.
Explication pour débutants :
Imaginons que tu remplis un formulaire sur une page web. Sans Ajax, lorsque tu cliques sur “Envoyer”, toute la page doit se recharger pour envoyer tes données au serveur et recevoir une réponse. C’est lent et pas très pratique.
Avec Ajax, tu peux envoyer ces données au serveur en arrière-plan, sans que la page se recharge. Le serveur répond, et seulement une partie de la page se met à jour, par exemple en affichant un message de succès. Tu restes sur la même page et tu n’as pas à attendre qu’elle se recharge entièrement.
Comment ça fonctionne ?
- JavaScript est utilisé pour déclencher une action, comme envoyer des données ou récupérer des informations.
- Ajax envoie la requête au serveur (sans recharger la page).
- Le serveur traite la requête et renvoie une réponse (par exemple, du texte ou des données).
- JavaScript met à jour la page avec la réponse reçue.
Exemple concret :
- Auto-complétion dans les moteurs de recherche : lorsque tu commences à taper, Ajax envoie les lettres au serveur, et celui-ci te propose des suggestions sans que la page ne se recharge.
- Formulaires dynamiques : vous remplissez un formulaire, et lorsque vous sélectionnez une option (par exemple, un pays), une liste de villes apparaît instantanément, sans recharger la page.
Pourquoi c’est utile ?
- Rapide et fluide : L’utilisateur n’attend plus le rechargement de toute la page.
- Moins de charge serveur : Seules les parties nécessaires de la page sont mises à jour.
- Meilleure expérience utilisateur : Les interactions sont plus naturelles, sans interruption.
Exemple concret : un plugin compteur de clics sur les liens
Voici un exemple simple, issu du code du plugin “Compteur de clics sur un lien” que je vous propose de télécharger ici. Ceci afin d’illustrer l’interaction entre jQuery Ajax et PHP.
1- Le script jQuery qui écoute le lien (compteur.js)
jQuery(document).ready(function($) {
// 'compteur_selecteurs_css' contient les sélecteurs injectés depuis l'admin (sous forme de chaîne)
var selectors = compteur_selecteurs_css.split(',').map(function(selector) {
return selector.trim(); // Supprimer les espaces autour des sélecteurs
});
//console.log("Sélecteurs injectés : ", selectors);
// Appliquer le traitement pour chaque sélecteur enregistré
selectors.forEach(function(selector) {
$(document).on('click', selector, function(e) {
var linkText = $(this).text();
console.log(linkText + " cliqué");
$.ajax({
url: ajaxurl, // Variable Ajax fournie par WP
type: 'POST',
data: {
action: 'enregistrer_clic',
lien: linkText
},
success: function(response) {
console.log('Clic enregistré pour : ' + linkText);
console.log('Réponse du serveur : ', response);
},
error: function(error) {
console.log('Erreur lors de l\'enregistrement du clic : ', error);
}
});
});
});
});
2- Côté PHP (fichier principal du plugin qui inclut le fichier compteur.js)
D’abord inclure le script avec le add_action “wp_enqueue_scripts” :
function compteur_enqueue_scripts() {
// Enqueue des scripts pour le front-end (compter les clics)
wp_enqueue_script('jquery');
wp_enqueue_script(
'compteur-js',
plugin_dir_url(__FILE__) . 'assets/js/compteur.js',
array('jquery'),
'1.0.0',
true
);
// Passer l'URL d'Ajax pour le front
wp_localize_script('compteur-js', 'ajaxurl', admin_url('admin-ajax.php'));
//voir explications ci dessous
}
add_action('wp_enqueue_scripts', 'compteur_enqueue_scripts');
Définition de wp_localize_script
wp_localize_script est une fonction de WordPress qui permet de passer des données PHP dans un fichier JavaScript. C’est utile lorsque vous voulez que votre fichier JavaScript ait accès à certaines informations dynamiques générées par PHP, comme des URL, des textes, ou des options personnalisées.
Explication simple pour débutants
Imaginons que vous ayez un fichier JavaScript dans votre site WordPress qui fait des actions, mais vous avez besoin de lui transmettre des informations spécifiques, comme :
- L’URL d’Ajax pour communiquer avec WordPress.
- Des options configurées dans l’administration.
- Des traductions ou du texte à afficher dans le script.
Avec wp_localize_script, vous pouvez envoyer des informations PHP à votre fichier JavaScript, même si JavaScript et PHP ne “parlent” pas directement.
Continuons notre exemple. Dans le code javascript de compteur.js, on collecte une information à chaque fois qu’un utilisateur clique sur un lien doté de la classe “compte-lien”. On passe en suite le nom du paramètre (ici ‘lien’) et la valeur (le texte du lien) à la fonction PHP ‘enregistrer_clic” qui va la réceptionner et l’enregistrer dans une table de données MySQL
// Fonction pour enregistrer les clics via Ajax
// Associer l'action AJAX pour les utilisateurs connectés et non connectés
add_action('wp_ajax_enregistrer_clic', 'enregistrer_clic');
add_action('wp_ajax_nopriv_enregistrer_clic', 'enregistrer_clic'); // Pour les utilisateurs non connectés
function enregistrer_clic() {
global $wpdb;
// Vérifier si le paramètre 'lien' est présent dans la requête POST
if (isset($_POST['lien'])) {
$lien = sanitize_text_field($_POST['lien']); // Nettoyer le texte reçu
$table_name = $wpdb->prefix . 'compteur_liens';
// Vérifier si le lien existe déjà dans la table
$result = $wpdb->get_row($wpdb->prepare("SELECT * FROM $table_name WHERE lien = %s", $lien));
if ($result) {
// Si le lien existe, incrémenter le compteur de clics
$wpdb->update($table_name, array('clics' => $result->clics + 1), array('lien' => $lien));
} else {
// Sinon, insérer un nouveau lien avec un compteur à 1
$wpdb->insert($table_name, array('lien' => $lien, 'clics' => 1));
}
wp_send_json_success('Clic enregistré');
} else {
// Retourner une erreur si le paramètre 'lien' est manquant
wp_send_json_error('Paramètre "lien" manquant');
}
}
Voyons en détail ces 2 lignes sans lesquelles rien ne pourrait fonctionner.
add_action('wp_ajax_enregistrer_clic', 'compteur_enregistrer_clic');
add_action('wp_ajax_nopriv_enregistrer_clic', 'compteur_enregistrer_clic');
add_action('wp_ajax_enregistrer_clic', 'compteur_enregistrer_clic'): Cette action permet aux utilisateurs connectés d’envoyer une requête Ajax vers WordPress pour exécuter la fonctioncompteur_enregistrer_clic.add_action('wp_ajax_nopriv_enregistrer_clic', 'compteur_enregistrer_clic'): Cette action permet aux utilisateurs non connectés (visiteurs anonymes) d’envoyer une requête Ajax pour exécuter la même fonctioncompteur_enregistrer_clic.
Comme vous le voyez, le second paramètre est le nom de la fonction qui va faire le travail, à savoir ‘compteur_enregistrer_clic’. La fonction va recevoir le texte du lien ($_POST[‘lien’]) et vérifier dans la table SQL wp_compteur_liens si ce texte de lien existe déjà (dans ce as on ajoute +1 clic) ou non (dans ce cas on insère).
Conclusion
Vous avez mainetnant les bases de l’interaction AJAX => PHP dans un environnement WordPress.