0

When loading .php files through Ajax, I want to show how far the progress is rather than just the default spinner method $("#loader").css("display", "none"); .

Now as I have been building this, I have learnt that Chrome sends chunked data so the content-length parameter is not easily populated. There are a million questions on here about this as well.

So I am looking at the solution here from Nat and trying to set a header myself that will eventually contain the file size. I haven't even gotten to getting the full decompressed value to pass into the customer header (next bridge to cross) as I am trying to just pass a static value right now to check that the below JS works. You can see I am setting a value of 333 below. I have tried the same with headers: as you can see commented out in the first line. Both methods set the headers but I dont get them when trying to log them into console to check why contentLength is always NaN.

FYI I have commented out //progressIndicator.update(e.loaded / contentLength); below to avoid it crashing on error but will restore this part once I can actually get a byte value from the server.

                $.ajax({
                    //headers: { 'x-decompressed-content-length': '333' },

                    xhr: function () {
                        
                        var xhr = new window.XMLHttpRequest();

                        xhr.addEventListener("progress", function (evt) {
                          var contentLength;
                          if (evt.lengthComputable) {
                            contentLength = evt.total;
                          } else {
                            console.log('all: ' + xhr.getAllResponseHeaders()); 
                            contentLength = parseInt(evt.target.getResponseHeader('x-decompressed-content-length'), 10);
                          }
                          //progressIndicator.update(e.loaded / contentLength);
                        }); 

                        return xhr;
                    },
                    beforeSend: function (xhr){ 
                        xhr.setRequestHeader('x-decompressed-content-length', '333'); 
                    },
                    url: cyberAjax.ajaxurl,
                    data: ({ 
                        action: 'ajax_load_tabs',
                        id: tab_id,
                        userid: userid,
                    }),
                    
                    success: function(data){
                        $(tab_id).html(data);
                    },
                    error: function(data)  
                    {  
                    console.log("Error!");
                    return false;
                    }  
                });

Here you can see the header is set when I check the XHR requests in Network tab:

enter image description here

But when I use the console.log in the script above to retrieve all headers, there is no sign of them (and so my contentLength is always NaN):

enter image description here

Any thoughts?

IcedQuick
  • 61
  • 8
  • 1
    I think that you're confusing the request with the response. The first image shows request headers that are sent to the server, and the second image shows response headers. If you want to set response headers you need to do that on the server, not in the browser. You don't show any PHP code so I assume that you want to do that in JavaScript in the browser. – jcubic Jul 02 '22 at 11:52
  • Thanks @jcubic, I see what you mean now, indeed they were request headers and not response headers. Thank you for helping me to better understand AJAX – IcedQuick Aug 22 '22 at 19:20

0 Answers0