Fossil SCM

Added rudimentary timer to AJAX test page.

stephan 2011-09-22 16:21 json
Commit 07a2c43c8cc44b6312948dd021067a86a7987815
Parent 7dc8e9ac94fd752…
1 file changed +26 -9
~ ajax/index.html
M ajax/index.html
+26 -9
--- ajax/index.html
+++ ajax/index.html
@@ -101,18 +101,21 @@
101101
 this.animate( { color: 'rgb(' + color + ')' }, duration / 2);
102102
 this.animate( { color: current }, duration / 2 );
103103
 };
104104
105105
 jQuery(document).ready(function(){
106
- var ids = ['textPath', // list of HTML element IDs we use often.
107
- 'taResponse',
108
- 'taRequest',
109
- 'taRequestOpt',
110
- 'ajaxNotification',
111
- 'responseContainer',
112
- 'btnSend',
113
- 'currentAuthToken'];
106
+ var ids = [
107
+ 'btnSend',
108
+ 'ajaxNotification',
109
+ 'currentAuthToken',
110
+ 'responseContainer',
111
+ 'taRequest',
112
+ 'taRequestOpt',
113
+ 'taResponse',
114
+ 'textPath', // list of HTML element IDs we use often.
115
+ 'timer'
116
+ ];
114117
 var i, k;
115118
 for( i = 0; i < ids.length; ++i ) {
116119
 k = ids[i];
117120
 TheApp.jqe[k] = jQuery('#'+k);
118121
 }
@@ -122,12 +125,22 @@
122125
 TheApp.sendRequest();
123126
 }
124127
 });
125128
126129
 TheApp.cgi = new FossilAjaj();
130
+ TheApp.timer = {_tstart:0,_tend:0,duration:0,
131
+ start:function(){
132
+ this._tstart = (new Date()).getTime();
133
+ },
134
+ end:function(){
135
+ this._tend = (new Date()).getTime();
136
+ this.duration = this._tend - this._tstart;
137
+ }
138
+ };
127139
 var opt = TheApp.cgi.ajaj.options;
128140
 opt.beforeSend = function(req,opt) {
141
+ TheApp.timer.start();
129142
 var val =
130143
 req ?
131144
 (('string'===typeof req) ? req : WhAjaj.stringify(req))
132145
 : '';
133146
 TheApp.jqe.taResponse.val('');
@@ -134,11 +147,13 @@
134147
 TheApp.jqe.taRequest.val( val );
135148
 TheApp.jqe.taRequestOpt.val( opt ? WhAjaj.stringify(opt) : '' );
136149
 TheApp.startAjaxNotif();
137150
 };
138151
 opt.afterSend = function(req,opt) {
152
+ TheApp.timer.end();
139153
 TheApp.endAjaxNotif();
154
+ TheApp.jqe.timer.text( "(Round-trip time: "+TheApp.timer.duration+'ms)' );
140155
 };
141156
 opt.onResponse = function(resp,req) {
142157
 var val;
143158
 try {
144159
 val = WhAjaj.stringify(resp);
@@ -180,10 +195,12 @@
180195
181196
 <h2>Request...</h2>
182197
183198
 Path: <input type='text' size='40' id='textPath' value='/json/HAI'/>
184199
 <input type='button' value='Send...' id='btnSend' onclick='TheApp.sendRequest()' /><br/>
200
+If the POST textarea is not empty then it will be posted with the request.
201
+<hr/>
185202
 <strong>Quick-posts:</strong><br/>
186203
 <input type='button' value='HAI' onclick='TheApp.cgi.HAI()' />
187204
 <input type='button' value='version' onclick='TheApp.cgi.sendCommand("/json/version")' />
188205
 <input type='button' value='stat' onclick='TheApp.cgi.sendCommand("/json/stat")' />
189206
 <input type='button' value='whoami' onclick='TheApp.cgi.sendCommand("/json/whoami")' />
@@ -229,11 +246,11 @@
229246
 <textarea id='taRequestOpt' rows='10' cols='40' readonly></textarea>
230247
231248
 </td>
232249
 </tr>
233250
 <tr>
234
- <th colspan='2'>Response</th>
251
+ <th colspan='2'>Response <span id='timer'></span></th>
235252
 </tr>
236253
 <tr>
237254
 <td colspan='2' id='responseContainer'>
238255
 <textarea id='taResponse' rows='20' cols='80' readonly></textarea>
239256
 </td>
240257
--- ajax/index.html
+++ ajax/index.html
@@ -101,18 +101,21 @@
101 this.animate( { color: 'rgb(' + color + ')' }, duration / 2);
102 this.animate( { color: current }, duration / 2 );
103 };
104
105 jQuery(document).ready(function(){
106 var ids = ['textPath', // list of HTML element IDs we use often.
107 'taResponse',
108 'taRequest',
109 'taRequestOpt',
110 'ajaxNotification',
111 'responseContainer',
112 'btnSend',
113 'currentAuthToken'];
 
 
 
114 var i, k;
115 for( i = 0; i < ids.length; ++i ) {
116 k = ids[i];
117 TheApp.jqe[k] = jQuery('#'+k);
118 }
@@ -122,12 +125,22 @@
122 TheApp.sendRequest();
123 }
124 });
125
126 TheApp.cgi = new FossilAjaj();
 
 
 
 
 
 
 
 
 
127 var opt = TheApp.cgi.ajaj.options;
128 opt.beforeSend = function(req,opt) {
 
129 var val =
130 req ?
131 (('string'===typeof req) ? req : WhAjaj.stringify(req))
132 : '';
133 TheApp.jqe.taResponse.val('');
@@ -134,11 +147,13 @@
134 TheApp.jqe.taRequest.val( val );
135 TheApp.jqe.taRequestOpt.val( opt ? WhAjaj.stringify(opt) : '' );
136 TheApp.startAjaxNotif();
137 };
138 opt.afterSend = function(req,opt) {
 
139 TheApp.endAjaxNotif();
 
140 };
141 opt.onResponse = function(resp,req) {
142 var val;
143 try {
144 val = WhAjaj.stringify(resp);
@@ -180,10 +195,12 @@
180
181 <h2>Request...</h2>
182
183 Path: <input type='text' size='40' id='textPath' value='/json/HAI'/>
184 <input type='button' value='Send...' id='btnSend' onclick='TheApp.sendRequest()' /><br/>
 
 
185 <strong>Quick-posts:</strong><br/>
186 <input type='button' value='HAI' onclick='TheApp.cgi.HAI()' />
187 <input type='button' value='version' onclick='TheApp.cgi.sendCommand("/json/version")' />
188 <input type='button' value='stat' onclick='TheApp.cgi.sendCommand("/json/stat")' />
189 <input type='button' value='whoami' onclick='TheApp.cgi.sendCommand("/json/whoami")' />
@@ -229,11 +246,11 @@
229 <textarea id='taRequestOpt' rows='10' cols='40' readonly></textarea>
230
231 </td>
232 </tr>
233 <tr>
234 <th colspan='2'>Response</th>
235 </tr>
236 <tr>
237 <td colspan='2' id='responseContainer'>
238 <textarea id='taResponse' rows='20' cols='80' readonly></textarea>
239 </td>
240
--- ajax/index.html
+++ ajax/index.html
@@ -101,18 +101,21 @@
101 this.animate( { color: 'rgb(' + color + ')' }, duration / 2);
102 this.animate( { color: current }, duration / 2 );
103 };
104
105 jQuery(document).ready(function(){
106 var ids = [
107 'btnSend',
108 'ajaxNotification',
109 'currentAuthToken',
110 'responseContainer',
111 'taRequest',
112 'taRequestOpt',
113 'taResponse',
114 'textPath', // list of HTML element IDs we use often.
115 'timer'
116 ];
117 var i, k;
118 for( i = 0; i < ids.length; ++i ) {
119 k = ids[i];
120 TheApp.jqe[k] = jQuery('#'+k);
121 }
@@ -122,12 +125,22 @@
125 TheApp.sendRequest();
126 }
127 });
128
129 TheApp.cgi = new FossilAjaj();
130 TheApp.timer = {_tstart:0,_tend:0,duration:0,
131 start:function(){
132 this._tstart = (new Date()).getTime();
133 },
134 end:function(){
135 this._tend = (new Date()).getTime();
136 this.duration = this._tend - this._tstart;
137 }
138 };
139 var opt = TheApp.cgi.ajaj.options;
140 opt.beforeSend = function(req,opt) {
141 TheApp.timer.start();
142 var val =
143 req ?
144 (('string'===typeof req) ? req : WhAjaj.stringify(req))
145 : '';
146 TheApp.jqe.taResponse.val('');
@@ -134,11 +147,13 @@
147 TheApp.jqe.taRequest.val( val );
148 TheApp.jqe.taRequestOpt.val( opt ? WhAjaj.stringify(opt) : '' );
149 TheApp.startAjaxNotif();
150 };
151 opt.afterSend = function(req,opt) {
152 TheApp.timer.end();
153 TheApp.endAjaxNotif();
154 TheApp.jqe.timer.text( "(Round-trip time: "+TheApp.timer.duration+'ms)' );
155 };
156 opt.onResponse = function(resp,req) {
157 var val;
158 try {
159 val = WhAjaj.stringify(resp);
@@ -180,10 +195,12 @@
195
196 <h2>Request...</h2>
197
198 Path: <input type='text' size='40' id='textPath' value='/json/HAI'/>
199 <input type='button' value='Send...' id='btnSend' onclick='TheApp.sendRequest()' /><br/>
200 If the POST textarea is not empty then it will be posted with the request.
201 <hr/>
202 <strong>Quick-posts:</strong><br/>
203 <input type='button' value='HAI' onclick='TheApp.cgi.HAI()' />
204 <input type='button' value='version' onclick='TheApp.cgi.sendCommand("/json/version")' />
205 <input type='button' value='stat' onclick='TheApp.cgi.sendCommand("/json/stat")' />
206 <input type='button' value='whoami' onclick='TheApp.cgi.sendCommand("/json/whoami")' />
@@ -229,11 +246,11 @@
246 <textarea id='taRequestOpt' rows='10' cols='40' readonly></textarea>
247
248 </td>
249 </tr>
250 <tr>
251 <th colspan='2'>Response <span id='timer'></span></th>
252 </tr>
253 <tr>
254 <td colspan='2' id='responseContainer'>
255 <textarea id='taResponse' rows='20' cols='80' readonly></textarea>
256 </td>
257

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button