Utilisez l’ajax grâce à jQuery pour dynamiser vos pages

Depuis l’apparition de toutes les applications web que l’on peut trouver sur le net, l’Ajax s’est imposé comme une technique extrêmement pratique et utile pour simplifier les interfaces utilisateurs. Ce cours a pour but d’expliquer aux débutants ce principe et son utilisation à travers un petit exemple.

A. L’AJAX ET L’OBJET XHR

1) Présentation du concept de l’Ajax

Tout d’abord, il faut savoir que l’Ajax n’est pas un langage, ça signifie Asynchronous JavaScript & XML. C’est une méthode de développement qui permet d’établir une communication client/serveur sans recharger la page. Concrètement, sans ajax, lorsque nous avons besoin de traiter des données par le serveur (envoi de mail, connexion utilisateur, récupération d’articles pour les blogs/news etc), il faut passer par une page php pour exécuter son script. Grâce à l’Ajax, il suffira de créer un script JavaScript qui va lancer une requête XHR vers cette page php et réagir en fonction de la réponse, et tout ça sans rafraichissement de page. Ce sont des requêtes asynchrones.

2) Qu’est ce que l’objet XHR ?

L’objet XMLHttpRequest est un objet JavaScript implémenté dans les navigateurs depuis IE5, Mozilla 1.0 etc… Cependant, il n’est pas utilisable de la même façon entre ces navigateurs et c’est pour cette raison que l’utilisation de librairie de haut niveau permet de s’abstraire des contraintes des navigateurs.

Lors de l’envoi d’une requête XHR, des codes sont retournés ce qui permet d’avoir la connaissance de l’état de la requête et du retour des informations, et réagir lorsque la réponse est arrivée.

Je cite pour avoir une idée un script de wikipedia pour déclarer un nouvel objet XHR, mais l’objectif de ce cours est de montrer son utilisation à travers jQuery :

function createXhrObject()
{
    if (window.XMLHttpRequest)
        return new XMLHttpRequest();

    if (window.ActiveXObject)
    {
        var names = [
            "Msxml2.XMLHTTP.6.0",
            "Msxml2.XMLHTTP.3.0",
            "Msxml2.XMLHTTP",
            "Microsoft.XMLHTTP"
        ];
        for(var i in names)
        {
            try{ return new ActiveXObject(names[i]); }
            catch(e){}
        }
    }
    window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");
    return null; // non supporté
}
xhr = createXhrObject();

B. L’AJAX AVEC JQUERY

1) Les deux méthodes GET et POST pour communiquer avec le serveur

Lors de développements classiques hors Ajax, tout envoi de données vers le serveur ou de récupération de données à partir de celui-ci passe par une méthode GET ou POST. Ces deux méthodes fonctionnent sur la communication client-serveur, seul la façon de l’envoyer est différente. Toujours dans un cas hors Ajax, les développeurs préfèrent la méthode POST qui envoie des données sans que cela soit visible dans l’url de la nouvelle page. L’inconvénient est que la page appelée ne peut être rechargée sans ces données, ce qui peut entrainer une duplication de la requête si l’utilisateur actualise. La méthode GET elle, affiche dans l’url les données et les noms de variables, ce qui pose un problème de sécurité. Par exemple, index.php?page=contact indique que le site utilise la variable page et lui donne comme valeur « contact ».

En Ajax, la requête est effectuée après le chargement de la page, sans rechargement. Les deux méthodes POST ou GET sont donc invisibles dans l’url. Par principe, l’utilisation de POST est préférée. En effet, la méthode GET en Ajax est préférée pour récupérer une donnée lorsque tout le reste est prêt à fonctionner. Par exemple, on peut demander en GET les noms des formulaires, une photo, un lien etc. De l’autre côté, la méthode POST est préférée pour envoyer des données que le serveur devra traiter et non simplement exécuter. Dans notre cas, nous allons l’utiliser pour traiter les données saisies dans le formulaire, puis envoyer le mail, et ensuite renvoyer un message d’accusé que nous interprèterons.

2) jQuery et ses méthodes $.get() et $.post()

La puissance de jQuery est encore une fois très pratique. La librairie contient plusieurs méthodes utiles pour de l’ajax, dont deux particulières qui sont get() et post(). Comme leur noms l’indiquent, la première est à utiliser pour une requête GET et la seconde pour une requête POST.

Ces fonctions prennent plusieurs paramètres :

  1. l’url de la page à laquelle nous faisons appel.
  2. Optionnel, un objet de paramètres à envoyer à la page distante
  3. Optionnel, une fonction de callback éventuelle, c’est à dire l’action à exécuter quand on obtient un retour
  4. Optionnel, le format de donnée de retour qu’on attend : xml, json..

Par exemple, nous souhaitons charger le footer de notre page de manière asynchrone, pour éviter de rallonger le chargement initial de la page. Comme celui-ci ne prend aucun paramètres, nous pouvons utiliser la méthode GET. Nous écririons, pour récupérer son contenu :

var footer = $.get("footer.php");

A l’inverse, si nous avions un formulaire de connexion avec un champ nommé « login » et un autre « password », et que nous souhaitions vérifier et connecter l’utilisateur en Ajax, nous pourrions utiliser la méthode POST et dans une fonction callback afficher une alerte javascript du contenu de la page php :

var donnees = {
	login: "admin",
	password: "motdepassehypercomplique"
};
$.post("page_php_qui_verifie_si_lutilisateur_est_inscris_dans_la_base.php", donnees,
	function success(data){
		alert(data);
	}
);

La page PHP traite les variables qu’elle reçoit, vérifie si l’utilisateur existe, et fais un echo « Utilisateur connu ! » si l’utilisateur est bien enregistré. C’est ce qui est retourné au javascript dans la variable data.
Cela nous affiche donc si l’utilisateur est connu une alerte « Utilisateur connu ! ».

C. CRÉATION D’UN FORMULAIRE D’ENVOI DE MAIL EN AJAX

Nous allons créer un formulaire d’envoi qui envoie un mail sans changer de la page du formulaire, et, si l’envoi est bon, affiche une alerte javascript.

1) Le formulaire en HTML

Il faut bien sur un template HTML de formulaire.

<form action= »javascript:formulaire_de_contact(); » method= »post »>
<input id= »email » type= »text » value= »adresseemaildetest@test.fr » />
<input id= »message » type= »text » value= »Message a envoyer » />
<input type= »submit » value= »Envoyer » />
</form>

Nous mettons ici des id « email » et « message », que nous utiliserons après. Il y a plusieurs méthodes pour écouter l’envoi du formulaire, ici nous choisissons la méthode rapide de définir dans la balise action du formulaire le lancement d’une fonction javascript.

2) La partie serveur : code PHP

Nous mettons sur le serveur un script php que nous appelerons grâce à une requête Ajax. Celui-ci reçoit des données en POST, les traites, envoi le mail, et affiche un message que nous récupérerons en JavaScript.

var donnees = {
	login: "admin",
	password: "motdepassehypercomplique"
};
$.post("page_php_qui_verifie_si_lutilisateur_est_inscris_dans_la_base.php", donnees,
	function success(data){
		alert(data);
	}
);


Ce script affiche donc si le mail est bien envoyé le texte « Message envoyé ». Bien sur, nous verrons à la fin comment réaliser des vérifications ainsi que sécuriser un peu plus les variables.

3) La partie Client : le code JavaScript/jQuery

Maintenant que notre page HTML est complète, et que le serveur est prêt à recevoir des données, nous passons au développement de la partie cliente, et de l’appel Ajax.
Je rappelle que la fonction est appelée lorsque le visiteur clique sur le bouton Envoyer. Les champs sont donc théoriquement remplis.
La première étape est de récupérer les valeurs de ces champs.
En Javascript classique, cela pourrait se révéler fastidieux. Mais jQuery nous permet de raccourcir et d’utiliser les sélecteurs css, ainsi que la méthode val(), permettant de récupérer le contenu.

function formulaire_de_contact() {
// Javascript classique
var email_saisi = document.getElementById('email').value;
var message_saisi = document.getElementById('message').value;

// avec jQuery
var email_saisi = $("#email").val();
var message_saisi = $("#message").val();
}

Maintenant que nous avons récupéré le contenu, il faut l’envoyer au serveur et donc à la page mail.php pour permettre d’envoyer le mail. C’est ici que nous utilisons la méthode POST. Egalement, nous allons placer dans un objet de données les variables des champs textes pour pouvoir le passer en deuième paramètre de la méthode post() de jQuery.

function formulaire_de_contact() {

var email_saisi = $("#email").val();
var message_saisi = $("#message").val();

var donnees = {
	email: email_saisi ,
	message: message_saisi
};

$.post("mail.php", donnees,
	function success(data){
		alert(data);
	}
);

}

Ici, nous voyons en oeuvre la méthode post. On passe à la page mail.php l’objet « donnees » qui contient les valeurs des champs. Ensuite, si l’appel est bien parti, nous passons dans la fonction de callback success() avec comme paramètre « data », qui est ce que renvoie la page PHP (ne pas changer le nom de cette variable). Pour faire simple, nous allons simplement afficher dans une alertbox ce que retourne le serveur, d’où l’utilité d’avoir écris un message clair dans la page PHP.

Voila ! Nous avons créé un formulaire de contact en Ajax, qui affiche un message suivant si le mail à bien été envoyé ou non !

4) Extensions possibles du script

Le script, vous l’avez vu, est extrêmement simple. Côté serveur, l’ajout de vérification sur le contenu des variables POST est très important pour ne pas qu’il interprète du code, ni que les valeurs ne soient pas celles que l’on attends. Côté client, une vérification de ce qui est saisi dans les champs (est-ce vraiment une adresse mail? taille du champ, numérique/texte.. etc) est indispensable pour éviter le rechargement inutile de la page pour afficher un message d’erreur et délaisse le serveur de ces actions.
Pareillement, pour éviter les doublons, retirer le formulaire pour afficher un message est pratique, cela ajoute du dynamisme au site web.

D. INTEGRATION DU SCRIPT DANS UNE CLASSE JAVASCRIPT

La programmation objet est une référence en la matière et permet de manipuler des élements de script très simplement et d’une façon claire. Nous allons voir maintenant comment intégrer le script précédent dans une classe JavaScript.

1) JavaScript et la programmation orientée objet

En JavaScript, tout est objet. Vous le voyez lorsque pour chaque élement vous pouvez faire appel à sa valeur (element.value) ou à tout autre attribut ou méthode (element.parseInt(), document.write(), etc..).

Cependant, dans la notion de POO sur les autres langages se trouve la notion de visibilité des variables. Il faut savoir qu’en JavaScript, tout est public. En effet, il n’y a pas de nuance comme en PHP ou Java sur le caractère « privé », « protégé » des variables. Cette contrainte impose une grande rigueur lors des développements, et ne jamais modifier manuellement une variable (possible techniquement, mais déprécié face à l’utilisation des accesseurs).
De même, la façon de déclarer une méthode ou un attribut peut différer selon les développeurs. Une grande liberté est laissée. Nous le verrons par la suite.

2) Création de la classe « contactForm »

Nous allons maintenant créer une classe « ContactForm » afin de décrire les limites du système d’envoi de mail.

Pour déclarer une classe, nous faisons appel au mot-clé « function ». Nous définissons les attributs pageMail et donnees, le second étant un objet vide des données à envoyer au serveur, tel que nous le ferions dans une fonction.

function contactForm() {
     this.pageMail = "mail.php";
     this.donnees = {};
};

Nous allons créer deux méthodes, de deux manières différentes. La première est définie lors de la déclaration de la classe, dans cette même partie de code. Pour cela, nous allons faire comme pour les attributs une nouvelle ligne « this.methode » mais en définissant sa valeur comme étant une fonction. Cela donne :

function contactForm() {
     this.pageMail = "mail.php";
     this.donnees = {};

     this.recupereValeursFormulaire = function() {
            this.donnees = {
	       email: $("#email").val() ,
	       message: $("#message").val()
           };
        this.lanceRequeteAjax();
     };

     this.lanceRequeteAjax = function() {
          $.post("mail.php", this.donnees,
	     function success(data){
              	alert(data);
           });
      };

};

Maintenant que nous avons créé une première méthode, nous allons voir comment créer une seconde, grâce au prototype de la méthode, disponible dans toute classe JavaScript. En ajoutant simplement le nom de la méthode à ce prototype, celui ci va modifier la classe et ajouter la méthode définie.

contactForm.prototype.lanceRequeteAjax = function() {
          $.post(this.pageMail , this.donnees,
	     function success(data){
              	alert(data);
           });
};

Maintenant que nous avons tous les élements que nous souhaitons, voici le code final de cette classe. Il faut bien évidemment changer dans le template HTML le handler du formulaire, en définissant la balise action de form a « contact.recupereValeursFormulaire ». Libre à vous ensuite d’ajouter des méthodes pour lancer l’écoute, de rajouter tout un tas d’évènements sur le formulaire..

function contactForm() {
     this.pageMail = "mail.php";
     this.donnees = {};

     this.recupereValeursFormulaire = function() {
            this.donnees = {
	       email: $("#email").val() ,
	       message: $("#message").val()
           };
        this.lanceRequeteAjax();
     };

     this.lanceRequeteAjax = function() {
          $.post("mail.php", this.donnees,
	     function success(data){
              	alert(data);
           });
      };
};

// on ajoute une méthode
contactForm.prototype.lanceRequeteAjax = function() {
          $.post(this.pageMail , this.donnees,
	     function success(data){
              	alert(data);
           });
};
// on instancie notre classe pour créer notre formulaire
myform = new contactForm(); // et on instancie la classe !

Voila ! Nous avons fini ce cours. Nous avons vu au début le concept de l’Ajax, puis la méthode appliquée pour l’utiliser à jQuery. Ensuite, nous avons créé à titre d’exercice un script d’envoi de mail en ajax. Finalement, nous l’avons transformé en classe JavaScript pour pouvoir avoir un objet délimité et extensible à souhait.
Ce cours s’est inspiré de mon développement sur le formulaire de contact de mon site www.flxcreations.fr/contact/ et est distribuable seulement avec un lien vers ce blog.