Gularu.fr

• Tweet

JavaScript pour les nuls – de A à Z

Commençons par le commencement.

L’Ajax est l’ensemble de deux choses : du JavaScript et des requêtes ajax (pas de rechargement de page). Le JavaScript sert à lancer les requêtes selon l’action réalisée par l’utilisateur.
Téléchargez Firebug et développez sous Firefox, les requêtes ajax sont visibles avec ce plugin.
Nous partons du principe que vous savez coder proprement une structure xHTML. Nous utiliserons le framework Prototype pour simplifier le code.

INSTALLATION
Voir http://www.gularu.fr/blog/?p=165

CODE
Tous les codes présents ci-dessous sont codés dans le langage javascript donc présent entre les balises

<script type="text/javascript">
et
</script>

SEPARER LE PHP, LE JS et LE CSS
Un bon codeur est un codeur qui sépare bien son css (feuille de style séparées), son code php et les actions JS (par un fichier JS à part appelé dans le head). C’est dans cette vision qu’à été développé Prototype donc nous le ferons.

LES EVENTS
Lorsqu’une action type est réalisée par un internaute, elle prendra la forme d’un objet appelé Event. C’est un événement. Par exemple, un clic est un événement.
Il faut savoir que le navigateur ne gère pas tout seul ces événements (sauf le clic sur un lien par exemple) et il faut donc mettre un écouteur sur les éléments qui doivent réagir. Un écouteur, c’est comme un détecteur de mouvements : sans mouvement, il ne se passe rien. Lorsqu’un mouvement est détecté, un événement est créé : la lumière est allumée.

Pour créer un événement :

new Event.observe("logo","click", function(evt) {
	alert("Vous avez cliqué sur le logo") ;
}) ;

Pour des raisons de mémoire, il faut écrire le new, sinon il y a des pertes inutiles de performance. On crée donc un objet Event. Cet objet possède plusieurs fonctions toutes prêtes à être utilisées qui sont présentes dans le framework prototype. Ce sont des fonctions que l’on appelle « méthode ». La méthode pour créer un écouteur se nomme « observe ». Il prend en paramètre l’id de l’élément, le type d’événement et la fonction à lancer quand le type d’événement est rencontré sur l’id précisé.

Il y a plusieurs types d’événements possibles avec prototype :
click : au click
change: au changement de valeur (sur un select par exemple)
focus: au focus sur un champ de texte par exemple
mouseover : au survol sur l’élément
mouseout : lorsque l’on quitte le survol de l’élément
submit : lorsque l’utilisateur valide le formulaire (par un click sur le bouton valider ou envoyer ou même lorsqu’il fait entrée pour valider son formulaire)

LES REQUETES AJAX
Maintenant que nous avons une méthode qui va écouter notre action, nous pouvons lancer une requête AJAX en conséquence.
Une requête AJAX, c’est comme un rechargement de page sauf que cela recharge une partie de la page en cours.
Vous comprendrez bien donc que les paramètres de la méthode seront au minimum la page PHP appelée pour chercher les infos demandées et peut-être la cible de cet appel (voir ci-dessous).

Il y a deux méthodes pour réaliser une requête AJAX avec prototype :
Updater : cette méthode va réaliser l’appel et va afficher le résultat dans la div dont l’id est fourni.
Request : cette méthode va réaliser l’appel mais rapatrie juste les données, on ne définit pas la cible de l’appel. Utilisé par exemple si vous avez un test à faire sans conséquence sur la page du visiteur.

Updater prend en paramètres l’id de destination pour le résultat, l’url de la page php appelée et enfin les options facultatives.
Request prend juste l’url de la page php et les options.

Pour créer une requête:

new Ajax.Updater("multipleVideo", "xhr/xhr_rechercher.php", {
	method: 'post',
	parameters :"type=2",
	evalScripts: true
});

Des options sont donc disponibles, elles sont entre crochets. Method pour choisir la method PHP d’envoi, soit en POST ou en GET. Parameters, attention, en POST et en GET cette option s’écrira toujours pareil, la première variable sans « & » puis les autres avec un « & » devant, comme pour les réceptions de variable GET sur une page PHP normale. N’oubliez pas l’égal après chaque nom de variable. EvalScripts sert pour dire qu’il faudra exécuter le javascript présent dans la page PHP appelée. Par défaut, cette option est à false ! Il y a d’autres options, à vous de découvrir leur utilité avec l’API du framework prototype (http://www.prototypejs.org/api).
Respectez bien la casse du code sinon cela ne marche pas : tout en minuscule sauf lorsque la méthode comprend deux mots sémantiques du genre eval scripts > evalScripts. Egalement important les virgules ! Regardez bien, après chaque paramètre en option, on met une virgule, la dernière ne possède pas de virgule. evalScript se met généralement en dernier.

Maintenant, additionnons les deux savoirs que nous venons d’assimiler :

new Event.observe("logo","click", function(evt) {
	new Ajax.Updater("logo", "xhr/xhr_logoChange.php", {
		method: 'post',
		parameters :"type=2",
		evalScripts: true
	});
});

Ici, au clic sur le logo, nous lançons la page xhr_logoChange.php et nous mettons le résultat de cet appel dans la div avec l’id logo.

STOPPER L’EVENT
Lorsque nous lançons une action en JS sur une action déjà traité automatiquement par le navigateur, il ne faut pas oublier de stopper l’Event produit par le navigateur. Quoi ? lol. En gros, lorsque que vous mettez par exemple un écouteur sur le clic sur un lien hypertexte, le navigateur va d’abord aller sur la cible du lien avant de traiter votre code JS. De même avec un formulaire. Il faut donc stopper l’Event.

Imaginez un formulaire, vous voulez vérifier qu’un champ est rempli. Seulement si l’utilisateur clique sur envoyer, le formulaire sera envoyé et la page sera rechargée. D’où l’intérêt de mettre un petit stop Event pour empêcher l’envoi du formulaire, vous l’enverrai après les vérifications.

new Event.observe("formulaire","submit", function(evt) {
	// On stoppe l’évènement
	new Event.stop(evt);
 
	//On fait les vérifications et on envoie le formulaire
});

Pour faire les vérifications, il faut récupérer les valeurs des champs du formulaire. Prototype a encore tout prévu :

DESIGNER UN OBJET
Pour désigner un objet, il faut connaître seulement son identifiant (le champ « id »).
Exemple :

<div id="divTest"></div>
<img id="imgTest" src="images/images.gif" alt="image" />
<form id="formTest">
	<input id="login" name="login" type="text" value="" />
</form>

Pour designer un objet présent dans le DOM (la structure xHTML de la page) :

var champLogin = $("login");
// Maintenant vous avez accès à tous les paramètres de l’objet
var valueLogin = champsLogin.value ; // Valeur du champ
var idLogin = champsLogin.id ; // Id de l’objet
// Autres exemples fictifs
var checkedMajeur = champsMajeur.checked ; // Pour vérifier l'état d'une case à cocher

Maintenant si vous voulez tester si le champ n’est pas vide avant l’envoie, il vous reste donc à faire :

new Event.observe("formulaire","submit", function(evt) {
	// On stoppe l’évènement
	new Event.stop(evt);
 
	//On fait les vérifications et on envoie le formulaire
	var valueLogin = champsLogin.value ; // Valeur du champ
	if (valueLogin != "") {
		// On envoie si le champ n’est pas vide
		new Ajax.Updater("LogOk", "xhr/xhr_connexion.php", {
			method: 'post',
			parameters :"login="+valueLogin,
			evalScripts: true
		});
	}
});

Comme je vous l’ai déjà dit, le mieux c’est de séparer le JS de la page PHP. Cependant, imaginons que ce formulaire n’est présent que sur une seule page, il y aura une erreur JS qui va être créée sur les autres pages sans ce formulaire car lorsque l’id sera recherché, il ne le trouvera pas : une erreur bloquera toute la suite du code JS. (Voir utilisation de firebug).

Pour éviter cela, il suffit de faire un petit test avant de lancer le tout :

// Si le formulaire html est présent
if ($("formulaire")) {
	new Event.observe("formulaire","submit", function(evt) {
		// On stoppe l’évènement
		new Event.stop(evt);
		//On fait les vérifications et on envoie le formulaire
		var valueLogin = champsLogin.value ; // Valeur du champ
		if (valueLogin != "") {
			new Ajax.Updater("LogOk", "xhr/xhr_connexion.php", {
				method: 'post',
				parameters :"login="+valueLogin,
				evalScripts: true
			});
		}
	});
}

N’hésitez pas à mettre un commentaire, ou à me demander un renseignement, l’ajax n’est pas très difficile si l’on trouve les bonnes informations.