执行XMLHttpRequest时显示加载动画

众所周知，XMLHttpRequest 是一个应用很广泛用于Javascript 请求API的一个模组，我们是否可以在XMLHttpRequest请求时显示加载动画以获得更好的网页使用体验呢？

答案是：可以的！

接下来，让我们一起开始动手吧！

首先，你需要嵌入 Bootstrap 的 JS + CSS 进入你的 HTML，这里建议使用 JsDelivr 的 CDN ，因为本地 ISP 已经污染了 MaxCDN 的域名，导致如果使用 MaxCDN 加载Bootstrap，使用本地ISP的DNS时会被指向 175.139.142.25 (MCMC block IP)

这里的逻辑是：用户输入数据后，XMLHttpRequest 把数据发送到服务端，并且显示加载动画和移除Form，等待服务端返回结果后移除动画和显示结果

Form ID = test

content = 返回结果显示的div id

废话不多说直接上代码

window.addEventListener( "load", function () {

function sendData() // 当检测到 sendData 被触发

{

const FD = new FormData( form ); // 定义 FD 为 Form 里面用户提交的数据

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {

if (xhttp.readyState == 4) // 如果服务端成功返回结果

{

document.getElementById("content").innerHTML = ''; // 将 content 清空

document.getElementById("content").innerHTML = xhttp.responseText; // 显示返回结果至 content

}

const myobj = document.getElementById("test");

myobj.remove(); // 移除 Form

document.getElementById("content").innerHTML = '<div class="spinner-border" role="status"><span class="sr-only"></span></div>'; // 显示加载动画至 content

xhttp.addEventListener( "error", function( event ) // 如果XMLHttpRequest 无法请求或者CORS或Referer问题

{

const myobj = document.getElementById("test");

myobj.remove(); // 移除 Form

alert( 'Oops! Something went wrong. Please check your internet connection' );

document.getElementById("content").innerHTML = 'Something went wrong. Please check your internet connection and address.' // 提示错误

} );

xhttp.open("POST", "./api.php"); // 请求方法和URL

xhttp.send(FD); // 发送 Form Data

}

const form = document.getElementById( "test" ); // 定义 Form 为 "test" 里面的form

form.addEventListener( "submit", function ( event ) {

event.preventDefault();

sendData(); // 当检测到用户提交Form时劫持并且触发 sendData

} );

});

至此，我们就大功告成了！
Demo 页面： Digi Fibre Coverage Checker (samsam123.name.my)

执行XMLHttpRequest时显示加载动画

Copyright © Sam Sam