从 XmlHttpRequest.responseJSON 解析 JSON

javascript json firefox-addon bit.ly

2022-08-30 04:59:07

我正在尝试在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;  
}

我在火狐插件中这样做。当我运行时，我收到该行的错误“jsonResponse是未定义的”。我在这里解析JSON时做错了什么吗？或者这段代码有什么问题？var bitlyUrl = jsonResponse.results[url].shortUrl;

答案 1

新方法 I： 获取

TL;DR我建议你这样做，只要你不必发送同步请求或支持旧浏览器。

只要您的请求是异步的，您就可以使用 Fetch API 发送 HTTP 请求。fetch API与promise一起工作，这是在JavaScript中处理异步工作流的好方法。使用此方法，您可以发送请求并解析响应：fetch()ResponseBody.json()

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

兼容性：IE11 以及 Edge 12 和 13 不支持 Fetch API。但是，有polyfills。

新方式二：响应类型

正如Londeren 在他的答案中所写的那样，较新的浏览器允许您使用该属性来定义响应的预期格式。然后，可以通过以下属性访问解析的响应数据：responseTyperesponse

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);

兼容性： 响应类型 = 'json' IE11 不支持。

经典方式

标准 XMLHttpRequest 没有属性，只有和。只要真的用一些JSON响应你的请求，就应该包含JSON代码作为文本，所以你所要做的就是用：responseJSONresponseTextresponseXMLresponseTextJSON.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

如果您更喜欢使用，但想要比 JQuery 更轻量级的解决方案，则可能需要查看我的 JSONHttpRequest。它的工作方式与普通的 XMLHttpRequest 完全相同，但也提供了该属性。所有你需要在代码中改变的就是第一行：responseJSONresponseJSON

var req = new JSONHttpRequest();

JSONHttpRequest还提供了将JavaScript对象作为JSON轻松发送的功能。更多细节和代码可以在这里找到：http://pixelsvsbytes.com/2011/12/teach-your-xmlhttprequest-some-json/。

完全披露：我是 Pixel 像素代码的所有者|字节。我认为我的脚本是解决原始问题的一个很好的解决方案，但它今天已经过时了。我不建议再使用它。

答案 2

您只需设置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();

响应类型的文档