De nouvelles façons je: fetch
TL; DR Je recommande cette méthode tant que vous n'avez pas à envoyer de requêtes synchrones ou à prendre en charge d'anciens navigateurs.
Tant que votre requête est asynchrone, vous pouvez utiliser l' API Fetch pour envoyer des requêtes HTTP. L'API fetch fonctionne avec des promesses , ce qui est un bon moyen de gérer les flux de travail asynchrones en JavaScript. Avec cette approche, vous utilisez fetch()
pour envoyer une demande et ResponseBody.json()
pour analyser la réponse:
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(jsonResponse) {
// do something with jsonResponse
});
Compatibilité: L'API Fetch n'est pas prise en charge par IE11 ni par Edge 12 et 13. Cependant, il existe des polyfills .
Nouvelles méthodes II: responseType
Comme Londeren l' a écrit dans sa réponse , les nouveaux navigateurs vous permettent d'utiliser la responseType
propriété pour définir le format attendu de la réponse. Les données de réponse analysées sont ensuite accessibles via la response
propriété:
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);
Compatibilité: responseType = 'json'
n'est pas pris en charge par IE11.
La manière classique
Le XMLHttpRequest standard n'a pas de responseJSON
propriété, juste responseText
et responseXML
. Tant que bitly répond vraiment avec du JSON à votre demande, il responseText
doit contenir le code JSON sous forme de texte, il vous suffit donc de l'analyser avec 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);
Compatibilité: cette approche doit fonctionner avec tout navigateur prenant en charge XMLHttpRequest
et JSON
.
JSONHttpRequest
Si vous préférez utiliser responseJSON
, mais que vous voulez une solution plus légère que JQuery, vous voudrez peut-être consulter mon JSONHttpRequest. Il fonctionne exactement comme un XMLHttpRequest normal, mais fournit également la responseJSON
propriété. Tout ce que vous avez à changer dans votre code serait la première ligne:
var req = new JSONHttpRequest();
JSONHttpRequest fournit également des fonctionnalités pour envoyer facilement des objets JavaScript au format JSON. Plus de détails et le code peuvent être trouvés ici: http://pixelsvsbytes.com/2011/12/teach-your-xmlhttprequest-some-json/ .
Divulgation complète: je suis le propriétaire de Pixels | Bytes. Je pense que mon script est une bonne solution au problème, je l'ai donc posté ici. Veuillez laisser un commentaire, si vous souhaitez que je supprime le lien.
XMLHttpRequest
; exactement de quoi portait la question.s a jquery version too. If you are getting crossbrowser issue
s essayer, généralement gérer ces problèmes framework`s mieux: api.jquery.com/jquery.parsejsonfetch
est le JavaScript standard.Vous pouvez simplement définir
xhr.responseType = 'json';
Documentation pour responseType
la source
Remarque: je n'ai testé cela que dans Chrome.
il ajoute une fonction prototype à la XMLHttpRequest .. XHR2 ,
dans XHR 1, il vous suffit probablement de le remplacer
this.response
parthis.responseText
pour retourner le json dans xhr2
ÉDITER
Si vous prévoyez d'utiliser XHR avec
arraybuffer
ou d'autres types de réponse, vous devez vérifier si la réponse est unstring
.dans tous les cas, vous devez ajouter plus de vérifications, par exemple s'il n'est pas capable d'analyser le json.
la source
value
parget
dans l'objet passé àObject.defineProperty
, et vous pouvez utiliserresponseJSON
comme vous le feriez pour n'importe quelle autre variable de réponse.Je pense que vous devez inclure jQuery pour l'utiliser
responseJSON
.Sans jQuery, vous pouvez essayer avec responseText et essayer comme
eval("("+req.responseText+")");
MISE À JOUR : Veuillez lire le commentaire concernant
eval
, vous pouvez tester avec eval, mais ne l'utilisez pas dans l'extension de travail.OU
use json_parse : il n'utilise pas
eval
la source
Utilisez nsIJSON s'il s'agit d'une extension FF:
Pour une page Web, utilisez simplement à la
JSON.parse
place deComponents.classes["@mozilla.org/dom/json;1"].createInstance(Components.interfaces.nsIJSON.decode
la source