Cara baru saya: fetch
TL; DR Saya akan merekomendasikan cara ini selama Anda tidak perlu mengirim permintaan sinkron atau mendukung browser lama.
Selama permintaan Anda asinkron, Anda dapat menggunakan Fetch API untuk mengirim permintaan HTTP. Fetch API bekerja dengan promise , yang merupakan cara bagus untuk menangani alur kerja asinkron di JavaScript. Dengan pendekatan ini yang Anda gunakan fetch()
untuk mengirim permintaan dan ResponseBody.json()
mengurai respons:
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(jsonResponse) {
// do something with jsonResponse
});
Kompatibilitas: Fetch API tidak didukung oleh IE11 serta Edge 12 & 13. Namun, ada polyfill .
Cara baru II: responseType
Seperti yang ditulis Londeren dalam jawabannya , browser yang lebih baru memungkinkan Anda menggunakan responseType
properti untuk menentukan format respons yang diharapkan. Data respons yang diurai kemudian dapat diakses melalui response
properti:
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);
Kompatibilitas: responseType = 'json'
tidak didukung oleh IE11.
Cara klasik
XMLHttpRequest standar tidak memiliki responseJSON
properti, hanya responseText
dan responseXML
. Selama bitly benar-benar merespons dengan beberapa JSON untuk permintaan Anda, responseText
harus berisi kode JSON sebagai teks, jadi yang harus Anda lakukan hanyalah menguraikannya dengan 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);
Kompatibilitas: Pendekatan ini dapat digunakan dengan browser apa pun yang mendukung XMLHttpRequest
dan JSON
.
JSONHttpRequest
Jika Anda lebih suka menggunakan responseJSON
, tetapi menginginkan solusi yang lebih ringan daripada JQuery, Anda mungkin ingin memeriksa JSONHttpRequest saya. Ia bekerja persis seperti XMLHttpRequest normal, tetapi juga menyediakan responseJSON
properti. Yang harus Anda ubah dalam kode Anda adalah baris pertama:
var req = new JSONHttpRequest();
JSONHttpRequest juga menyediakan fungsionalitas untuk mengirim objek JavaScript dengan mudah sebagai JSON. Detail selengkapnya dan kodenya dapat ditemukan di sini: http://pixelsvsbytes.com/2011/12/teach-your-xmlhttprequest-some-json/ .
Pengungkapan penuh: Saya adalah pemilik Pixels | Bytes. Saya pikir skrip saya adalah solusi yang baik untuk masalah ini, jadi saya mempostingnya di sini. Silakan tinggalkan komentar, jika Anda ingin saya menghapus tautannya.
XMLHttpRequest
; tentang apa pertanyaan itu.s a jquery version too. If you are getting crossbrowser issue
mencobanya, biasanya framework menangani masalah ini dengan lebih baik: api.jquery.com/jquery.parsejsonfetch
adalah JavaScript standar.Anda cukup mengatur
xhr.responseType = 'json';
Dokumentasi untuk responseType
sumber
Catatan: Saya hanya menguji ini di Chrome.
itu menambahkan fungsi prototipe ke XMLHttpRequest .. XHR2 ,
di XHR 1 Anda mungkin hanya perlu mengganti
this.response
denganthis.responseText
untuk mengembalikan json di xhr2
EDIT
Jika Anda berencana untuk menggunakan XHR dengan
arraybuffer
atau tipe respons lain, Anda harus memeriksa apakah responsnya adalah astring
.dalam hal apapun Anda harus menambahkan lebih banyak pemeriksaan, misalnya jika tidak dapat mengurai json.
sumber
value
denganget
di objek yang diteruskanObject.defineProperty
, dan Anda dapat menggunakanresponseJSON
seperti yang Anda lakukan pada variabel respons lainnya.Saya pikir Anda harus menyertakan jQuery untuk digunakan
responseJSON
.Tanpa jQuery, Anda dapat mencoba dengan responseText dan mencoba like
eval("("+req.responseText+")");
UPDATE : Silakan baca komentar tentang
eval
, Anda dapat menguji dengan eval, tetapi jangan menggunakannya dalam ekstensi kerja.ATAU
gunakan json_parse : tidak digunakan
eval
sumber
Gunakan nsIJSON jika ini untuk ekstensi FF:
Untuk halaman web, gunakan
JSON.parse
sajaComponents.classes["@mozilla.org/dom/json;1"].createInstance(Components.interfaces.nsIJSON.decode
sumber