Nuevas formas I: fetch
TL; DR lo recomiendo esta manera, siempre y cuando no tenga que enviar solicitudes sincrónicas o apoyar los navegadores antiguos.
Mientras su solicitud sea asincrónica, puede usar el Fetch API para enviar solicitudes HTTP. La API de recuperación funciona con promises, que es una buena manera de manejar flujos de trabajo asíncronos en JavaScript. Con este enfoque se utiliza fetch()
para enviar una petición y ResponseBody.json()
a analizar la respuesta:
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(jsonResponse) {
// do something with jsonResponse
});
Compatibilidad: El Fetch API no es compatible con IE11, así como Edge 12 & 13. Sin embargo, hay polyfills.
Nuevas formas II: responseType
Como Londeren ha escrito en his answer, los nuevos navegadores le permiten utilizar la propiedad responseType
para definir el formato esperado de la respuesta. Los datos de respuesta analizados se puede acceder entonces a través de la propiedad response
:
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 está soportado por EI11.
La manera clásica
El estándar XMLHttpRequest no tiene responseJSON
propiedad, simplemente responseText
y responseXML
. Mientras bitly realmente responde con un poco de JSON a su solicitud, responseText
debe contener el código JSON como texto, por lo que todo lo que tienes 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 debe funciona con cualquier navegador que admita XMLHttpRequest
y JSON
.
JSONHttpRequest
Si prefiere utilizar responseJSON
, pero desea una solución más ligero que JQuery, es posible que desee comprobar hacia fuera mi JSONHttpRequest. Funciona exactamente como una XMLHttpRequest normal, pero también proporciona la propiedad responseJSON
. 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 los objetos JavaScript como JSON. Más detalles y el código se puede encontrar aquí: http://pixelsvsbytes.com/2011/12/teach-your-xmlhttprequest-some-json/.
Descripción completa: Soy el propietario de Pixels | Bytes. Creo que mi script es una buena solución al problema, así que lo publiqué aquí. Por favor, deja un comentario, si quieres que elimine el enlace.
pixelsvsbytes.com realmente vale la pena leer – CapelliC
+1; IMO esta fue la respuesta real a la pregunta - no jQuery simplemente viejo vainilla '' 'XMLHttpRequest'''; De qué se trataba la pregunta. –
También hay una versión de jquery. Si está obteniendo problemas con los navegadores cruzados, pruébelo, por lo general los problemas del framework son los siguientes: http://api.jquery.com/jquery.parsejson/ – sagits