ajax 遮罩层,示例代码

Ajax遮罩层是一种常用的技术，用于在网页上显示一个遮罩层，以阻止用户进行其他操作，同时在后台进行异步请求。这种遮罩层通常用于在用户等待服务器响应时显示加载状态，提高用户体验。

下面是一个示例代码，演示了如何使用Ajax遮罩层：

HTML部分：

<div id="mask" style="display: none;"></div>
<button id="loadButton">加载内容</button>
<div id="content" style="display: none;"></div>

CSS部分：

#mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  z-index: 9999; /* 设置遮罩层的层级，确保它在最上层 */
}
#loadButton {
  margin-top: 20px;
}
#content {
  margin-top: 20px;
}
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
}

JavaScript部分：

document.getElementById("loadButton").addEventListener("click", function() {
  var mask = document.getElementById("mask");
  var content = document.getElementById("content");
  mask.style.display = "block"; // 显示遮罩层
  content.style.display = "none"; // 隐藏内容
  // 发起Ajax请求
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      mask.style.display = "none"; // 隐藏遮罩层
      content.style.display = "block"; // 显示内容
      content.innerHTML = xhr.responseText; // 将服务器响应的内容填充到content元素中
    }
  };
  xhr.open("GET", "example.com/ajax", true);
  xhr.send();
});

在上述示例代码中，我们首先定义了一个遮罩层的HTML元素，其样式通过CSS进行设置。点击"加载内容"按钮时，会触发一个Ajax请求，并在请求期间显示遮罩层。当服务器响应返回后，遮罩层被隐藏，内容被填充到相应的元素中。

通过使用Ajax遮罩层，我们可以在后台进行异步请求，同时向用户提供一个友好的加载状态提示，以提高用户体验。