Este sería un ejemplo de función de llamada a Ajax, usando Promesas.
Con nuestra función myAjax()
podemos hacer peticiones vía ajax y obtener la respuesta, o el código de error, de forma transparente, sin necesidad de librerías como jQuery.
Según se indica en el enlace de más abajo:
Las API anteriores se actualizarán para usar promesas y si es posible,
se hará de forma que sean compatibles con versiones anteriores.
XMLHttpRequest es una gran candidata.
Lo cual quiere decir que las llamadas a Ajax mediante Promises será mucho más fácil en un futuro. Mientras eso llega, podemos usar una función como esta, pasándole a la función en parámetro el método (GET, POST
) y la url del servicio REST, API, o un archivo php, json u otro de nuestras aplicaciones.
function myAjax(method, url) {
// Devolver una nueva Promise.
return new Promise(function(resolve, reject) {
// Hacer lo usual de XHR
var req = new XMLHttpRequest();
req.open(method, url);
req.onload = function() {
// Esto es llamado incluso cuando ocurre error 404 etc
// Verificar el status
if (req.status == 200) {
// Resolver la Promise con el texto de respuesta
resolve(req.response);
console.log(req.response);
} else {
// De lo contrario, rechazar con el texto del estatus
reject(Error(req.statusText));
}
};
// Manejar errores de red
req.onerror = function() {
reject(Error("Network Error"));
};
// Hacer la petición
req.send();
});
}
function get(method) {
var url = document.getElementById("datos").value;
myAjax(method, url).then(function(response) {
console.log("¡Correcto!", response);
}, function(error) {
console.error("!Hubo un error!", error);
})
}
Introduzca URL de un servicio REST y pulse Enviar:<br />
<input id="datos" type="text" value="https://api.github.com" size="33" />
<input type="button" onclick="get('GET')" value="Enviar..." />
Enlaces