En este artículo, aprenderemos cómo podemos detener o cancelar la solicitud HTTP ya enviada al servidor. XMLHttpRequest es un objeto que usamos para enviar una solicitud HTTP al servidor para obtener los datos necesarios del servidor. XMLHttpRequest proporciona un método abort() para cancelar la solicitud enviada al servidor.
Método XMLHttpRequest.abort(): este método se utiliza para abortar o cancelar la solicitud HTTP. Cambiará el readyState de la solicitud a 0, lo que significa que el estado no se inicializa y la solicitud no se procesará más.
Sintaxis:
var request = new XMLHttpRequest(); request.abort();
Nota: El método abort() no aceptará ningún argumento o parámetro, pero devolverá undefined cuando la solicitud haya abortado cualquier valor .
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
#btnDiv {
width: 20vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.btn {
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<h2 id="heading" style="color:green;">
GeeksforGeeks
</h2>
<div id="btnDiv">
<button class="btn" onclick="requestData()">
Request Data
</button>
<button class="btn" onclick="abortRequest()">
Abort Request
</button>
</div>
</div>
<script>
var head = document.getElementById('heading');
var request = new XMLHttpRequest();
function requestData() {
request.onload = function () {
head.innerHTML = this.responseText;
}
request.open('GET', 'gfgInfo.txt', true);
request.send();
}
function abortRequest() {
head.innerHTML = request.abort() +
"<br>It shows undefined, as the data"
+ " is lost on aborting request.";
}
</script>
</body>
</html>
Producción:
Soporte del navegador:
- Cromo
- Firefox
- Ópera
- Safari
- Borde
- explorador de Internet
Publicación traducida automáticamente
Artículo escrito por abhisheksainiaggarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA