Nuestro conocimiento compartido. Nuestro tesoro compartido. Wikipedia.
ShareCodeTreeCode

Goose, la red social libre

PleasOn - Menu QR
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

HTMLCSSJSVista previa
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 var line_status = [];171 172 173 174 175 window.addEventListener('load', function(){176  //test1(); 177  178  // Initialize onLine and offLine events179  window.addEventListener('online', function() {180  alert(1);181  line_status.push(new Date().getTime());182  }, true);183  184  window.addEventListener('offline', function() {185  alert(2);186  line_status.push(new Date().getTime());187  }, true);188 }, true);189 190 191 /**192  * Launch 10 ajax calls193 */194 function test1() {195  196  ajax_stats_start = new Date().getTime();197  ajax_stats = {};198 199  logger.show();200 201  for (var i=0; i<10; i++) {202  var ajax = new Ajax();203  ajax.setUrl('http://www.treeweb.es/request?e='+ajax._id);204  ajax.callback.done = function(xhr) {205  logger.log('Completed '+ajax._id);206  };207  ajax.send();208  logger.log('Launched '+ajax._id);209  }210 211  logger.log(Ajax.prototype.queue);212  213 }214 215 function see_stats() {216  217  var s = '';218  219  for (k in ajax_stats) {220  s +=221  '<tr>'222  + '<td>' + (k) + ' (server delay ' + ajax_stats[k].server_delay + ')' + '</td>'223  + '<td>' + (ajax_stats[k].delay - ajax_stats_start) + '</td>'224  + '<td>' + (ajax_stats[k].waiting - ajax_stats[k].delay) + '</td>'225  + '<td>' + (ajax_stats[k].request - ajax_stats[k].waiting) + '</td>'226  + '</tr>';227  }228  229  var h = '<tr> <td>id</td> <td>delay</td> <td>waiting</td> <td>request</td> </tr>';230  s = '<table>' + h + s + '</table>';231  232  logger.log(s);233  logger.show();234 }235 236 function see_chart() {237  238  // Calc maximum time:239  var max_t = -1;240  var max_w = 1;241  for (k in ajax_stats)242  if (ajax_stats[k].request > max_t) {243  max_t = ajax_stats[k].request;244  max_w = ajax_stats[k].request - ajax_stats_start;245  }246  247  var s = '';248  249  for (k in ajax_stats) {250  251  var delay_ms = ajax_stats[k].delay - ajax_stats_start;252  var waiting_ms = ajax_stats[k].waiting - ajax_stats[k].delay;253  var request_ms = ajax_stats[k].request - ajax_stats[k].waiting;254  255  var delay = (100 * Math.floor(1000*(delay_ms) / max_w ) / 1000);256  var waiting = (100 * Math.floor(1000*(waiting_ms) / max_w ) / 1000);257  var request = (100 * Math.floor(1000*(request_ms) / max_w ) / 1000);258  259  s += ''260  + '<div class="label">'261  + (k) + ' (server delay ' + ajax_stats[k].server_delay + ')' + '</div>'262  + '<div class="row">'263  + '<div class="bar bar-delay" style="width:' + delay + '%" title="' + delay + '%">' + delay_ms + 'ms</div>' 264  265  + '<div class="bar bar-waiting" style="width:' + waiting +'%" title="' + waiting +'%">' + waiting_ms + 'ms</div>'266  267  + '<div class="bar bar-request" style="width:' + request +'%" title="' + request +'%">' + request_ms + 'ms</div>'268  269  + '<div class="bar bar-end" ><div></div></div>'270 271  + '</div>';272  }273  274  s = '<div class="chart">' + s + '</div>';275  276  logger.log(line_status);277  logger.log(s);278  logger.show();279  280 }281 282 
Enlace Duplicar
Enlace
El enlace para compartir es: