[解決済み] XmlHttpRequest.responseJSONからJSONをパースする

質問

javascriptでbit.lyのJSONレスポンスをパースしようとしています。

XmlHttpRequestでJSONを取得しました。

var req = new XMLHttpRequest;  
req.overrideMimeType("application/json");  
req.open('GET', BITLY_CREATE_API + encodeURIComponent(url)
          + BITLY_API_LOGIN, true);  
var target = this;  
req.onload  = function() {target.parseJSON(req, url)};  
req.send(null);

parseJSON: function(req, url) {  
if (req.status == 200) {  
    var jsonResponse = req.responseJSON;  
    var bitlyUrl = jsonResponse.results[url].shortUrl;  
}

firefoxのアドオンでやっています。実行すると、次の行でエラー "jsonResponse is undefined" が表示されます。 var bitlyUrl = jsonResponse.results[url].shortUrl; . 私はここでJSONをパースする際に何か間違ったことをしているのでしょうか？または、このコードの何が間違っているのでしょうか？

どのように解決するのですか？

新しい方法I: fetch

TL;DR 同期リクエストを送ったり、古いブラウザをサポートする必要がない限りは、この方法をお勧めします。

リクエストが非同期である限りは Fetch API を使って HTTP リクエストを送ることができます。Fetch API が動作するのは 約束 これは JavaScript で非同期ワークフローを処理するための素晴らしい方法です。このアプローチでは fetch() を使ってリクエストを送信し ResponseBody.json() で応答を解析します。

fetch(url)
  .then(function(response) {
    return response.json();
  })
  .then(function(jsonResponse) {
    // do something with jsonResponse
  });

互換性があります。Fetch API は、IE11 および Edge 12 & 13 ではサポートされていません。 しかし、以下のものがあります。 ポリフィル .

新しい方法 II: responseType

として 凡例 で書いているように 彼の答え というように、新しいブラウザでは responseType プロパティを使って、期待されるレスポンスの形式を定義することができます。パースされたレスポンスデータには response プロパティでアクセスできます。

var req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', url, true);
req.onload  = function() {
   var jsonResponse = req.response;
   // do something with jsonResponse
};
req.send(null);

互換性があります。 responseType = 'json' は IE11 ではサポートされていません。

古典的な方法

標準的な XMLHttpRequest には responseJSON プロパティはなく、単に responseText と responseXML . bitly が本当にリクエストに対して何らかの JSON で応答する限りは。 responseText には JSON コードがテキストとして含まれているはずなので、あとはそれを JSON.parse() :

var req = new XMLHttpRequest();
req.overrideMimeType("application/json");
req.open('GET', url, true);
req.onload  = function() {
   var jsonResponse = JSON.parse(req.responseText);
   // do something with jsonResponse
};
req.send(null);

互換性 この方法は XMLHttpRequest と JSON .

JSONHttpRequest

もしあなたが responseJSON を使いたいが、JQuery よりも軽量なソリューションが必要な場合は、私の JSONHttpRequest をチェックアウトしたいと思うかもしれません。これは通常のXMLHttpRequestと全く同じように動作しますが、同時に responseJSON プロパティを提供します。あなたのコードで変更しなければならないのは、最初の行だけでしょう。

var req = new JSONHttpRequest();

JSONHttpRequestは、JavaScriptのオブジェクトをJSONとして簡単に送信する機能も提供します。詳細とコードはこちらでご覧になれます。 http://pixelsvsbytes.com/2011/12/teach-your-xmlhttprequest-some-json/ .

完全な開示: 私は Pixels|Bytes のオーナーです。私のスクリプトは元の質問に対する良い解決策であると考えましたが、今日ではかなり時代遅れです。私はもうそれを使用することをお勧めしません。