JS基于Ajax实现的网页Loading效果代码

2023年6月11日下午12:10 • JavaScript

下面提供一份“JS基于Ajax实现的网页Loading效果代码”的攻略，共分为以下几个步骤。

步骤一：创建HTML文件和CSS文件

首先，我们需要创建一个基础的 HTML 文件和对应的 CSS 文件。HTML 文件中包含了页面常规结构，如头部、导航、内容等，并且在内容部分添加一个 div 元素来承载我们的 Loading 效果。CSS 文件中包含了页面元素的样式设置，其中要特别注意的是 Loading 效果的样式设置。具体的代码实现，可以参考下面的示例。

HTML 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Loading Effect by Ajax and JS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <header>
      <h1>Loading Effect by Ajax and JS</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <main>
      <div id="loading"></div>
      <p>Content goes here ...</p>
    </main>
  </body>
</html>

CSS 文件：

/* 页面全局样式 */
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
  color: #333;
  font-family: Arial, sans-serif;
}

header, nav, main {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}

header {
  padding: 20px 0;
  text-align: center;
}

nav {
  margin: 20px 0;
  text-align: center;
}

nav ul {
  list-style-type: none;
}

nav li {
  display: inline-block;
  margin: 0 10px;
}

nav a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
  background-color: #f5f5f5;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

nav a:hover {
  background-color: #333;
  color: #fff;
}

main {
  position: relative;
}

/* Loading 效果样式 */
#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  border: 6px solid #ccc;
  border-top-color: #f36;
  animation: rotate 1s linear infinite;
  -webkit-animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

步骤二：编写 JS 代码

接下来，我们需要编写一个 JS 文件。此文件作为页面的主要逻辑处理部分，包含了 AJAX 请求和 Loading 效果的控制。具体代码实现步骤如下。

1. 给 Loading 效果添加显示和隐藏的控制

我们需要在 JS 文件中编写代码，控制 Loading 效果的显示和隐藏。具体而言，在 AJAX 请求发送前，将 Loading 效果的 display 属性设置为 block，在 AJAX 请求返回成功或者错误时，将 Loading 效果的 display 属性设置为 none。示例代码如下：

// 获取 Loading 效果元素
var loading = document.getElementById('loading');

// AJAX 请求前显示 Loading 效果
function showLoading() {
  loading.style.display = 'block';
}

// AJAX 请求返回后隐藏 Loading 效果
function hideLoading() {
  loading.style.display = 'none';
}

2. 发送 AJAX 请求并获取返回的数据

我们需要在 JS 文件中编写代码，对我们想要获取的数据进行 AJAX 请求，并在获得请求返回数据后进行处理。一般而言，我们会使用 XMLHttpRequest 对象来实现 AJAX 请求。在 AJAX 请求返回数据时，我们可以通过 XMLHttpRequest.responseText 获取到返回的数据。可以将数据直接显示在页面上，或通过 JS 对数据进行处理。示例代码如下：

function loadData() {
  // AJAX 请求前显示 Loading 效果
  showLoading();

  /*
  * 创建一个 XMLHttpRequest 对象
  * 并设置其请求方法和请求地址
  */
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://localhost:8080/api/data', true);

  // 发送 AJAX 请求
  xhr.send();

  // 监听 AJAX 请求状态
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) { // AJAX 请求已完成
      if (xhr.status == 200) { // AJAX 请求成功
        var data = xhr.responseText; // 获取返回的数据
        // 对数据进行处理
        // ...
        // 隐藏 Loading 效果
        hideLoading();
      } else { // AJAX 请求错误
        alert('Error occurred: ' + xhr.statusText);
        // 隐藏 Loading 效果
        hideLoading();
      }
    }
  }
}

注意：上述代码中的 http://localhost:8080/api/data 为示例 AJAX 请求地址，请根据实际情况修改。

步骤三：调用 JS 函数

最后，我们在 HTML 文件中的相应位置调用 JS 函数，触发 AJAX 请求并显示 Loading 效果。示例代码如下：

<p><button onclick="loadData()">Load Data</button></p>

以上就是基于 Ajax 实现的网页 Loading 效果的完整攻略。在实际开发过程中，我们还可以对 Loading 效果进行更多的优化和改进，例如添加多种显示样式、添加动画效果、添加进度条等等，以提升用户体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS基于Ajax实现的网页Loading效果代码 - Python技术站