XMLHttpRequest "total" returns 0 when fetching JSON

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!

The server just might not be sending the "total" (Content-Length) header. View the HTTP response headers - if there is no Content-Length then the only thing the XHR *can* report is 0 (or other can't-help-you-ish). I believe PHP can be configured to run in "buffered" and "unbuffered" modes; the C-L cannot be reliably determined when buffering is not used. — user2864740, Feb 25 '15 at 21:26
@user2864740 You are right, there is no Content-Length header being sent. If I understand correctly, this is a header I can put on my PHP page is it not? If so, how do I determine the size of the data and put it into the header? — Justin, Feb 25 '15 at 21:28
@user2864740 I do appreciate your insight and will look into this. If I find a resolution, I will post the solution. In the meantime, I will see if others beat me to the solution. — Justin, Feb 25 '15 at 21:33
Actually, I might be mislead about the C-L needing to "accurate". You can sure put in a good estimate (the length of the JSON-text) and set the header manually (or maybe with http://php.net/manual/en/function.ob-get-length.php) - see http://stackoverflow.com/questions/9728269/content-length-and-other-http-headers as well — user2864740, Feb 25 '15 at 21:35
@user2864740 Ok, using the help from your comment, I was able to get my PHP document to send a Content-Length. however, despite having a Content-Length, my `evt.total` is still returning 0? — Justin, Feb 25 '15 at 21:57

score 1 · Accepted Answer · edited May 23 '17 at 10:24

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!

edited May 23 '17 at 10:24

Community

1
1

answered Feb 26 '15 at 17:32

Justin

476
5
17

Jason Murray · Answer 2 · 2015-02-25T22:35:48.833

0

EDIT - Misunderstood the request process.

edited Feb 25 '15 at 22:35

answered Feb 25 '15 at 22:21

Jason Murray

166
6

I'm not sure how I could implement this solution, unless I made an ajax request ahead of it. My code is running on a phone (PhoneGap App) which has no PHP support. In my current code I wouldn't get the value of `$eventTotal` until the `success` function, which by that time is too late. – Justin Feb 25 '15 at 22:30
Kept the answer here so I can comment, you say your content length is now being sent with the request, what does the client receive as the content length now? – Jason Murray Feb 25 '15 at 22:36
Also what is the Content-Encoding of the response, if it is deflate then lengthComputable will be false. – Jason Murray Feb 25 '15 at 22:40
I've added the header data to my post. The Content-Encoding is `gzip`. – Justin Feb 25 '15 at 22:42
Have you seen this post? http://stackoverflow.com/questions/15097712/how-can-i-use-deflated-gzipped-content-with-an-xhr-onprogress-function this sounds like your problem and the answers should help you out. – Jason Murray Feb 25 '15 at 22:43
Hmm... I tried the solutions listed on that SO page with no luck. This is really bizarre... – Justin Feb 25 '15 at 22:57

XMLHttpRequest "total" returns 0 when fetching JSON

2 Answers2