2013-05-14 3 views
1

Я пытаюсь измерить скорость загрузки/выгрузки и сделать много одновременных запросов ajax. Некоторые из них заблокированы из-за лимита соединений браузера, поэтому я не могу установить реальное время загрузки, делая какую-то это:Измерьте время приема ajax

var start = new Date; 
$.get('/data').done(function() { 
    console.log(new Date - start); 
}); 

Итак, я использую сырой XHR так:

var open, start, end; 
var req = new XMLHttpRequest(); 
req.open('GET', '/data', true); 
req.onreadystatechange = function() { 
    switch (this.readyState) { 
     case 2: 
     case 3: 
      if (!start) { start = new Date(); } 
      break; 
     case 4: 
      if (!end) { end = new Date(); } 
      console.log('%d: pending = %d, download = %d, total = %d', i, start - open, end - start, end - open); 
      break; 
    } 
}; 
if (!open) { open = new Date(); } 
req.send(); 

Есть ли способ сделать то же самое с помощью jQuery?

UPDATE

мне нужно инициализировать start не раньше АЯКС запроса, но после того, как requestState изменен на 2 или 3 (на самом деле скачивания/загрузки).

UPDATE # 2

Там в смежный вопрос в JQuery багтрекере: http://bugs.jquery.com/ticket/9883

+0

Вы спрашиваете, имеет ли функция $ .ajax jQuery обратный вызов fail() и done(), чтобы сообщить вам, был ли успешный вызов ajax? – adeneo

+0

@PalashMondal Это почти как мой первый пример. Он рассчитывает на время ожидания, например, когда readyState === 3 и данные еще не загружаются. – ixth

ответ

6
$.ajaxPrefilter(function(options, originalOptions, jqXHR) { 
    if (options.onreadystatechange) { 
     var xhrFactory = options.xhr; 
     options.xhr = function() { 
      var xhr = xhrFactory.apply(this, arguments); 
      function handler() { 
       options.onreadystatechange(xhr, jqXHR); 
      } 
      if (xhr.addEventListener) { 
       xhr.addEventListener("readystatechange", handler, false); 
      } else { 
       setTimeout(function() { 
        var internal = xhr.onreadystatechange; 
        if (internal) { 
         xhr.onreadystatechange = function() { 
          handler(); 
          internal.apply(this, arguments); 
         }; 
        } 
       }, 0); 
      } 
      return xhr; 
     }; 
    } 
});  

var start = null; 
var xhr = $.ajax({ 
    url: "/data", 
    complete: function() { 
     var end = new Date().getTime(); 
     var requestTime = end - start; 
     console.log(requestTime); 
    } 
    onreadystatechange: function(xhr) { 
     if(xhr.readyState == 3 && start == null) { 
     start = new Date().getTime(); 
     } 
    } 
}); 

Использование jQuery.ajax() метода в complete обратного вызова пожаров на success или error (После этих обратных вызовов ... использовать отдельные функции обратного вызова если вы хотите использовать их).

Update (Смотрите комментарий): Используя код считанного здесь: https://gist.github.com/chrishow/3023092 с использованием метода .ajaxPrefilter() мы можем добавить onreadystatechange вариант метода .ajax().

+0

Мне нужно инициализировать 'start' не перед ajax-запросом, но после того, как' requestState' изменился на 2 или 3 (фактически загружая/выгружая). – ixth

+0

@ixth См. Обновленный ответ –

+0

Он не возвращает объект xhr, он возвращает объект jQuery-XHR. – Bergi

Смежные вопросы