Dans cette page
Plus de scripts

Une pause dans l'éxécution des scripts : Une implémentation de delay en javascript, pour suspendre l'exécution des scripts.

script suivant - tous les scripts
Gardons le contact
Souternir webbricks
- ¿ Comment donc ?

script

javascript

php

css

Traiter des requêtes ajax avec un minimum de code.

L'AJAX FACILE

script : AjReq v1.1
langage : javascript
catégorie : module
usage : Traiter des requêtes ajax avec un minimum de code.
tags : technique

Concept

L'ajax est une technique de développement web qui permet d'échanger des données avec le serveur sans avoir à recharger la page entière. Cette méthode permet notamment de rendre beaucoup plus dynamiques des interfaces web.

AjReq facilite l'exécution et le traitement de requêtes ajax.

Il permet, avec très peu de code :

d'interroger un fichier sur le serveur et de lui soumettre des paramètres
de traiter des réponses de type html, xml ou json
de mettre à jour le contenu d'un ou plusieurs élément(s) html en fonction de cette réponse
d'exécuter des script au moment de la réponse
et plus encore, grâce à différentes options et méthodes.

Démo

Ci-dessous, le premier menu présente la liste des continents. Le deuxième donne la liste des pays du continent sélectionné.
Lorsque la sélection du premier menu est modifiée, la liste du second est rechargée (en toute fluidité) grâce à AjReq.

Code

Déjà, ne pas oublier de charger AjReqb

<script src="AjReq.min.js" type="text/javascript"></script>

Puis instancier l'objet AjReq.

var test = new AjReq();

On entre alors dans le vif du sujet.
Pour envoyer une simple requête au serveur, sans se soucier de la réponse, on utilise la méthode AjReq.send(), avec comme argument l'url de la page à charger.

test.send('un_script.php');

Une série d'options permet ensuite d'en faire beaucoup plus. Les options devront être déclarées sous la forme d'un tableau associatif, et passées comme deuxième argument de la méthode send().

var options = {
  option_1 : valeur_1,
  option_2 : valeur_2,
  option_n : valeur_n
};
test.send('un_script.php', options);

Les options disponibles sont listées plus bas, mais voici un exemple d'une requête un peu plus complexe.

var options = {
	method : 'POST',
	params : 'nom=dupont&prenom=jean',
	update : document.getElementById('machintruc'),
	abortAfter : 10000,
	onAbort : function(){ alert('la requête a été abandonnée'); }
};
test.send('un_script.php', options);")

Ici, on interroge un script php. On lui transmet plusieurs paramètres par méthode POST. Puis on intègre le résultat retourné dans un élément html. Mais, dans le cas ou le serveur n'aurait pas répondu au bout de 10 secondes, on annule la requête et on avertit l'utilisateur.

Méthodes et Options

Méthodes

send(url[, options])	traite une requête ajax, adressée au fichier désignée par `url`, avec les options `options` string `url` l'adresse url du fichier à interroger. object `options` (optionnel) les options de traitement de la requête. les options disponibles sont listées plus bas.
abort()	annule la requête en cours.
getErrorLog()	retourne un rapport sur l'état de la requête XmlHttpRequest.
send(targets, content)	insère le texte `content` dans le ou les éléments html désigné(s) par `targets`. mixed `targets` un élément html ou une collection d'éléments html. par exemple `documents.getElementById('truc')` ou `document.getElementsByName('machin')` content `string` le texte à insérer. Il peut bien sûr sagir de code HTML.

Options

options	type	description	par défaut
async	boolean	indique si la requête XmlHttpRequest sera de type asynchrone ou non. (En pratique, ce sera toujours `true`)	true
encType	string	type de contenu	application/x-www-form-urlencoded
encoding	string	encodage des caractères	utf-8
forceMime	string	permet de forcer à interpréter la réponse selon un type mime donné. parfois utile quand le fichier interrogé ne retourne par de type mime.	null
méthod	string	méthode de transmission des données ( 'GET'\|'POST'\|'HEAD' )	GET
params	string	arguments transmis par http au fichier interrogé. sous la forme : `var1=val1&var2=val2` etc.	null
abortAfter	integer	délai avant abandon de la requête XmlHttpRequest (en millisecondes)	5000
onAbort	function	fonction callback en cas d'abandon de la requête XmlHttpRequest	function () {}
onSuccess	function	fonction callback en cas de succès de la requête XmlHttpRequest	function () {}
update	mixed	élément ou collection d'éléments à mettre à jour en cas de succès. (par exemple `documents.getElementById('truc')` ou `document.getElementsByName('machin')`) le ou les éléments reçoivent pour nouveau innerHTML la réponse retournée par le serveur.	null