XMLHttpRequest "total" returns 0 when fetching JSON - php

Question

MORE EDITS
After testing the code on several browsers, it appears that I am only able to get the XMLHttpRequest.lengthComputable to be true on FireFox, thus giving me a download percentage. It returns false for both Chrome and Safari... any ideas to solve this? I have included the header("Access-Control-Allow-Origin: *"); tag at the top of my PHP script.
EDIT
Alright, with the help from the comments, I have my PHP sending a Content-Length however, the evt.total is still returning a 0. Any idea?
After further testing, it appears that evt.lengthComputable is set to false - therefore it is ignoring evt.total... now I need to find out why that is.
Here is the data in the Headers
Request Method:GET
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:(deleted data here for confidential reasons)
Origin:(deleted data here for confidential reasons)
Referer:(deleted data here for confidential reasons)
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36
Response Headers
Access-Control-Allow-Origin:*
Connection:keep-alive
Content-Encoding:gzip
Content-Length:1914150
Content-Type:application/json
Date:Wed, 25 Feb 2015 22:38:22 GMT
Server:Apache
Vary:Accept-Encoding
ORIGINAL POST
Maybe this is a dumb question, but here it is...
I'm working on a private PhoneGap app which is essentially a company directory. When the app first starts, it detects that the stored JSON is empty has not yet been downloaded and prompts the user to start the download.
I obtain the JSON data using an AJAX call. The JSON is generated by PHP on our server that queries the database, builds the array, then json_encode and echos the output.
The data transfers to our app and everything is working nicely, however, I'd like to build a "Progress Meter" for the download which requires me to know exactly how large the data being sent over is. I know PHP has some ways to get file size of certain files such as filesize($somefile), but how would I be able to measure the byte size of the JSON data? Can this even be done? Here is some of the code I am using...
PHP Building The JSON Data
while(...fetch the data) {
$output[] =
array (
"id" => $row['id'],
"firstname" => $row['firstname'],
"lastname" => $row['lastname'],
"jobtitle" => $row['jobtitle'],
"phone" => $row['phone'],
"cell" => $row['cell'],
"email" => $row['email'],
"department" => $row['department'],
"sub" => $row['sub'],
"image" => $row['image']
);
}
echo json_encode($output);
Here I am getting the JSON with AJAX: (I am using Framework7 - hence the $$)
$$.ajax({
url: "my-site-here.php",
dataType: "json",
beforeSend: function(XMLHttpRequest) {
//Download Progress Attempt (Found By Googling)
XMLHttpRequest.addEventListener("progress", function(evt){
//console.log("Downloaded: " + evt.loaded) <-- THIS IS WORKING;
//console.log("Total: " + evt.total) <-- THIS RETURNS 0;
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
} else {
// console.log("Cannot Compute File Size"); <-- THIS IS WHAT OUTPUTS
}
}, false);
},
success: function(json) {
// GETS DATA, RENDERS IT
}
});
Thanks in advance for some insight!

Answer 1

I found this solution here: https://stackoverflow.com/a/24073356/2163226.
All I had to do was edit my .htaccess file to expose the Content-Length header.
Now everything is working as intended!
Thank you all for the help and suggestions!

Answer 2

EDIT - Misunderstood the request process.