Nova Nova - 6 months ago 8
Javascript Question

Finding the obsolute or possible estimate of webdata used with AJAX get and post?

I've been browsing around here and Google but to no success. I'm currently developing a small page that works on the user's local computer (I guess it would be called a web app) that uses AJAX's

get
and
post
methods. However I want to find out how much data each get and post uses.

So far, I've found a page here that helps me calculate the size of data after I
JSON.stringify
the json it returns with
get
. How many bytes in a JavaScript string?

However I came across some thoughts about this. I presume the size of the URL get and post does also costs data. Since it uses an https protocol, I imagine the size be different.

Issue I'm stuck with is the URL with query (the
?something=value
stuff on end of URL) size.

I be using jQuery later just a note if it measures differently.

Any help would be appreciated.

Edit: Just to avoid confusion, I mean web data.

Answer

You can create a variable to store sum of .length of responseText; use .ajaxComplete() sum the total of Content-Length response header, or responseText.length

var blobs = [new Blob(["abc"]) // 3
             , new Blob(["defg"]) // 4
             , new Blob(["hijkl"]) // 5
            ]; // 12;
var _data = {sent:0, received:0};

$(document).ajaxComplete(function(event, jqxhr, ajaxOptions) {
  if (ajaxOptions.type === "GET") {
    _data.received += jqxhr.responseText.length;
  } else {
    _data.sent += ajaxOptions.data.length
  }
  // sum `_data` using `jqxhr.responseText`     
  console.log("total data received:", _data, ajaxOptions)
})

$.each(blobs, function(_, blob) {
  // three requests; 3, 4, 5 string characters, respectively
  $.get(URL.createObjectURL(blob)) 
})

$.post(URL.createObjectURL(new Blob([null])), {mno:123}); // 7
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

Comments