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リクエストを送信できます。フェッチAPIはpromiseで動作します。これは、JavaScriptで非同期ワークフローを処理するための優れた方法です。このアプローチではfetch()、リクエストの送信とResponseBody.json()レスポンスの解析に使用します。

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

互換性：Fetch APIは、IE 11とEdge 12＆13ではサポートされていません。ただし、ポリフィルがあります。

新しい方法II： responseType

以下のようLonderenがで書かれた彼の答え、新しいブラウザは、あなたが使用できるようにする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の所有者です。私のスクリプトは問題の良い解決策だと思うので、ここに投稿しました。リンクを削除する場合は、コメントを残してください。

簡単に設定できます xhr.responseType = 'json';

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.responseType = 'json';
xhr.onload = function(e) {
  if (this.status == 200) {
    console.log('response', this.response); // JSON response  
  }
};
xhr.send();
  

responseTypeのドキュメント

注：これはChromeでのみテストしました。

それはXMLHttpRequestを...にプロトタイプ機能を追加しXHR2、

でXHR 1あなたはおそらく交換する必要があるthis.responseとthis.responseText

Object.defineProperty(XMLHttpRequest.prototype,'responseJSON',{value:function(){
 return JSON.parse(this.response);
},writable:false,enumerable:false});

xhr2でjsonを返す

xhr.onload=function(){
 console.log(this.responseJSON());
}

編集する

arraybufferまたは他の応答タイプでXHRを使用する場合は、応答がかどうかを確認する必要がありstringます。

いずれにしても、jsonを解析できない場合など、さらにチェックを追加する必要があります。

Object.defineProperty(XMLHttpRequest.prototype,'responseJSON',{value:function(){
 return (typeof this.response==='string'?JSON.parse(this.response):this.response);
},writable:false,enumerable:false});

使用するにはjQueryを含める必要があると思いますresponseJSON。

jQueryがなければ、responseTextで試して、 eval("("+req.responseText+")");

更新：に関するコメントを読んでくださいeval。evalでテストできますが、機能拡張では使用しないでください。

または

json_parseを使用：使用しませんeval

これがFF拡張の場合は、nsIJSONを使用します。

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 = Components.classes["@mozilla.org/dom/json;1"]
      .createInstance(Components.interfaces.nsIJSON.decode(req.responseText);
  var bitlyUrl = jsonResponse.results[url].shortUrl;
}

ウェブページの場合は、JSON.parse代わりにComponents.classes["@mozilla.org/dom/json;1"].createInstance(Components.interfaces.nsIJSON.decode