Oui bien sûr et puisqu’il faut bien commencer quelque part, je vais commencer par le module Ajax !
Ce module reprend la technologie des XMLHttpRequest en y ajoutant des événements, propriétés et méthodes permettant une utilisation plus aisée de cette technologie.
Je vais essayer par la suite de décrire les principales fonctions de ce module et vous invite à voir le code source en suivant le lien ci-dessous : http://dynamique.malloc.fr/
Tout commence par la création d’une requête. Celle-ci se fait par la fonction Ajax.createRequest().
Cette nouvelle requête est toujours créée via le modèle défini de base par le module et modifiable grâce à des fonctions que nous étudierons plus tard.
A noter que les modules sont prévus pour fonctionner avec ou sans Dynamique (donc avec ou sans l’importation de Dynamique.js). Dans le premier cas, Ajax se situera dans window.Ajax, sinon elle se trouvera dans la librairie, soit au chemin : window.Dynamique.module.Ajax.
Il est possible de personnaliser directement les paramètres d’une requête lors de sa création, et ceci de plusieurs manières :
- Soit en utilisant un objet, chaque propriété de celui-ci va alors être copiée dans l’objet de la requête :
Ajax.createRequest({ url : "test.html", format : "html", ... }); // Le modèle une fois copier pour créer notre nouvelle requête sera étendue des propriétés url et format
- Soit en indiquant juste une chaine de caractères, la propriété portant ce nom va alors être supprimée :
Ajax.createRequest("url"); // La propriété url de notre requête créé depuis le modèle est supprimée
- Soit en indiquant deux arguments, tous deux étant une chaîne de caractère, une propriété portant le nom du premier argument aura alors pour valeur le second argument :
Ajax.createREquest("url", "test.html");
A noter que ce dernier mode de fonctionnement se retrouve dans de nombreux autres modules et plugIns.
Une fois la fonction terminée, un objet représentant notre requête Ajax est renvoyée. C’est dans cet objet que l’on va indiquer tous les paramètres ou événements que l’on souhaite attribuer à notre requête. Si aucune personnalisation n’est faite, cet objet possède les propriétés suivantes :
- Id : [Number], identifiant unique de la requête
- State : [Number], état de la requête, de 0 à 11, voir ci-dessous
- changeHeader : [Function], permet la modification des en-têtes de la requête, même fonctionnement que la fonction Ajax.createRequest()
- changeProperty : [Function], permet de modifier les propriétés de la requête, même fonctionnement que Ajax.createRequest()
- send : [Function], permet l’envoi de la fonction
Avant de continuer, il faut préciser que le processus d’envoi d’une requête a ici été décomposé en 11 états suivant l’ordre chronologique d’une requête. Chacun d’eux possède son événement :
- Création : « onCreate », appelé lors de la création d’une requête
- Envoi : « onSend », appelé lors de l’envoi
- Attente dans une liste : « onWaitingQueue », lorsque la requête attend dans une liste d’envoi (ce module prend en charge la gestion de liste d’attente de l’envoi mais je n’aurai pas le temps de la décrire ici).
- En attente : « onWaiting », lorsque la requête est déclenchée avec un délai. (Ce module prend en charge l’envoi de requête différé mais je n’aurai pas le temps de la décrire ici.)
- Initialisation : « onInit », lors de la construction « réel » de la requête avec récupération automatique, construction et encryptage des données (Par défaut, deux méthodes sont supportées : GET et POST avec récupération et mise en forme automatique des données, mais il est possible d'en rajouter ou d'en supprimer), mise en place du timeout, création des fonctions d’annulation de la requête etc…
- Chargement : « onLoadStart », au lancement de la requête.
- Réception des données : « onReceived », a la réception de données depuis le serveur (Attention son appel peut varier selon le navigateur ! cf. doc fonction onProgress)
- Fin de chargement : « onLoadEnd », à la fin du chargement
- Mise en forme : « onBuild », à la mise en forme des données reçues
- Historique : « onHistory », à l’ajout de la requête dans l’historique choisi (Ce module prend en charge la gestion des historiques des requêtes aussi bien au niveau du navigateur client : par insertion dans l'historique du navigateur, qu'au niveau du javascript : sous forme de tableau, mais je n’aurais pas le temps de la décrire ici).
- Fin : « onComplete », à la fin lorsque la requête est totalement finie et prête à être exploitée.
Un événement complémentaire « onStateChange » est appelé lorsque la requête passe d’un état à un autre.
Vous trouverez plus bas tous les événements pris en charge par le module.
La fonction send est la fonction permettant de poursuivre l’envoi de la requête, si aucune erreur survient, celle-ci retourne un objet qui permet d’obtenir grand nombre d’informations sur la requête, ses propriétés et méthodes sont :
- ‘abort’ : [Function|Number], permet d’arrêter l’envoi de la requête où, si la requête est déjà arrêtée, indique l’état auquel celle-ci s’est arrêtée [0-10].
- ‘id’ : [Number], indique l’id de la requête lié à cette réponse.
- ‘error’ : [Array], indique les erreurs survenues lors du traitement (je n’aurai pas le temps de décrire la gestion des erreurs ici).
- ‘sendLength’ : [Number], indique le nombre de fois que la requête a été lancée.
- ‘response’ : [undefined|Object], indéfini si la requête n’a pas atteint l’état 11 « onComplete », objet dans le cas contraire, contient la réponse mise en forme ainsi que l'entête de retour, la réponse sous format textuel etc...
- ‘send’ : [Function], permet le renvoi de la requête.
- ‘url’ : [String], indique l’url de destination.
- ‘previousResponse’ : [Array], indique les réponses antérieures.
- ‘load’ : [Object], contient l’ensemble des données sur le traitement temporel de la requête (début, fin, état, % de chargement etc…)
- ’loadFromServer’ : [Object], contient l’ensemble des données sur le nombre d’octets chargés, restants, % d’avancement etc…, et l’ensemble des données sur l’avancement temporel de la requête étape par étape (début, envoi, connexion, traitement, réception, fin…)
Mais bref, assez de discussions, passons maintenant à quelques exemples reprenant ce qui vient d'être décris :
Code modifiant le modèle puis chargeant deux documents l'un de manière synchrone et l'autre de manière asynchrone :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| Ajax.setModel({method : ‘GET’, name : ‘test’, type : ‘synchrone’}) ;
Var test1 = Ajax.createRequest("url", "test1.html") ;
Var test2 = Ajax.createRequest("url", "test2.php") ;
Var send1 = test1.changeProperty({
onSend : function(){ console.log("Send !") ; } ,
onSucces : function(){
console.log("Réponse : " + send1.response.responseText);
console.log(send1.loadFromServer.load.byteLoaded + " bit chargés en " + send1.load.time + "ms");
console.log("Nbr erreur : " + send1.error.length);
},
onError : function(){ console.log("Erreur !") ; }
}).send() ;
Var send2 = test2.send({
type : "asynchrone",
onComplete : function() { console.log("Complete !"); }
}); |
Requête complexe envoyant des données de formulaire :
Voici tout les événements supportées pas une requête :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| onCreateSucces
onCreateFail
onAddQueue
onRemoveQueue
onQueueMove
onStateChange
onreadystatechange
onCreate
onSend
onWaitingQueue
onWaiting
onInit
onLoadStart
onReceived
onLoadEnd
onBuild
onHistory
onComplete
onProgress
onAlreadySend
onOpened
onHeadersReceived
onLoading
onDone
onError
onAbort
onSucces
onFail
ifModified
onUnknow
onInfo
onNoError
onRedir
onClientError
onServerError
onXXX (où XXX est un code possible retourné par le serveur, ex : 404) |
et voici toutes les propriétés pouvant personnaliser une requête :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
//id
name
method
url
arg
encode
noCache
withCredentials
multipart
mimeType
header
type
user
password
useEval
useParse
useContext
format
savePreviousResponse
maxPreviousResponse
useHistory
useBrowserHistory
sendAsBinary
useQueue
queuePriority
isInQueue
setTimeout
clearTimeout
getTimeout
changeTimeout
setInterval
maxTimeout |
Si vous le voulez, je pourrais poursuivre en décrivant chacune d'entre elle afin de présenter plus grandement les capacités de ce code, mais quoi qu'il en soit, merci pour vos retours !
[Framework] Présentation de Dynamique.js
Répondre avec citation
Partager