Analizowanie JSON z XmlHttpRequest.responseJSON

Próbuję przeanalizować odpowiedź JSON bit.ly w javascript.

Otrzymuję JSON przez XmlHttpRequest.

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

Robię to w dodatku do Firefoksa. Po uruchomieniu pojawia się błąd „jsonResponse is undefined” dla linii var bitlyUrl = jsonResponse.results[url].shortUrl;. Czy robię coś złego podczas analizowania JSON tutaj? Albo co jest nie tak z tym kodem?

Nowe sposoby: fetch

TL; DR polecałbym ten sposób, o ile nie musisz wysyłać synchronicznych żądań ani obsługiwać starych przeglądarek.

Dopóki żądanie jest asynchroniczne, możesz używać interfejsu Fetch API do wysyłania żądań HTTP. Fetch API działa z obietnicami , co jest dobrym sposobem obsługi asynchronicznych przepływów pracy w JavaScript. W tym podejściu używasz fetch()do wysyłania żądania i ResponseBody.json()analizowania odpowiedzi:

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

Zgodność: Fetch API nie jest obsługiwany przez IE11 oraz Edge 12 i 13. Istnieją jednak polyfills .

Nowe sposoby II: responseType

Jak napisał Londeren w swojej odpowiedzi , nowsze przeglądarki pozwalają na użycie tej responseTypewłaściwości do zdefiniowania oczekiwanego formatu odpowiedzi. Następnie można uzyskać dostęp do przeanalizowanych danych odpowiedzi za pośrednictwem responsewłaściwości:

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

Zgodność: responseType = 'json'nie jest obsługiwana przez IE11.

Klasyczny sposób

Standardowy XMLHttpRequest nie ma responseJSONwłaściwości, tylko responseTexti responseXML. Tak długo, jak bitly naprawdę odpowiada jakimś responseTextkodem JSON na Twoje żądanie, powinien zawierać kod JSON jako tekst, więc wszystko, co musisz zrobić, to przeanalizować go za pomocą 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);

Zgodność: to podejście powinno działać z każdą przeglądarką obsługującą XMLHttpRequesti JSON.

JSONHttpRequest

Jeśli wolisz używać responseJSON, ale chcesz lżejszego rozwiązania niż JQuery, możesz sprawdzić mój JSONHttpRequest. Działa dokładnie tak, jak zwykły XMLHttpRequest, ale zapewnia również tę responseJSONwłaściwość. Wszystko, co musisz zmienić w swoim kodzie, to pierwsza linia:

var req = new JSONHttpRequest();

JSONHttpRequest zapewnia również funkcjonalność umożliwiającą łatwe wysyłanie obiektów JavaScript jako JSON. Więcej szczegółów i kod można znaleźć tutaj: http://pixelsvsbytes.com/2011/12/teach-your-xmlhttprequest-some-json/ .

Pełne ujawnienie: jestem właścicielem Pixels | Bytes. Myślę, że mój skrypt jest dobrym rozwiązaniem problemu, więc zamieściłem go tutaj. Proszę zostaw komentarz, jeśli chcesz, żebym usunął link.

Możesz po prostu ustawić 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();
  

Dokumentacja typu responseType

Uwaga: przetestowałem to tylko w Chrome.

dodaje funkcję prototypową do XMLHttpRequest .. XHR2 ,

w XHR 1 prawdopodobnie wystarczy wymienić this.responsezthis.responseText

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

aby zwrócić plik json w xhr2

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

EDYTOWAĆ

Jeśli planujesz używać XHR z arraybufferinnymi typami odpowiedzi, musisz sprawdzić, czy odpowiedź to string.

w każdym razie musisz dodać więcej sprawdzeń, np. jeśli nie jest w stanie przeanalizować json.

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

Myślę, że musisz dołączyć jQuery do użycia responseJSON.

Bez jQuery możesz spróbować z responseText i polubić eval("("+req.responseText+")");

AKTUALIZACJA : Przeczytaj komentarz dotyczący eval, możesz testować z eval, ale nie używaj go w działającym rozszerzeniu.

LUB

użyj json_parse : nie używaeval

Użyj nsIJSON, jeśli jest to rozszerzenie FF:

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

W przypadku strony internetowej po prostu użyj JSON.parsezamiastComponents.classes["@mozilla.org/dom/json;1"].createInstance(Components.interfaces.nsIJSON.decode