Comprensión del objeto XmlHttpRequest
El objeto XMLHttpRequest es una solicitud HTTP basada en XML. Es una interfaz de navegador para interactuar con el servidor. A través de XMLHttpRequest, podemos solicitar una URL específica para obtener datos sin actualizar la página, y aunque el nombre es XMLHttpRequest, en realidad puede ser utilizado para Obtener datos de cualquier tipo.
Cómo usar el objeto XMLHttpRequest
- Crear un objeto XMLHttpRequest
var xhr = new XMLHttpRequest();
- establecer conexión http
xhr.open('GET', '/login');
- Enviar petición
xhr.send()
- obtener datos de retorno
//就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化，指定回调函数
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 && xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert( xhr.statusText );
}
};
estado listo
| valor | estado | describir |
|---|---|---|
| 0 | UNSENT |
Se ha creado el proxy XMLHttpRequest, pero no se ha llamado al método open() |
| 1 | OPENED |
open()el método ha sido llamado |
| 2 | HEADERS_RECEIVED |
Se ha llamado al método send() y se han recibido los encabezados de respuesta. |
| 3 | LOADING |
Se está recibiendo la parte del cuerpo de la respuesta. |
| 4 | DONE |
La operación solicitada se ha completado. Esto significa que la transferencia de datos se completó por completo o falló |
- cancelar solicitud
XMLHttpRequest.abort()
//当一个请求被终止，它的 readyState 将被置为0,并且请求的 status 置为 0。
buscar
descripción general
La API Fetch proporciona una interfaz de JavaScript para acceder y manipular solicitudes y respuestas HTTP, y también proporciona un fetch()método ofrece una forma sencilla y sensata de obtener recursos de forma asíncrona en toda la red.
características
- Basado en la implementación estándar de Promise, admite async/await
- Romper con XHR es una nueva implementación en la especificación ES.
- La sintaxis es concisa y más semántica.
pregunta
-
fetch no admite la cancelación (xhr tiene un método xhr.abort que puede bloquear solicitudes directamente)
-
fetch no tiene forma de monitorear el progreso de la solicitud de forma nativa, pero XHR sí puede.
-
la compatibilidad de recuperación no es muy buena, IE no es compatible
Aviso
- fetch solo informa errores para las solicitudes de red, y tanto 400 como 500 se consideran solicitudes exitosas. Cuando el servidor devuelve los códigos de error 400 y 500, no se rechazará. Solo cuando la solicitud no se puede completar debido a errores de red, se rechazará fetch. Se requiere encapsulación para el procesamiento.
- fetch no trae cookies de forma predeterminada, debe agregar elementos de configuración: fetch (url, {credentials: 'include'})
buscar usos
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
<form id="myform">
<input type="text" placeholder="community" id="community">
<input type="text" placeholder="parkingLotId" id="parkingLotId">
<input type="text" placeholder="name" id="name">
<input type="text" placeholder="status" id="status">
<button>添加</button>
</form>
</body>
<script>
let form = document.querySelector('#myform')
form.onsubmit = async function (e) {
e.preventDefault();//阻止事件的默认行为
//获取每个输入框的值
let community = document.querySelector('#community').value
let parkingLotId = document.querySelector('#parkingLotId').value
let name = document.querySelector('#name').value
let status = document.querySelector('#status').value
let obj = {
community, parkingLotId, name, status }
//发起请求
let result = await fetch('/parking-lot/add', {
method: 'post',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(obj)
});
let data = await result.json();
if (data.status == 201) {
alert('添加成功')
}
}
</script>
</html>