Cómo funciona Ajax simplemente con un ejemplo

Las principales razones para usar Ajax:
1. Lograr una mejor experiencia de usuario a través de aplicaciones Ajax apropiadas
2. Transferir parte del trabajo cargado por el servidor al cliente, lo que es beneficioso para la capacidad de procesamiento ociosa del cliente y reduce la carga sobre el servidor y el ancho de banda carga, a fin de lograr el propósito de ahorrar espacio ISP y costos de alquiler de ancho de banda.

Cómo funciona Ajax es un ejemplo

1. Cree un objeto XMLHttpRequest, es decir, cree un objeto de llamada asíncrona.
2. Cree una nueva solicitud HTTP y especifique el método, la URL y la información de autenticación de la solicitud HTTP.
3. Establece la función que responde a los cambios de estado de la solicitud HTTP.
4. Envía una solicitud HTTP.
5. Obtenga los datos devueltos por la llamada asincrónica.
6. Actualización parcial usando JavaScript y DOM.

//以POST为例 注：步骤2和3的顺序不影响
const xhr = new XMLHttpRequest();  // 步骤1：创建XMLHttpRequest对象
xhr.onreadystatechange = () => {
    
       // 步骤3监听ajax的状态( 设置响应HTTP请求状态变化的函数.)
	if (xhr.readyState === 4 && xhr.status === 200) {
    
    
		success(JSON.parse(xhr.responseText));//步骤5：获取异步调用返回的数据.
}
xhr.open("POST", /users/login); //步骤2：创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
xhr.setRequestHeader("Content-type", "application/json"); // 设置请求头
xhr.sed(JSON.stringify({
    
    username,password})) // 步骤4：发送HTTP请求.