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 responseType
właściwości do zdefiniowania oczekiwanego formatu odpowiedzi. Następnie można uzyskać dostęp do przeanalizowanych danych odpowiedzi za pośrednictwem response
wł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 responseJSON
właściwości, tylko responseText
i responseXML
. Tak długo, jak bitly naprawdę odpowiada jakimś responseText
kodem 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ą XMLHttpRequest
i 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ę responseJSON
wł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.
XMLHttpRequest
; właśnie o co chodziło w tym pytaniu.s a jquery version too. If you are getting crossbrowser issue
s spróbować, zwykle framework`s rozwiązania tych problemów lepiej: api.jquery.com/jquery.parsejsonfetch
jest standardowy JavaScript.Możesz po prostu ustawić
xhr.responseType = 'json';
Dokumentacja typu responseType
źródło
Uwaga: przetestowałem to tylko w Chrome.
dodaje funkcję prototypową do XMLHttpRequest .. XHR2 ,
w XHR 1 prawdopodobnie wystarczy wymienić
this.response
zthis.responseText
aby zwrócić plik json w xhr2
EDYTOWAĆ
Jeśli planujesz używać XHR z
arraybuffer
innymi typami odpowiedzi, musisz sprawdzić, czy odpowiedź tostring
.w każdym razie musisz dodać więcej sprawdzeń, np. jeśli nie jest w stanie przeanalizować json.
źródło
value
zeget
w obiekcie przekazanymObject.defineProperty
, i można go używaćresponseJSON
jak każdy inny zmiennej odpowiedzi.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żywa
eval
źródło
Użyj nsIJSON, jeśli jest to rozszerzenie FF:
W przypadku strony internetowej po prostu użyj
JSON.parse
zamiastComponents.classes["@mozilla.org/dom/json;1"].createInstance(Components.interfaces.nsIJSON.decode
źródło