[Javascript][MVC][AJAX] Un coup de main ?
Bonjour à tous,
Je suis en train de regarder pour implémenter AJAX et un modèle MVC Actif en Javascript. J'ai vu que par exemple Prototype apparemment le faisait (tout du moins pour Ajax) mais à 100Ko le script j'ai préféré m'y essayer ... je voulais des feedback sur ce bout de code qui ne marche pas encore mais qui ne doit pas en être loin :
Maintenant place aux explications :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171<html> <head> <script language="Javascript" type="text/javascript"> // This is an active MVC Model function Model() // Observable + State { // List the current observers this.observers = new Array(); // Add an observer to the observers stack function Attach( Observer ) { this.observers.push( Observer ); } this.Attach = Attach; // Remove an observer from the observers stack function Detach( Observer ) { for( var i in this.observers ) { if( this.observers[i] == Observer ) { this.observers.splice( i , 1 ); } } } this.Detach = Detach; // Notify the observers to update function Notify() { for( var i in this.observers ) { this.observers[i].Update( this ); } } this.Notify = Notify; // Current state this.state = 0; // Change the current model state function SetState( value ) { this.state = value; this.Notify(); } this.SetState = SetState; } // This is an active MVC View function View( Observable) { // Attach this view to Observable Observable.Attach( this ); // Update this view function Update( Observable ) { switch( Observable.state.GetState ) { case 1: break; case 2: break; case 3: break; case 4: Observable.state.Paint; break; default: // 0 break; } } this.Update = Update; } // This is an active MVC Controller function Controller( Observable ) { // Attach this view to Observable Observable.Attach( this ); // Update this view function Update( Observable ) { switch( Observable.state.GetState ) { case 1: alert('state 1'); break; case 2: alert('state 2'); break; case 3: alert('state 3'); break; case 4: alert('state 4'); break; default: // 0 Observable.state.Open; break; } } this.Update = Update; } // Here is the classic active MVC architecture M = new Model(); V = new View(M); C = new Controller(M); // With this one we create requests function Ajax( page , id ) { // Current Context try { this.XHR = new ActiveXObject( "Microsoft.XMLHTTP" ); } catch( e ) { this.XHR = new XMLHttpRequest(); } // Update the model state this.XHR.onreadyStateChange = function() { M.SetState(this); } // Return the current state function GetState() { return this.XHR.readyState; } this.GetState = GetState; // Fill the current zone id function Paint() { document.getElementById(id).innerHTML = this.XHR.responseText; } // Open a connexion function Open() { this.XHR.open( 'GET' , page ); } this.Open = Open; // Start the request M.SetState(this); } </script> </head> <body> <button id="bouton" onclick="Javascript: new Ajax( 'content.php' ,'divarea' );">Cliquez</button> <div id="divarea"></div> </body> </html>
On crée trois classes, le modèle, le contrôleur et la vue. Le modèle est un observable, c'est à dire qu'un objet qui désire l'observer peut s'inscrire via la méthode Attach() de notre modèle et se retrouver notifié des changements d'état de ce dernier.
Justement en parlant de notifications, on attache le contrôleur et la vue à notre modèle de façon à ce qu'ils soient notifiés des changements d'état de notre modèle. Apparemment d'après les documentations que j'ai consulté c'est un modèle MVC Actif dans le sens où c'est notre modèle qui modifie le comportement de l'application tout seul en fonction des différents états qui lui sont transmis via son interface SetState.
Ensuite on a une classe Ajax qui permet de :
- Créer une nouvelle requête ajax sur un conteneur donné
- Changer dynamiquement l'état de l'objet modèle via la méthode onreadyStateChange
- Obtenir l'état de la requête via la méthode GetState()
- Changer le contenu de notre conteneur en fonction des différents états de notre requête via la méthode paint()
- Ouvrir dynamiquement la requête via la méthode open()
- Démarrer le processus en modifiant l'état de notre modèle via la méthode SetState de ce dernier
Le tout semble bien fonctionner au début puisqu'en plaçant des alert à différents endroits j'arrive à suivre le déroulement du script mais cela semble bloquer lorsque mon readyState change, soit donc apparemment dans cette partie de ma classe Ajax :
Donc si vous voyez ce qui peut clocher car je ne suis pas un expert en javascript. Ha oui j'oubliais, mais vous avez dû remarquer, pour mettre à jour un contenu c'est facile, on crée une nouvelle instance d'Ajax comme ceci :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
4// Update the model state this.XHR.onreadyStateChange = function() { M.SetState(this); }
Ce qui moi m'intéresses pour développer entre autre des backoffice ou des parties de sites qui ne nécessitent pas entre autre de référencement.
Code : Sélectionner tout - Visualiser dans une fenêtre à part new Ajax( maPage , monConteneur );
Bref votre avis m'intéresse ... de mon côté je continuerais de poster pour vous tenir au courant de l'avancée de ce petit projet que je trouve très sympa à coder. Le but final étant d'avoir un code le plus dépouillé possible et une interface utilisateur extrêmement simple d'utilisation.
Répondre avec citation
Partager