javascript - How do I get the content-length header for jQuery AJAX POST success object?

Question

I have a jQuery AJAX call that appends a URL's page into a selector. I want to monitor the progress of the page being appended:

$.ajax({
        
    url: URL,
    type: 'POST',
    data: {
        page: 'page'
    },
    dataType: 'HTML',
    async: true,
    cache: false,
    xhr: 
    function() {
    
        var XHR = new window.XMLHttpRequest();
        
        XHR.upload.addEventListener('loadstart', HandleXHR); // Upload has begun
        XHR.upload.addEventListener('progress', HandleXHR); // Periodically indicates the amount of progress made so far
        XHR.upload.addEventListener('error', HandleXHR); // Upload failed due to an error
        XHR.upload.addEventListener('abort', HandleXHR); // Upload operation was aborted
        XHR.upload.addEventListener('load', HandleXHR); // Upload completed successfully
        XHR.upload.addEventListener('loadend', HandleXHR); // Upload finished
    
        function HandleXHR(event) {
            
            if(event.lengthComputable) {
                
                PercentProgress = Math.floor((event.loaded / event.total) * 100);
        
                console.log(PercentProgress); // Returns 'Content-Length' header of data object (above)
        
            }
        
        }
        
        return XHR;
    
    },
    success: 
    function(data) {

        console.log(data.length); // Returns more accurate number (probably what I want)
            
        $('.selector').html(data);
        
    }
                
});

How do I compute the correct header Content-Length information in the XHR object to show the progress status of the AJAX call success object as apposed to the header Content-Length of the data object [that I'm already getting]?

Answer 1

等待大神解答