☰

XmlHttpRequest.responseJSON から JSON を解析する 質問する

tag-icon • tag-icon javascript json firefox-addon bit.ly
XmlHttpRequest.responseJSON から JSON を解析する 質問する

bit.ly JSON 応答を JavaScript で解析しようとしています。

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 の解析に何か間違いがありますか? または、このコードの何が問題なのでしょうか?

ベストアンサー1

新しい方法：fetch

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

リクエストが非同期である限り、フェッチAPIHTTPリクエストを送信します。フェッチAPIは約束これは、JavaScript で非同期ワークフローを処理するための優れた方法です。このアプローチではfetch()、リクエストを送信し、ResponseBody.json()応答を解析するために を使用します。

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

awaitコードを読みやすくするために、promise 表記の代わりにステートメントを使用できます。

const response = await fetch(url);
const jsonResponse = await response.json();
// do something with jsonResponse

互換性: Fetch APIはIE11、Edge12、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。bitlyresponseXMLがリクエストに対して実際に JSON で応答する限り、 にはresponseTextJSON コードをテキストとして含める必要があるため、 で解析するだけで済みます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。

JSONHttpリクエスト

開示: 私は Pixels|Bytes の所有者です。私のスクリプトは元の質問に対する良い解決策だと思いましたが、現在ではかなり時代遅れになっています。これ以上の使用はお勧めしません。

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

var req = new JSONHttpRequest();

JSONHttpRequest は、JavaScript オブジェクトを JSON として簡単に送信する機能も提供します。詳細とコードは、次の場所にあります。http://pixelsvsbytes.com/2011/12/teach-your-xmlhttprequest-some-json/。

おすすめ記事