Is it possible for ajax to provide me with the information regarding the data size of the URL

Is there a way for the xjr object to access the total data size in KB or MB? I have been using the progress event and it can track this, so I was curious about obtaining the total data size.

Here is the code snippet:

var container = Pub.el('#super-1');
if (container) {
    xhr.addEventListener("progress", function(evt){
        if (evt.lengthComputable) {
            var percent = ( evt.loaded / evt.total ) * 100;
            var exists = document.getElementById(config_ajax.url)
            if(exists){
                Pub.log('div exists');
                exists.style.width = percent + '%';
            } else {
                Pub.log('div created');
                var div = document.createElement('div');
                div.id=config_ajax.url;
                div.style.width = percent + '%';
                div.style.height = '5px';
                div.style.background = 'rgba(255,255,255,0.2)';
                div.style.borderBottom = '1px solid white';
                container.appendChild(div);
            }
        }
    }, false);
}
return xhr;

};

Answer №1

Servers might include the content length in the additional content-length header. Access it using getResponseHeader to see if it's provided.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to add the input from a dynamically loaded Ajax select list to a different form prior to submission

Let's simplify the code for this question: I have two HTML forms with IDs of 'header' and 'existing' In the 'existing' form, there is a select element where the options list is loaded dynamically using Ajax based on sea ...

Having trouble retrieving the chosen option from the select elements

Below is a portion of the code that I have written to capture the selected values of class code and section from a dropdown menu. Currently, only the first element of the select is being retrieved instead of the chosen element. HTML Code: <div id="dia ...

Displaying and concealing table rows based on selected items

After spending a whole day trying to get this HTML/java script to work properly, I came across some code online that I used here. My goal is to have the "Colors*" row not displayed when the page loads, but to show the color options when a shirt size is sel ...

transferring data between PHP frames

Having a PHP variable within a frame from a frameset that must be passed to two other frames at the same time is proving to be a challenge. One of those frames refreshes every 5 seconds, making it easy to extract the variable from the URL. The other frame, ...

The significance of having spaces in the PATH for npm

Attempting to set up gulp, but encountering the following error: module.js:471^throw err : cannot find module 'C:\c\Users\Joe's Steezy Laptop\AppData\Roaming\npm\node_modules\gulp-cli\bin\gul ...

Stop AJAX from Sending Cookies

When using a web service invoked from a script, I have noticed that even if no cookie information is needed, the cookie is still sent along with each request. While I understand that cookies are typically sent by default in HTTP requests, is there any way ...

Activate the action using the onclick interaction

window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false); My current setup involves an event listener that responds to a mousewheelEvent by executing a function. However, when attempting to directly trigger this function on a separa ...

Toggle the visibility of items based on the user's login status

Below is the code snippet for when the user is logged out: <div class="fusion-secondary-main-menu"> <div class="fusion-row"> <?php avada_main_menu(); ?> <?php avada_mobile_menu_search( ...

Vue component fails to render due to a simple issue

I've been diving into Vue.JS and I'm facing an issue where the component I created isn't showing up on the page. Here's a snippet of my component: import Vue from 'vue' const card = new Vue({ el: '#card', data: ...

Having trouble importing Bootstrap into Next.js? It seems like the issue may be related to the

I am currently facing an issue with importing bootstrap 5.3.2 (not react-bootstrap) into my NextJS 14.1.0 project that utilizes the new App Router. My goal is to strategically utilize individual Bootstrap components (not through data-attrs). I managed to ...

Is it considered a best practice to return data fields after a successful REST API POST/PUT/DELETE request?

Just a question about the most effective strategies: Imagine I have an AJAX PUT request sent to a REST API to update a specific resource: $.ajax({ url: "/loads/" + id, type: "PUT", data: { name: "some name", age: 34, t ...

Ensure to wait for the user ID before accessing Firestore collections

Trying to wrap my head around rxJs and experimenting with using the where query in Firestore collection. However, I've run into an issue where the output of this collection is dependent on retrieving the user ID from Firebase Auth. Here's what I ...

Real-time chart updates through REST API integration with JavaScript

I am searching for a JavaScript library that is capable of creating line charts and making calls to a REST API every few seconds (such as 5s or 3s) in order to update the line chart dynamically. I have found some libraries that support live chart updatin ...

Tips for recognizing a specific object ID within an array in order to modify the status of an element within that object

My goal is to accurately identify a specific panel within an expanded array and link that panel's ID to a button, while also ensuring the button is disabled when no panels are expanded or more than one panel is expanded. However, I am encountering iss ...

What exactly is the data type of setInterval in TypeScript?

If I want to define the type of a variable that will be used with setInterval in the following code snippet: this.autoSaveInterval = setInterval(function(){ if(this.car.id){ this.save(); } else{ this.create(); } ...

fetch and parse JSON data using jQuery

I am currently developing a basic chatbox using Zend Framework and JQuery. I am using $('#outputArea') to load the content, which is essentially a div with $.load(). However, the response I get is a JSON object with multiple messages that I need ...

What is the best way to prevent the chaining of promises and catches in JavaScript?

I am currently developing an API using node and express to create users. However, I find myself struggling with error handling due to the asynchronous nature of MongoDB functions, which makes me feel like I'm trapped in a "promise hell." I anticipate ...

Using radio buttons and a price slider, a unique jQuery filter for products can be

I have successfully implemented basic functionality to filter products based on price (slider) and radio boxes. However, the current filter system uses OR logic, but I need it to use AND instead. For instance, I want to find a product that is from Brand1, ...

Steps for referencing an autogenerated id in a Firestore collection

I need assistance updating a 'progress' field in a document with an autogenerated ID (using Firestore) every time the progress button is clicked. https://i.stack.imgur.com/hZieN.png Despite my attempts, nothing seems to work. Here is the method ...

Difficulty accessing `evt.target.value` with `RaisedButton` in ReactJS Material UI

My goal is to update a state by submitting a value through a button click. Everything works perfectly when using the HTML input element. However, when I switch to the Material UI RaisedButton, the value isn't passed at all. Can someone help me identif ...