22

I am having trouble setting the XHR responseType to "json". It works fine if I leave it an empty string xml.responseType = ""; but when I set it to "json" I get the console error message SYNTAX_ERR: DOM Exception 12.

The .js file:

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

The .php file:

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

Not sure what's going on.. Any ideas?

alnafie
  • 10,558
  • 7
  • 28
  • 45
  • Ok.. after further testing, it will accept all of the values mentioned [here](https://developer.mozilla.org/en/XMLHttpRequest) ("document", "blob", "arraybuffer", "text", "") EXCEPT for "json". I tried it on Chrome 17 and Safari 5.1 – alnafie Mar 23 '12 at 20:26
  • Also remember, when outputing information from a server put a proper content mime type in the return. header("Content-Type: application/json"); should fix the issue. Also, you should be using json_encode instead of crafting the json yourself. print json_encode(array("key1" => "val1", "key2" => "val2")); – Rahly Jan 29 '14 at 23:40
  • As of March 2014, responseType = "json" is supported in latest Chrome and Firefox as well as Opera. – gsklee Mar 12 '14 at 04:52

2 Answers2

32

responseType property for XMLHttpRequest object is added in its new variant XMLHttpRequest Level 2 and which is included in HTML 5, i am not sure all browsers support this method so it could be possible that you are using a browser which doesn't implement that method

instead of using responseType you can use following code to get data in 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);
Saket Patel
  • 6,573
  • 1
  • 27
  • 36
  • or use eval(xml.responseText) to go for sure – Peter Aron Zentai Mar 23 '12 at 20:06
  • 19
    i would not recommend using eval, because doing eval on user returned data is not safe, if you want to make sure that this will work even if browser natively doesn't support JSON parsing then you can use library like this http://www.json.org/js.html, but thanks for the feedback :) – Saket Patel Mar 23 '12 at 20:11
  • 3
    You can also surround the `JSON.parse` call in a `try-catch` block in order to see whether the `responseText` property was properly parsed as valid JSON. – Cory Gross Dec 07 '13 at 01:10
  • 2
    Also to note, the JSON.parse() is insanely more lightweight than eval() as well because it doesn't have to worry about functions and actually executing code. JSON.parse() combined with JSON.stringify() are incredibly invaluable tools. – Rahly Jan 29 '14 at 23:43
  • exact, on IE don't use xhr.responseType = 'json'; and parse yourself the response var res = JSON.parse(xhr.responseText); – stloc Jun 05 '19 at 12:45
8

The JSON responseType is not implemented in the WebKit. http://groups.google.com/a/chromium.org/group/chromium-bugs/browse_thread/thread/8107e50e4207eb5a/a5d2c31247feae56?lnk=raot

Update 2016-01-03: As could be expected, WebKit has implemented this feature in the meantime.

Peter Aron Zentai
  • 11,482
  • 5
  • 41
  • 71