以下是使用 JavaScript 模拟实现 ajax 加载框的完整攻略：
实现思路
- 创建一个遮罩层，并设置其 z-index 值为一个比较大的数字，遮罩整个页面；
- 在遮罩层中添加一个加载框元素，并使用 CSS 进行设置和样式定制；
- 使用 JavaScript 编写一个可以请求服务器数据的对象，以及在请求过程中显示遮罩层及加载框的方法；
- 在处理完请求后，隐藏遮罩层及加载框。
示例一
以下是一个简单的实例，展示了如何创建遮罩层及加载框，并使用 JavaScript 在请求过程中显示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax 加载框示例</title>
<style type="text/css">
/* 遮罩层样式 */
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
/* 加载框样式 */
.loading {
display: inline-block;
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* 加载框旋转动画 */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<button id="btn">请求数据</button>
<div id="mask" class="mask" style="display: none;">
<div class="loading"></div>
</div>
<script type="text/javascript">
// 获取遮罩层和加载框元素
var mask = document.getElementById("mask");
var loading = document.querySelector(".loading");
// 添加按钮点击事件
document.getElementById("btn").onclick = function() {
// 显示遮罩层及加载框
mask.style.display = "flex";
// 模拟请求过程，5 秒钟后隐藏遮罩层及加载框
setTimeout(function() {
mask.style.display = "none";
}, 5000);
};
</script>
</body>
</html>
示例说明：
- 创建了一个灰色半透明的遮罩层，并在其中添加了一个圆形加载框；
- 使用 JavaScript 监听了一个按钮的点击事件；
- 点击按钮后，会显示遮罩层及加载框；
- 模拟了一个请求过程，5 秒钟后隐藏遮罩层及加载框。
示例二
针对实际业务中常见场景，我们还可以使用 JavaScript 封装一个可以请求服务器数据的对象，并在请求过程中显示遮罩层及加载框的方法。以下是该方法的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax 加载框示例</title>
<style type="text/css">
/* 遮罩层样式 */
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
/* 加载框样式 */
.loading {
display: inline-block;
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* 加载框旋转动画 */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<button id="btn">请求数据</button>
<div id="mask" class="mask" style="display: none;">
<div class="loading"></div>
</div>
<script type="text/javascript">
// 封装服务器请求对象
var request = {
get: function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.open("GET", url, true);
xhr.send();
},
post: function(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.open("POST", url, true);
xhr.send(data);
}
};
// 获取遮罩层和加载框元素
var mask = document.getElementById("mask");
var loading = document.querySelector(".loading");
// 封装一个方法，用于显示遮罩层及加载框
function showLoading() {
mask.style.display = "flex";
}
// 封装一个方法，用于隐藏遮罩层及加载框
function hideLoading() {
mask.style.display = "none";
}
// 添加按钮点击事件
document.getElementById("btn").onclick = function() {
// 显示遮罩层及加载框
showLoading();
// 发送 GET 请求，获取数据并显示
request.get("https://jsonplaceholder.typicode.com/todos/1", function(data) {
var result = JSON.parse(data);
console.log(result);
// 隐藏遮罩层及加载框
hideLoading();
});
</script>
</body>
</html>
示例说明：
- 封装了一个可以请求服务器数据的对象 request，包含 get 和 post 两个方法，可以分别发送 GET 和 POST 请求；
- 封装了一个方法 showLoading，用于显示遮罩层及加载框，以及一个方法 hideLoading，用于隐藏遮罩层及加载框；
- 点击按钮后，会发送一个 GET 请求，获取数据；
- 在请求过程中，会显示遮罩层及加载框，并在请求结束后隐藏。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript模拟实现ajax加载框实例 - Python技术站
微信扫一扫 
支付宝扫一扫 