Nuevas formas yo: fetch
TL; DR Recomendaría de esta manera siempre que no tenga que enviar solicitudes sincrónicas o admitir navegadores antiguos.
Siempre que su solicitud sea asíncrona, puede utilizar la API Fetch para enviar solicitudes HTTP. La API de recuperación funciona con promesas , que es una buena forma de manejar flujos de trabajo asincrónicos en JavaScript. Con este enfoque se utiliza fetch()
para enviar una solicitud y ResponseBody.json()
analizar la respuesta:
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(jsonResponse) {
// do something with jsonResponse
});
Compatibilidad: la API Fetch no es compatible con IE11 ni con Edge 12 y 13. Sin embargo, existen polyfills .
Nuevas formas II: responseType
Como Londeren ha escrito en su respuesta , los navegadores más nuevos le permiten usar la responseType
propiedad para definir el formato esperado de la respuesta. A continuación, se puede acceder a los datos de respuesta analizados a través de la response
propiedad:
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);
Compatibilidad: responseType = 'json'
no es compatible con IE11.
La forma clásica
El XMLHttpRequest estándar no tiene responseJSON
propiedad, solo responseText
y responseXML
. Siempre que bitly realmente responda con algo de JSON a su solicitud, responseText
debe contener el código JSON como texto, por lo que todo lo que tiene que hacer es analizarlo con 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);
Compatibilidad: este enfoque debería funcionar con cualquier navegador que admita XMLHttpRequest
y JSON
.
JSONHttpRequest
Si prefiere usar responseJSON
, pero desea una solución más liviana que JQuery, es posible que desee consultar mi JSONHttpRequest. Funciona exactamente como una XMLHttpRequest normal, pero también proporciona la responseJSON
propiedad. Todo lo que tiene que cambiar en su código sería la primera línea:
var req = new JSONHttpRequest();
JSONHttpRequest también proporciona funcionalidad para enviar fácilmente objetos JavaScript como JSON. Puede encontrar más detalles y el código aquí: http://pixelsvsbytes.com/2011/12/teach-your-xmlhttprequest-some-json/ .
Divulgación completa: soy el propietario de Pixels | Bytes. Creo que mi guión es una buena solución al problema, así que lo publiqué aquí. Deje un comentario si desea que elimine el enlace.
XMLHttpRequest
; de qué trataba la pregunta.