Utilisation avancée de l’AJAX avec Mootools

Pourquoi faire plus fort

Le 15 Juin dernier j’écrivais mon premier article concernant l’utilisation d’AJAX dans les formulaire grâce à Mootools.

Aujourd’hui j’ai décidé de vous donner des compléments sur ce sujet en vous livrant les secrets de l’utilisation complète des objets Request et Request.HTML de Mootools.

A la fin de cet article vous serez capable d’intercepter les erreurs (404, 500, etc.), de charger des pages XML puis les traiter en Javascript, de charger des bouts de pages HTML (avec ou sans Javascript) et de charger des scripts Javascript depuis des fichiers. Vous découvrirez aussi dans quel ordre sont exécuté les évènements (request, complete, success, etc.) d’une requête AJAX.

Format d’utilisation

Création d’une requête

var myRequest = new Request([options]);
myRequest.send();


Envoi d’un formulaire

$('mon_form').set('send', [options]);
$('mon_form').send();


Options

url(string) -> Le fichier à charger. (Pas nécessaire pour un formulaire grâce à l’attribut action)

method(string) -> ‘post’ ou ‘get’ (Pas nécessaire pour un formulaire grâce à l’attribut method)

data(string) -> Données à envoyer (ex : ‘nom=Olivier&prenom=PEREZ’)

async(bool) -> Défini si la requête est synchrone ou non (défaut: synchrone->false)

encoding(string) -> Choisir l’encodage de la requête (défault : ‘utf-8’)

headers(object) -> Ajouter des entêtes à la requête (ex : {‘last-hello’:’1988-12-13′, ‘best-number’:’13’})

evalScripts(bool) -> Défiini si le javascript dans la réponse doit être exécuté (défaut : false)

evalResponse(bool) -> Définir à true lorsque vous voulez charger un fichier Javascript (défaut : false)


Evenements

onRequest() -> Invoquée à l’envoi de la requête

onComplete() -> Invoquée à la réponse du serveur

onCancel() -> Invoquée lorsque que la requête est annulée

onSuccess(responseText, responseXML) -> Invoquée lors d’un succès

onFailure(xhr) -> Invoquée lors d’une erreur (ex : 404)


Exemples

var myRequest = new Request({
	url: 'nouvelle-naissance.php',
	method: 'post',
	data: 'jour=13&mois=12&annee=1988',
 
	onRequest: function(){
		alert('Naissance envoyé au serveur, veuillez patienter.');
	},
	onComplete: function(){
		alert('Le serveur a répondu');
	},
	onFailure: function(xhr){
		alert('Erreur de type '+(xhr.status)+' lors de la connection au serveur');
	},
	onSuccess: function(responseText, responseXML){
		alert('Le serveur vous a répondu : '+responseText);
	}
});
myRequest.send();

D’autres exemples sont accessibles dans mon laboratoire à l’adresse suivante : http://exemple.experience-developpement.fr/form-ajax-advanced/

noCache
Tagués avec : , ,
Publié dans Mootools

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*