Error encountered: Setting the XMLHttpRequest responseType to "json" results in a SYNTAX_ERR: DOM Exception 12

I've been encountering an issue while trying to set the XHR responseType to "json". Everything seems to be working fine when I keep it as an empty string xml.responseType = "";. However, once I switch it to "json", I'm hit with the console error message SYNTAX_ERR: DOM Exception 12.

Here's my .js file:

var xml = new XMLHttpRequest();
xml.open("GET", "test.php", true);
xml.responseType = "json";
xml.send();

And here's the corresponding .php file:

<?php
$foo = "{\"key1\":\"val1\", \"key2\":\"val2\"}";
echo $foo;
?>

I'm stumped on this one.. Any suggestions or insights would be greatly appreciated!

javascriptajaxxmlhttprequest

Answer №1

responseType property for XMLHttpRequest object is introduced in the newer version known as XMLHttpRequest Level 2 and it is included in HTML 5. It's worth noting that not all browsers may support this method, so if you are experiencing issues, it could be due to using a browser that does not implement this feature.

If you encounter compatibility issues with responseType, you can use the following code snippet to retrieve data in the desired format:

 var xml = new XMLHttpRequest();
 xml.open("GET", "test.php", true);

 xml.onreadystatechange = function() {
   if (xml.readyState != 4)  { return; }

   var serverResponse = JSON.parse(xml.responseText);
 };

 xml.send(null);

Answer №2

The feature of JSON responseType was previously missing in WebKit. Find more information here.

Update as of 2016-01-03: It appears that WebKit has now added this functionality.

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

What is the process for retrieving POST data in Python using the Pyramid framework?

Can anyone help me find the Python equivalent of PHP's $_POST[] method? In PHP, I can easily retrieve form data using $_POST[], but how can I achieve this in Python? Below is my current code: function NewUser(){ var firstName = $( ...

pythonajaxpyramid

Tips for removing an element from an array in a JSON structure using its unique identifier

This problem seems to be fairly straightforward but it’s giving me some trouble. Here is the JSON structure I'm working with: "playlists" : [ { "id" : "1", "owner_id" : "2", ...

javascriptnode.jsreactjsjsonecmascript-6

"Unlocking the potential of JSON: A guide to retrieving and displaying three specific fields in

My PHP service is returning the following data: [[1,"16846"],[2,"16858"],[3,"16923"],[4,"16891"]] Within my HTML, I have ajax set up to fetch this information; $.ajax({ type: 'POST', url: 'getDadosGrafico.php', ...

javascriptphpjqueryjsonajax

Unable to display information from a repeated `textarea` in ngRepeat

Check out my code on Plunker: https://plnkr.co/edit/rBGQyOpi9lS0QtnCUq4L I'm trying to log the content of each textarea when typing, using the printStuff() function: $scope.printStuff = function(customize, item) { console.log(customize[item.inde ...

javascripthtmlangularjs

What is causing this code to break when using ajax's `data` parameter?

I'm relatively new to JavaScript, and I've been working on some code that seems to be properly formatted. However, whenever I add the data elements, it breaks the code. I've checked the jQuery documentation and as far as I can tell, I'm ...

javascriptjquerydatatables

Discovering the window.scrollTop, ScrollY, or any other distance value while utilizing CSS scroll snap can be achieved by following these

I am currently utilizing css scroll snap for smooth scrolling through sections that are 100vh in height. The functionality of the scroll snap is quite impressive. However, I need to find a way to determine the exact distance the user has scrolled down the ...

javascriptcssscroll-snap

What is the process of transforming an object type into a two-dimensional array using lodash?

In order to properly display multiple tables in my Angular project, I am looking to convert an object type into an array of different objects. The object I am working with is as follows: let myObject = { internalValue:{city:"Paris", country:"France", pin ...

javascriptangulartypescriptobjectlodash

What is the best way to link this to a function in AngularIO's Observable::subscribe method?

Many examples use the Observable.subscribe() function in AngularIO. However, I have only seen anonymous functions being used like this: bar().subscribe(data => this.data = data, ...); When I try to use a function from the same class like this: update ...

javascriptangulartypescriptthissubscribe

Is it better to dynamically generate HTML elements or to just directly paste complete fragments in the code?

After manipulating the DOM and injecting AJAX content, I often find myself filling in the new content into a copied HTML fragment, then populating it with the updated information before using $().html() to insert the modified code back into the DOM. The ex ...

javascripthtmlajaxdom

"Encountering a Problem with Assigning Variables in Vue

My issue revolves around the integration of VueJs, Vue-Resource, and Laravel. The problem occurs when attempting to assign a local variable to response data received from an AJAX request using vue-resource. Code Javascript <script> flags_ ...

javascriptlaravelvue.jsvue-resource

Generate a dynamic chart using Angular-chart.js on a canvas that is created on the fly

I am facing an issue with displaying a chart or table in a div based on an XHR response. In the case of a chart, I want to replace the div contents with a canvas element that will be used by chart.js to show a graph. When I directly include the canvas ele ...

javascriptangularjschart.jsangular-chartist.js

Manipulating files with the Play framework

I am looking to upload a file from the client side and process it on the server side without having to reload the entire webpage. I am currently working with Scala in Play framework 2.X, utilizing separate HTML and JavaScript scripts. The file types I am w ...

jqueryajaxscalaplayframework-2.0

Executing JavaScript function by clicking on <img>

I've been developing a website similar to YouTube, and I'm facing difficulties with the Like/Dislike feature for comments. Currently, I have implemented it in the following way: when a user clicks on an image (thumbsUp.png or thumbsDown.png), a ...

javascriptphphtmlajax

Safari and Chrome are directing Angular Http Post requests to different URLs

Using the Angular framework and the $http directive to make a post request to our API endpoint works fine in Chrome, but I'm encountering an issue in Safari. Below is the code snippet from my Api factory: assignments: function(csv) { var deferred = ...

jqueryangularjsajaxhttpsafari

Show error message and display in ajax response

Hey there! I have a question about using Ajax to send error messages if an error occurs, otherwise sending the view. Here is my code snippet and I would really appreciate some guidance or suggestions on what to do next: Here is an example of my code: pub ...

jqueryajaxasp.net-mvccontroller

Click event dynamically bound to list items

I have a web application built with Durandal and Knockout. Here is the HTML code snippet: <ul id="header"> </ul> In a JavaScript function, I am dynamically adding a list item as follows: $("#header).append('<li id="btn"><a hre ...

javascriptjqueryhtmlknockout.js

Exploring Symfony2: Enhancing user experience with dynamic form submission and dropdown menu updates

Starting from the beginning. I have a tab-panned layout with links. Upon clicking a link, a drop-down checkbox form is injected directly into the HTML through $(".dropdown-toggle").click(function() { var projectId = $("#permission-form").attr("data-p ...

javascriptjqueryajaxformssymfony

What sets Gulp-Browserify apart from regular Browserify?

After switching from Grunt to Gulp recently, I find myself still learning the ropes. Can anyone shed some light on the distinction between using Gulp-Browserify versus just Browserify? I've heard that Gulp-Browserify has been blacklisted and seen som ...

javascriptnode.jsgulpbrowserify

The AJAX response is not functioning as expected

I've encountered an issue with my AJAX code for an online food store. Every time I run it, a pop-up message saying something went wrong appears instead of the expected output. I suspect there might be an error in either the connection handlers or the ...

javascriptphpajax

The autosearch feature seems to be malfunctioning

I am currently working on implementing an autocomplete suggestion feature using the AutoComplete plugin from GitHub. I am using a combination of HTML, JavaScript, and CSS for this project. The functionality works perfectly when I hardcode the data in the f ...

javascriptjqueryhtmlarraysjson