Gracias, 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  this._method = 'get';39  this._async = true;40  this._url = '';41  this._data = null;42  this._retries = 3;43  this._xhr = null;44  45 }46 47 Ajax.prototype.requests = [];48 Ajax.prototype.queue = [];49 Ajax.prototype.id_generator = 0;50 Ajax.prototype.concurrency_limit = 4;51 52 /// METHOD ///53 Ajax.prototype.setMethod = function(method) {54  if (!this.isQueued())55  this._method = method;56 };57 Ajax.prototype.getMethod = function(method) {58  return this._method;59 };60 61 /// URL ///62 Ajax.prototype.setUrl = function(url) {63  if (!this.isQueued())64  this._url = url;65 };66 Ajax.prototype.getUrl = function() {67  return this._url;68 };69 70 /// DATA ///71 Ajax.prototype.setData = function(data) {72  if (!this.isQueued())73  this._data = data;74 };75 Ajax.prototype.getData = function () {76  return this._data;77 };78 79 /// IS QUEUED ///80 Ajax.prototype.isQueued = function () {81  return Ajax.prototype.queue.indexOf(this) > -1;82 };83 84 Ajax.prototype.send = function() {85  if (!this.isQueued()) {86  logger.log(this._id + ' no está en la cola: encolando...');87  ajax_stats[this._id+'.'+this._retries] = {};88  ajax_stats[this._id+'.'+this._retries].delay = new Date().getTime();89  Ajax.prototype.queue.push(this);90  Ajax._move();91  } else {92  logger.log('ya está en la cola'); 93  }94  logger.show();95 };96 97 98 /// STATIC METHODS ///99 100 // Abort all current requests101 Ajax._abort_all = function() {102  alert('aborting all requests');103 };104 105 /* Move queue */106 Ajax._move = function() {107  108  if (window.navigator.onLine) {109  while (Ajax.prototype.concurrency_limit > 0 && Ajax.prototype.queue.length > 0) {110  var a = Ajax.prototype.queue.shift();111  a._send();112  logger.log('Desencolado '+a._id);113  Ajax.prototype.concurrency_limit--;114  }115  }116 };117 118 /// PRIVATE METHODS (I WOULD LIKE) ///119 Ajax.prototype._send = function() {120  var that = this;121  122  logger.log('Send request for '+this._id);123  124  this._xhr = new XMLHttpRequest({mozSystem:true});125  126  this._xhr.open(this._method, this._url, this._async);127  128  this._xhr.onreadystatechange = function(event) {129  if(that._xhr.readyState == XMLHttpRequest.DONE) {130  logger.log('DONE! ' + that._id +' (delay '+that._xhr.responseText+')');131  ajax_stats[that._id+'.'+that._retries].request = new Date().getTime();132  ajax_stats[that._id+'.'+that._retries].server_delay = that._xhr.responseText;133  Ajax.prototype.concurrency_limit++;134  Ajax._move();135  }136  };137  138  this._xhr.onerror = function(event) {139  logger.log('ERROR! ' + that._id);140  Ajax.prototype.concurrency_limit++;141  Ajax._move();142  };143  144  this._xhr.send();145  ajax_stats[this._id+'.'+this._retries].waiting = new Date().getTime();146  147  148 };149 150 // Initialize onLine and offLine events151 window.addEventListener('online', function() {152  Ajax._move();153 }, true);154 155 window.addEventListener('offline', function() {156  Ajax._abort_all();157 }, true);158 159  /*160  AJAX DEFINITION (END) //161  //162 /////////////////////////////////////////////////////////////////////////////*/163 164 165 166 var ajax_stats_start = new Date().getTime();167 var ajax_stats = {};168 var line_status = [];169 170 171 172 173 window.addEventListener('load', function(){174  //test1(); 175  176  // Initialize onLine and offLine events177  window.addEventListener('online', function() {178  alert(1);179  line_status.push(new Date().getTime());180  }, true);181  182  window.addEventListener('offline', function() {183  alert(2);184  line_status.push(new Date().getTime());185  }, true);186 }, true);187 188 189 /**190  * Launch 10 ajax calls191 */192 function test1() {193  194  ajax_stats_start = new Date().getTime();195  ajax_stats = {};196 197  logger.show();198 199  for (var i=0; i<10; i++) {200  var ajax = new Ajax();201  ajax.setUrl('http://www.treeweb.es/request?e='+ajax._id);202  ajax.callback.done = function(xhr) {203  logger.log('Completed '+ajax._id);204  };205  ajax.send();206  logger.log('Launched '+ajax._id);207  }208 209  logger.log(Ajax.prototype.queue);210  211 }212 213 function see_stats() {214  215  var s = '';216  217  for (k in ajax_stats) {218  s +=219  '<tr>'220  + '<td>' + (k) + ' (server delay ' + ajax_stats[k].server_delay + ')' + '</td>'221  + '<td>' + (ajax_stats[k].delay - ajax_stats_start) + '</td>'222  + '<td>' + (ajax_stats[k].waiting - ajax_stats[k].delay) + '</td>'223  + '<td>' + (ajax_stats[k].request - ajax_stats[k].waiting) + '</td>'224  + '</tr>';225  }226  227  var h = '<tr> <td>id</td> <td>delay</td> <td>waiting</td> <td>request</td> </tr>';228  s = '<table>' + h + s + '</table>';229  230  logger.log(s);231  logger.show();232 }233 234 function see_chart() {235  236  // Calc maximum time:237  var max_t = -1;238  var max_w = 1;239  for (k in ajax_stats)240  if (ajax_stats[k].request > max_t) {241  max_t = ajax_stats[k].request;242  max_w = ajax_stats[k].request - ajax_stats_start;243  }244  245  var s = '';246  247  for (k in ajax_stats) {248  249  var delay_ms = ajax_stats[k].delay - ajax_stats_start;250  var waiting_ms = ajax_stats[k].waiting - ajax_stats[k].delay;251  var request_ms = ajax_stats[k].request - ajax_stats[k].waiting;252  253  var delay = (100 * Math.floor(1000*(delay_ms) / max_w ) / 1000);254  var waiting = (100 * Math.floor(1000*(waiting_ms) / max_w ) / 1000);255  var request = (100 * Math.floor(1000*(request_ms) / max_w ) / 1000);256  257  s += ''258  + '<div class="label">'259  + (k) + ' (delay ' + ajax_stats[k].server_delay + 's)' + '</div>'260  + '<div class="row">'261  + '<div class="bar bar-delay" style="width:' + delay + '%" title="' + delay + '%">' + delay_ms + 'ms</div>' 262  263  + '<div class="bar bar-waiting" style="width:' + waiting +'%" title="' + waiting +'%">' + waiting_ms + 'ms</div>'264  265  + '<div class="bar bar-request" style="width:' + request +'%" title="' + request +'%">' + request_ms + 'ms</div>'266  267  + '<div class="bar bar-end" ><div></div></div>'268 269  + '</div>';270  }271  272  s = '<div class="chart">' + s + '</div>';273  274  logger.log(line_status);275  logger.log(s);276  logger.show();277  278 }279 280 
Enlace Duplicar
Enlace
El enlace para compartir es: