1 /*/////////////////////////////////////////////////////////////////////////////2 //3 AJAX DEFINITION (BEGIN) //4 */5 /**6 * Description: Manage ajax connections with a queue model.7 * Author: gerardooscarjt@gmail.com8 * Date: 2013/31/019 * Typical use:10 11 var ajax = new Ajax();12 ajax.setUrl('http://example.com/path');13 ajax.setMethod('post');14 ajax.setData({'name':'a','age':'22'};15 ajax.callback.done = function(xhr) {16 // ...17 };18 ajax.callback.error = function(xhr) {19 // ...20 };21 ajax.send();22 23 */24 var Ajax = function() {25 26 Ajax.prototype.requests.push(this);27 28 this._id = Ajax.prototype.id_generator;29 Ajax.prototype.id_generator++;30 31 this.callback = {32 done:null,33 error:null,34 progress:null,35 presend:null36 };37 38 39 40 this._method = 'get';41 this._async = true;42 this._url = '';43 this._data = null;44 this._retries = 3;45 this._xhr = null;46 47 }48 49 Ajax.prototype.requests = [];50 Ajax.prototype.queue = [];51 Ajax.prototype.id_generator = 0;52 Ajax.prototype.concurrency_limit = 4;53 54 /// METHOD ///55 Ajax.prototype.setMethod = function(method) {56 if (!this.isQueued())57 this._method = method;58 };59 Ajax.prototype.getMethod = function(method) {60 return this._method;61 };62 63 /// URL ///64 Ajax.prototype.setUrl = function(url) {65 if (!this.isQueued())66 this._url = url;67 };68 Ajax.prototype.getUrl = function() {69 return this._url;70 };71 72 /// DATA ///73 Ajax.prototype.setData = function(data) {74 if (!this.isQueued())75 this._data = data;76 };77 Ajax.prototype.getData = function () {78 return this._data;79 };80 81 /// IS QUEUED ///82 Ajax.prototype.isQueued = function () {83 return Ajax.prototype.queue.indexOf(this) > -1;84 };85 86 Ajax.prototype.send = function() {87 if (!this.isQueued()) {88 logger.log(this._id + ' no está en la cola: encolando...');89 ajax_stats[this._id] = {};90 ajax_stats[this._id].delay = new Date().getTime();91 Ajax.prototype.queue.push(this);92 Ajax._move();93 } else {94 logger.log('ya está en la cola'); 95 }96 logger.show();97 };98 99 100 /// STATIC METHODS ///101 102 // Abort all current requests103 Ajax._abort_all = function() {104 alert('aborting all requests');105 };106 107 /* Move queue */108 Ajax._move = function() {109 110 if (window.navigator.onLine) {111 while (Ajax.prototype.concurrency_limit > 0 && Ajax.prototype.queue.length > 0) {112 var a = Ajax.prototype.queue.shift();113 a._send();114 logger.log('Desencolado '+a._id);115 Ajax.prototype.concurrency_limit--;116 }117 }118 };119 120 /// PRIVATE METHODS (I WOULD LIKE) ///121 Ajax.prototype._send = function() {122 var that = this;123 124 logger.log('Send request for '+this._id);125 126 this._xhr = new XMLHttpRequest({mozSystem:true});127 128 this._xhr.open(this._method, this._url, this._async);129 130 this._xhr.onreadystatechange = function(event) {131 if(that._xhr.readyState == XMLHttpRequest.DONE) {132 logger.log('DONE! ' + that._id +' (delay '+that._xhr.responseText+')');133 ajax_stats[that._id].request = new Date().getTime();134 ajax_stats[that._id].server_delay = that._xhr.responseText;135 Ajax.prototype.concurrency_limit++;136 Ajax._move();137 }138 };139 140 this._xhr.onerror = function(event) {141 logger.log('ERROR! ' + that._id);142 Ajax.prototype.concurrency_limit++;143 Ajax._move();144 };145 146 this._xhr.send();147 ajax_stats[this._id].waiting = new Date().getTime();148 149 150 };151 152 // Initialize onLine and offLine events153 window.addEventListener('online', function() {154 Ajax._move();155 }, true);156 157 window.addEventListener('offline', function() {158 Ajax._abort_all();159 }, true);160 161 /*162 AJAX DEFINITION (END) //163 //164 /////////////////////////////////////////////////////////////////////////////*/165 166 167 168 var ajax_stats_start = new Date().getTime();169 var ajax_stats = {};170 171 172 173 window.addEventListener('load', function(){174 //test1(); 175 }, true);176 177 178 /**179 * Launch 10 ajax calls180 */181 function test1() {182 183 ajax_stats_start = new Date().getTime();184 185 186 logger.show();187 188 for (var i=0; i<10; i++) {189 var ajax = new Ajax();190 ajax.setUrl('http://www.treeweb.es/request?e='+ajax._id);191 ajax.callback.done = function(xhr) {192 logger.log('Completed '+ajax._id);193 };194 ajax.send();195 logger.log('Launched '+ajax._id);196 }197 198 logger.log(Ajax.prototype.queue);199 200 201 }202 203 function see_stats() {204 205 var s = '';206 207 for (k in ajax_stats) {208 s +=209 '<tr>'210 + '<td>' + (k) + ' (server delay ' + ajax_stats[k].server_delay + ')' + '</td>'211 + '<td>' + (ajax_stats[k].delay - ajax_stats_start) + '</td>'212 + '<td>' + (ajax_stats[k].waiting - ajax_stats[k].delay) + '</td>'213 + '<td>' + (ajax_stats[k].request - ajax_stats[k].waiting) + '</td>'214 + '</tr>';215 }216 217 218 var h = '<tr> <td>id</td> <td>delay</td> <td>waiting</td> <td>request</td> </tr>';219 s = '<table>' + h + s + '</table>';220 221 logger.log(s);222 logger.show();223 }224 225 function see_chart() {226 227 228 /*229 var deltas = {};230 231 232 for (k in ajax_stats) {233 deltas[k] = {234 'delay' : (ajax_stats[k].delay - ajax_stats_start),235 'waiting' : (),236 'request' : ()237 };238 }*/239 240 241 242 243 // Calc maximum time:244 var max_t = -1;245 var max_w = 1;246 for (k in ajax_stats)247 if (ajax_stats[k].request > max_t) {248 max_t = ajax_stats[k].request;249 max_w = ajax_stats[k].request - ajax_stats_start;250 }251 252 253 var s = '';254 255 for (k in ajax_stats) {256 257 var delay = (100 * Math.floor(1000*(ajax_stats[k].delay - ajax_stats_start) / max_w ) / 1000);258 var waiting = (100 * Math.floor(1000*(ajax_stats[k].waiting - ajax_stats[k].delay) / max_w ) / 1000);259 var request = (100 * Math.floor(1000*(ajax_stats[k].request - ajax_stats[k].waiting) / max_w ) / 1000);260 261 s += ''262 + '<div style="float:left; "><div style="position:absolute; width:200px; margin-left:-200px; text-align:right;">'263 + (k) + ' (server delay ' + ajax_stats[k].server_delay + ')' + '</div></div>'264 + '<div style="padding-left:200px; height:16px; border-bottom: solid silver 1px; text-align:center; ">'265 + '<div style="display:inline-block; height:100%; background:navy; width:'266 + delay + '%"></div>' 267 268 + '<div style="display:inline-block; height:100%; background:orange; width:'269 + waiting +'%">' + waiting + '</div>'270 271 + '<div style="display:inline-block; height:100%; background:gold; width:'272 + request +'%">' + request + '</div>'273 274 275 + '<div style="display:inline-block; height:100%; ><div style="height:400px; position:absolute; border-left:red dashed 1px;"></div></div>'276 277 + '</div>';278 }279 280 281 s = '<div style="font-size:8px;">' + s + '</div>';282 283 logger.log(s);284 logger.show();285 }286 287 Este ShareCode tiene versiones:
- Cargando...... (04/02/2013)
- God Ajax Test 1 See stats See chart ... (04/02/2013)
- God Ajax Test 1 See stats See chart ... (24/04/2013)
- God Ajax Test 1 See stats See chart ... (24/04/2013)
- God Ajax Test 1 See stats See chart ... (24/04/2013)
- God Ajax Test 1 See stats See chart ... (24/04/2013)
- God Ajax Test 1 See stats See chart ... (24/04/2013)
Enlace
El enlace para compartir es: