New ways I: 100
100 I'd recommend this way as long as you don't have to send synchronous requests or support old browsers.
A long as your request is asynchronous you can use the Fetch API to send HTTP requests. The fetch API works with promises, which is a nice way to handle asynchronous workflows in JavaScript. With this approach you use fetch()
to send a request and ResponseBody.json()
to parse the response:
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(jsonResponse) {
// do something with jsonResponse
});
Compatibility: The Fetch API is not supported by IE11 as well as Edge 12 & 13. However, there are polyfills.
New ways II: 100
As Londeren has written in his answer, newer browsers allow you to use the responseType
property to define the expected format of the response. The parsed response data can then be accessed via the response
property:
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);
Compatibility: responseType = 'json'
is not supported by IE11.
The classic way
标准的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);
Compatibility: This approach should work with any browser that supports XMLHttpRequest
and JSON
.
JSONHttpRequest
If you prefer to use responseJSON
, but want a more lightweight solution than JQuery, you might want to check out my JSONHttpRequest. It works exactly like a normal XMLHttpRequest, but also provides the responseJSON
property. All you have to change in your code would be the first line:
var req = new JSONHttpRequest();
JSONHttpRequest还提供了以JSON形式轻松发送JavaScript对象的功能.更多细节和代码可以在这里找到:http://pixelsvsbytes.com/2011/12/teach-your-xmlhttprequest-some-json/.
Full disclosure: I'm the owner of Pixels|Bytes. I thought that my script was a good solution for the original question, but it is rather outdated today. I do not recommend to use it anymore.