[JavaScript] IE11でXHR時にInvalidStateErrorが発生する問題の対処法

IE11でXMLHttpRequest()を使ったJSON取得ができなかった。

問題点

responseTypeを指定する順番

xhr.open('GET', 'https://example.jp/rest-api/posts.json', true);
xhr.responseType = 'json';
xhr.send();

responseTypeの設定は、open()の後に記述する。
モダンブラウザでは問題ないが、IE11などではエラーとなる。

IE11ではresponseTypeにJSONが指定できない

XMLHttpRequest – Web API インターフェイス | MDNを確認すると、IE11ではresponseType = 'json'が未対応である事がわかる。

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
responseType = ‘arraybuffer’ 10 6.0 10 11.6 (有)
responseType = ‘blob’ 19 6.0 10 12 (有)
responseType = ‘document’ 18 11.0 10 未サポート 6.1
responseType = ‘json’ 31 10.0 未サポート 12
未サポート 16
17
(有)

responseType = 'json'を指定しても、IE11ではresponseは、string型になっている。
解決方法としては、JSON形式にパースしてやれば良いので、以下のように型をチェックして、パースすればモダンブラウザと同じ振る舞いが可能となる。

xhr.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
        var response = this.response;
        if (typeof(response) === 'string') {
            resoinse = JSON.parse(response);
        }
        // ...
    }
}

条件は、IE11を判定(navigator.userAgent.indexOf('Trident') !== -1)しても良いし、responseTypeを始めからtextにしておいてresponseを問答無用でparseしても良い。