Is there any way I can see how long a JQuery AJAX call takes to execute?

Question

Is there anyway to see how long a simple $.getJSON method takes to call using some type of timing code, in jquery/javascript?

Secondly, is there any way to see how BIG the response Content-Length is, in kB or megabytes?

Answer 1

If you want pure javascript, right before you send the request note the time using new Date().getTime();

Then in the ajax callback, note the time again, and subtract against the first time. That will give you the length of the call.

Something like this:

function aCallback()
{
   window.time2 = new Date().getTime();
   window.alert(window.time2 - window.time1)
}
window.time1 = new Date().getTime();
$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: aCallback
});

Answer 2

Try either Firebug or Fiddler

http://getfirebug.com/

http://www.fiddler2.com/fiddler2/

Answer 3

To answer your second question, you can read the Content-Length header from the XHR response.

var req;
req = $.ajax({
    type: "HEAD",
    url: "/data",
    success: function () {
      alert("Size is " + req.getResponseHeader("Content-Length"));
    }
});

Answer 4

Why reinvent the wheel? Use firebug's console to log the time. Do something like this:

function aCallback()
{
   console.timeEnd("ajax call");
   window.alert(window.time2 - window.time1)
}
console.time("ajax call");
$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: aCallback
});

This will log how long it took until the server response gets back to the call. It will log the time in miliseconds to the firebug console.