javascript - poner - para que sirve el jquery min js
Cómo interceptar todas las solicitudes AJAX realizadas por diferentes bibliotecas JS (4)
Estoy construyendo una aplicación web con diferentes bibliotecas JS (AngularJS, OpenLayers, ...) y necesito una manera de interceptar todas las respuestas AJAX para poder, en caso de que la sesión de usuario registrada expire (la respuesta vuelve con el estado 401 Unauthorized ), a redirigirlo a la página de inicio de sesión.
Sé que AngularJS ofrece interceptors para administrar dichos escenarios, pero no fue capaz de encontrar una forma de lograr dicha inyección en las solicitudes de OpenLayers. Así que opté por un enfoque vainilla JS.
Here encontré este pedazo de código ...
(function(open) {
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
this.addEventListener("readystatechange", function() {
console.log(this.readyState); // this one I changed
}, false);
open.call(this, method, url, async, user, pass);
};
})(XMLHttpRequest.prototype.open);
... que adapté y parece que se comporta como se esperaba (solo lo probé en el último Google Chrome).
Como modifica el prototipo de XMLHTTPRequest, me pregunto qué tan peligroso podría resultar esto o si podría producir problemas graves de rendimiento. Y, por cierto, ¿habría alguna alternativa válida?
Actualización: cómo interceptar solicitudes antes de que se envíen
El truco anterior funciona bien. Pero, ¿qué sucede si en el mismo escenario quieres inyectar algunos encabezados antes de que se envíe la solicitud? Haz lo siguiente:
(function(send) {
XMLHttpRequest.prototype.send = function(data) {
// in this case I''m injecting an access token (eg. accessToken) in the request headers before it gets sent
if(accessToken) this.setRequestHeader(''x-access-token'', accessToken);
send.call(this, data);
};
})(XMLHttpRequest.prototype.send);
Como lo señaló amablemente el editor de AMO Firefox Rob W ,
El siguiente código cambia el comportamiento de XMLHttpRequest. De forma predeterminada, si el tercer parámetro ("async") no está especificado, el valor predeterminado es verdadero. Cuando está especificado e indefinido, es equivalente a "falso", que convierte una solicitud en una solicitud HTTP síncrona. Esto hace que la IU se bloquee mientras se procesa la solicitud, y algunas funciones de la API XMLHttpRequest también están deshabilitadas.
...
Para solucionar esto, reemplace open.call (....) con open.apply (this, arguments);
Y aquí hay un enlace de referencia:
Este tipo de función de enganche es perfectamente seguro y se realiza regularmente con otros métodos por otros motivos.
Y, el único impacto en el rendimiento es en realidad solo una llamada de función adicional para cada .open() más cualquier código que ejecute usted mismo, que probablemente sea irrelevante cuando se trata de una llamada de red.
En IE, esto no detectará ningún código que intente usar el método de control ActiveXObject para hacer Ajax. El código bien escrito se ve primero para el objeto XMLHttpRequest y lo usa si está disponible y ha estado disponible desde IE 7. Pero podría haber algún código que use el método ActiveXObject si está disponible, lo que sería cierto a través de muchas versiones posteriores de IE.
En los navegadores modernos, hay otras formas de emitir llamadas Ajax, como la interfaz fetch() , de modo que si uno busca enganchar todas las llamadas Ajax, debe enganchar más que solo XMLHttpRequest .
Esto no detectará XMLHttpRequests para algunas versiones de IE (9 y siguientes) . Dependiendo de la biblioteca, es posible que primero busquen el control ActiveX propietario de IE.
Y, por supuesto, todas las apuestas están apagadas si está utilizando un DOCTYPE no estricto bajo IE, pero estoy seguro de que lo sabía.
Referencia: CanIuse
Ajax-hook es una lib de código abierto para enganchar el objeto global XMLHttpRequest, y cambiar la solicitud y respuesta Ajax por defecto. github: Ajax-hook , por ejemplo:
hookAjax({
//hook callbacks
onreadystatechange:function(xhr){
console.log("onreadystatechange called: %O",xhr)
},
onload:function(xhr){
console.log("onload called: %O",xhr)
},
//hook function
open:function(arg,xhr){
console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2])
}
})