"XMLHttpRequest 206 Partial Content: Understanding the Importance of Partial

I need help with making a partial content request using an XMLHttpRequest object in JavaScript. Currently, I am trying to load a large binary file from the server and want to stream it similar to how HTML5 video is handled.

While setting the Range header using setRequestHeader works fine, I'm facing issues with the Accept-Encoding header being automatically set to "gzip,deflate" by Chrome. According to W3C standards, I cannot override this header.

Does anyone know a method to make the server respond with a 206 partial content when using the XMLHttpRequest object solely through JavaScript?

javascriptajaxxmlhttprequest

Answer №1

I recently tested this range-request and it executed perfectly for me: http://example.com/test123/

let ajax = new XMLHttpRequest;

ajax.onreadystatechange = function () {
  if (ajax.readyState != 4) {
    return;
  }
  alert(ajax.status);
};

ajax.open('GET', 'http://test.example.net/image/logo.png', true);
ajax.setRequestHeader('Range', 'bytes=150-250'); // indicate the bytes (inclusive) you are requesting
ajax.send(null);

It is essential to confirm that the server supports range requests. You can check this using curl:

$ curl -v -r 150-250 http://testing.com/video.mp4 > /dev/null

Answer №2

After some investigation, I have finally discovered the reason behind the 206 request not functioning properly. It turns out that when gzip compression is enabled, the range header is disregarded if the data can be gzipped.

The specific file I was attempting to retrieve happened to be a large binary file, which nginx mistakenly identified as having a mimetype of application/octet-stream. As a result, this particular mimetype is one that gets compressed using gzip. By simply renaming the file with a .png extension, it triggered the image/png mimetype instead, preventing gzip compression and allowing the range request to function correctly.

Furthermore, by adjusting the Accept-Encoding header to 'identity' within curl, the range request also worked flawlessly. Unfortunately, this cannot be manipulated from an XHR.

Ultimately, the solution lies in modifying the mimetype table on the server!

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

Utilizing Next.js for dynamic routing with [[...slug.js]] allows for comprehensive URL handling and seamless 404 page display for links leading back to the homepage - a feature

In order to achieve a single dynamic route for handling all requests in this application, I have created a file called [[...slug]].js. Data loading is managed using getServerSideProps(), allowing for server-side rendering. Notably, there are no index.js fi ...

javascriptnext.jsnext-link

The deletion request using the form in Express is experiencing issues and not functioning properly

When attempting to delete data from a database using a form in node.js and express, I am encountering issues with the deletion process. It seems that there are only two methods available - get and post - and no specific delete method. router.js code rout ...

javascripthtmlnode.jsexpress

Avoiding metacharacters and utilizing them as a string variable for selection

For example, I have a variable called myid, and its value is "abc xyz". Then, I use a function to escape metacharacters and assign the result to another variable like this: var x = "#"+escapechars(myid);. The evaluated value of x is #abc\\xyz. ...

javascriptjquery

Top method for establishing a mysql connection in Express version 4

Recently, I installed node-mysql and started running on express 4. Although I'm new to express, I am eager to learn the best practices for handling database connections. In my current setup, I have app.js var mysql = require('mysql'); //se ...

javascriptmysqlnode.jsexpress

Tips on finding the most budget-friendly item in a Vue array

I'm working with an array called item.warehouse_positions that contains various prices and IDs. I want to display only one item.id with the lowest price. How can I achieve this? <div v-for='(item, index) in item.warehouse_positions' :key= ...

javascriptvue.jsvuejs2

Calculating the total of an array's values using JavaScript

Receiving information from an API and looking to aggregate the values it contains. Consider the following code snippet: function totalPesos(){ $http.get('/api/valueForTest') .then(function(data){ $scope.resumePesos = data.data.Re ...

javascriptangularjs

React text hover image functionality

Just diving into the world of React and attempting to create a cool image popup effect when you hover over text in my project. I could really use some guidance on how to make it function within React, as the logic seems a bit different from plain HTML. Any ...

javascripthtmlcssreactjs

Execute the calculation on the user's AWS account

In my Node.js and Vue.js project, the goal is for a user to input their AWS credentials, provide a link to an online data source containing a large amount of data, and run an algorithm on this data using their provided AWS account. I am facing two challen ...

javascriptnode.jsamazon-web-servicescloud

Guide on integrating jQuery list filtering in Ionic 2

I stumbled upon a jQuery function that filters data in HTML, found it online. Now, I want to incorporate a similar feature into my Ionic app. However, I am unsure about the modifications required in list-search-min.js. Here is a snippet of my index.html: ...

javascriptjqueryangularionic-frameworkionic2

Loop through a variable class name in JavaScript

When working with Javascript, I have a series of elements with identical divs: (....loop, where "count" is a unique number for each column) <other divs> <div class="pie"></div> </div> My goal is to be able to rotate each individ ...

javascript

What is the best way to manage variables that are not present in a Vue.js template?

When working with vue.js templates, I often come across instances like this: {{ jobs[0].stages[0].node.name }} If a job has no stages, the entire template fails to load and vue.js admin throws this warning: Error in render: "TypeError: Cannot read prope ...

javascriptvue.js

How to move a div beneath the JavaScript files in Drupal 7

I am facing a challenge where I need to position a div right above the body tag without interfering with the scripts located above it. Despite my efforts, I have not been successful in achieving this goal. I attempted to use Hook_page_build to position t ...

javascripthtmldrupal-7hook

I'm having issues with my flipclock moving too quickly and skipping over certain numbers. Any suggestions on how to resolve this issue?

My flip clock script is behaving oddly, moving too quickly and skipping over even numbers. I've been playing around with the code, and it seems like there's a problem when I use the callbacks function. var clock = $('#clock3').FlipClo ...

javascriptjqueryflipclock

Is there a way to submit an object to the server without using ajax during form submission?

I have a web application built on the ASP.NET MVC 5 framework. One of the pages in my application utilizes the amazing jQuery-QueryBuilder plugin, allowing users to create filters to refine the dataset results. When a user submits the form by clicking the ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-5

Utilize Moment.js in AngularJS for formatting dates

I have been attempting to use moment.js in Angularjs to format a date, but it seems like I am running into some issues. Here is the link to my code snippet on jsfiddle http://jsfiddle.net/sed6x5e8/ and below you can find the HTML and JS code that I am work ...

javascriptangularjs

Adjust the visual presentation based on the chosen option at the top of a column JQchart

Can anyone offer assistance with creating three radio button fields that will display yearly, monthly, or weekly data on a column chart? I have searched through numerous examples in JQchart but haven't found one for this specific scenario. Are there o ...

javascriptjqueryhtmljqchart

Understanding Aspect Ratios in CSS for Div Containers and their Components

I am crafting an HTML5 game without the use of canvas and aiming to maintain a 16:9 aspect ratio within my div. Thanks to javascript, achieving this is straightforward and it functions flawlessly. However, the elements inside the div occasionally appear to ...

javascriptcsshtml

Executing JavaScript with Python in Selenium

Completely new to Selenium. I need help running a javascript snippet in this code (as commented), but struggling to do so. from selenium import webdriver import selenium from selenium.common.exceptions import NoSuchElementException from selenium.webdriver ...

javascriptpythonselenium

Organizing a JSF 2 application to maximize AJAX functionality

While I'm quite familiar with utilizing AJAX in JSF 2 for traditional page navigation, I am now exploring the challenge of building a pure AJAX web application with JSF 2. The goal is to create a web app that only requires one full page load per user ...

javaajaxjsf-2facelets

The rule 'import/no-cycle' definition could not be located

After removing my npm package along with the package.lock.json file, I proceeded to run 'npm install' and followed up with 'npm update'. However, upon starting my application using 'npm run start', an error occurred. Upon lau ...

javascriptreactjsgithubnpmeslint