1

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.

Community
  • 1
  • 1
Nova
  • 2,000
  • 3
  • 14
  • 24
  • Not entirely certain what Question is? Are you trying to retrieve `Content-Length` from response headers? – guest271314 May 15 '16 at 17:48
  • I mean web data like how an ISP can track how much data a costumer users. However I want something that helps records how much this single page uses since it be running continuously in the background. Since it be sending multiple get requests to see if any updates every delay. – Nova May 15 '16 at 17:55
  • Yes, this would be the `Content-Length` of the response from server. You can create a variable which sums each requests' `Content-Length` response header; or, `.length` of each requests' `responseText` – guest271314 May 15 '16 at 17:58
  • Does anyone have a code snippet I can work from preferably jQuery's `$.get(url, function (data, status) {... }` same for post? – Nova May 15 '16 at 19:25

1 Answers1

0

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 
                  ? ajaxOptions.data.length 
                  : ajaxOptions.url.split("?")[1].length; // handle query string data
  }
  // sum `_data` using `jqxhr.responseText`     
  console.log("total data received:", _data, ajaxOptions);
  // sent: 14, received: 12
})

$.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

$.post("?pqr=789"); // 7
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
guest271314
  • 1
  • 15
  • 104
  • 177
  • I'm unfamiliar with the ajaxComplete method but I think I can break down the code how it works. I've just had a browse but can't find proper detail, is it possible to detect if it a get or post? Example `var data = {sent: 0, received: 0}` and += the the object value respectively? Hopefully I should be fine after this. – Nova May 16 '16 at 00:33
  • @Nova Yes, should be possible using `ajaxOptions.data`. See updated post – guest271314 May 16 '16 at 00:47
  • Testing it out and got this error: `TypeError: ajaxOptions.data is undefined` – Nova May 16 '16 at 02:48
  • @Nova _"Testing it out and got this error: `TypeError: ajaxOptions.data is undefined` "_ Can you create jsfiddle http://jsfiddle.net to demonstrate? – guest271314 May 16 '16 at 03:04
  • I'm using `$.post(Config.apiUrl + Config.token + "/sendMessage?chat_id=" + chatId + "&text=" + encodeURIComponent(message), function (data, status) { });` and `$.get(Config.apiUrl + Config.token + "/getUpdates?offset=" + Session.updateId, function (data, status) {` they are handling the requests correctly from what I see. No error from those unless it something else. Although I'm not using that blob, I thought it was just a simulated URL file for the example? – Nova May 16 '16 at 03:05
  • I'm using jquery-2.2.3.min.js if version is causing the error? – Nova May 16 '16 at 03:08
  • @Nova Yes, the `Blob` is simulated URL and response for stacksnippets. If you are using query string instead of `data`, try `_data.sent += ajaxOptions.data ? ajaxOptions.data.length : ajaxOptions.url.split("?")[1].length`, which should handle `data` being `undefined` , where data passed is at `url` as query string. See updated post – guest271314 May 16 '16 at 03:10