It is not feasible to establish a personalized encoding while sending a post request through XMLHTTPRequest

When using the JS console in the latest version of Chrome browser, I encountered the following issue:

x = new XMLHttpRequest();
x.open('POST', '?a=2');
x.setRequestHeader('Content-Type', 
                   'application/x-www-form-urlencoded; charset="ISO-8859-1"');
x.send({b:2});

An error occurred where the request was sent with the incorrect encoding. Upon inspecting the network, I noticed:

Content-Type:application/x-www-form-urlencoded; charset="UTF-8"

Additionally, there was a strange behavior observed when specifying charset=ISO-8859-1 instead of charset="ISO-8859-1", as it resulted in:

Content-Type:application/x-www-form-urlencoded; charset=UTF-8

Clearly indicating a change had occurred.


Edit 2013/12/11

Interestingly, the bug that stood out to me was that if no data is sent, the encoding change functions correctly. Consider this revised example (noting the adjustment on the last line) :

x = new XMLHttpRequest();
x.open('POST', '?a=2');
x.setRequestHeader('Content-Type', 
                   'application/x-www-form-urlencoded; charset="ISO-8859-1"');
x.send();

In this scenario, the network output correctly displays:

Content-Type:application/x-www-form-urlencoded; charset="ISO-8859-1"

Quite puzzling indeed...

Answer №1

The W3C XMLHttpRequest specification specifies that the charset must always be UTF-8, attempting to set a different charset will not alter the browser's encoding.

It is important to note that the documentation for jQuery's $.ajax method also reinforces this concept regarding setting the Content-Type.

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

Tips for implementing jQuery on HTML loaded post document.ready():

I've encountered a scenario where I have multiple HTML elements being rendered by a JavaScript function on the page: <a href="#" class="test1">Test</a> <a href="#" class="test2">Test</a> <a href="#" class="test3">Test< ...

Is the webdriver.io waituntil method designed to return a boolean value of true or false

I am working on an automation framework using webdriver.io v5. I need to receive a boolean response from the code snippet below: waitAndCheckForContactToBePresent(contactName) { return browser.waitUntil((value) => { return this.chec ...

Javascript's callback mechanism allows functions to be passed as arguments

I am currently delving into the intricacies of the callback mechanism in javascript, particularly typescript. If I have a function that expects a callback as an input argument, do I need to explicitly use a return statement to connect it with the actual ca ...

onmouseleave event stops triggering after blur event

I am facing an issue with a mouseleave event. Initially, when the page loads, the mouseleave event functions correctly. However, after clicking on the searchBar (click event), and then clicking outside of it (blur event), the mouseleave functionality stops ...

Avoiding the refreshing of the footer when navigating through pages

In my music application, there is a simple player located in the footer. Users can choose songs from the main page list and play them in the footer. The current requirement is that even if a user navigates from the home page to other pages (profile, bookma ...

Generating a hierarchical structure of JSON data through iterative looping

Currently, I am in the process of creating a directive within Angular to assist with field validation. The functionality is working smoothly until it comes time to store the validation result. My objective is to store this information in an object structu ...

Tips for refreshing the page without losing the values of variables

In my simulation.jsp file, I have the following code that retrieves simulation data from a struts2 action: $(document).ready(function() { var data='<s:property escape="false" value="simInfos" />'; } Once I perform the simulation with this ...

Launching an HTML document with checkboxes already selected

I am attempting to load my HTML page with checkboxes already checked if they were selected on the previous page. The code I currently have is shown below: {% if job.activism %} checkbox logic goes here {% endif %} <br><input type="checkbox ...

Ways to empty an angularJS array

let itemList = ['X', 'Y', 'Z']; Even though the array is cleared, the user interface does not reflect the change. itemList = []; This method solves the issue. But why? itemList.length = 0; ...

Using a Javascript loop to showcase values from a database

As a Python developer who is new to JavaScript and AJAX, I am currently working on creating a pie chart that displays database values. $(document).ready(function () { google.charts.load('current', { 'packages': ['corechart&ap ...

Create a fresh trail underneath the overlay image

When utilizing fabric.js to draw a new path with isDrawingMode: true enabled (seen on the right side of the screenshot), I am encountering an issue where the path appears above my overlay image, which is a transparent png. https://i.stack.imgur.com/R3fGn. ...

Using lodash in JavaScript to flatten a nested object structure

I'm looking to flatten a hierarchical json structure. Here is an example of my json data: { "id": "111", "name": "v5", "define": { "system": "abc", "concept": [{ "code": "y7", "concept": [{ "code": "AGG", "di ...

What is the method to remove an authentication code from a JSON file using JavaScript?

Is there a way to delete something from a JSON file? Here is an example: The file I am working with is named test.json Before I delete the authentication code: { "auth": [ { "test": 944037 }, { "tester& ...

What is the best way to conceal the standard 'X' close button within a magnific popup interface?

I implemented the Magnific-popup plugin in my jsp to show messages to users. Here is the code I used to open Magnific Popup: $.magnificPopup.open({ items: { type: 'inline', src: '#idOfSomeDivInPage' }, focus: '#some ...

Instructions for making dropdown menus that dynamically reduce their options as you make selections:

I have an HTML form structured like this: Within the dropdowns, there is a uniform list of choices: Option 1, Option 2, Option 3. Users must select a value for each key, which currently functions correctly: Yet, I am seeking to enhance this functionality ...

Using the TIMESTAMP data type in PostgreSQL and getting the most out of it

After saving a Luxon datetime value in a TIMESTAMP(3) type column in a postgres database, I encountered difficulty using it for various operations like converting time zones. Despite creating the object with the code snippet below: const { DateTime } = req ...

Exploring the world of color in Google visualization charts

I am currently working on a project that requires me to add different colors to specific zones on a graph. I am looking to use colors such as blue, red, yellow, and green. Here is the outcome I have achieved: I am aiming for something similar to this des ...

The checkbox is currently selected, however, I would like it to be dese

I am facing an issue where I cannot figure out why the password checkbox always turns to checked even when it is supposed to stay unchecked. No matter what, it doesn't behave as I intended and I am struggling to explain this behavior... <template&g ...

Issue with `npm run watch` failing to compile when the data source is turned

Currently, I am faced with a challenge while working on Laravel and utilizing various node packages for development. The issue at hand is my limited internet connectivity. Every time I attempt to execute npm run watch, it refuses to initiate unless I am c ...

A ReferenceError was thrown because angular is not defined within the angular-moment.js script

After spending an hour trying to figure out what went wrong, I still can't solve this problem. I've searched on stackoverflow for answers, but nothing seems to be helpful. The issue arises when trying to integrate Moment js into my project. Che ...