AJAX 调用 Do Something While - JavaScript

在使用 AJAX 进行前端开发时，经常需要在数据加载期间显示一些动画或提示。这就是“Do Something While”需求。本文将介绍如何使用 JavaScript 实现这一需求。

什么是 AJAX

AJAX（Asynchronous JavaScript and XML）是一种在后台与服务器进行数据交换的技术。AJAX 不需要刷新整个页面，只需要更新页面的一部分，因此可以提高用户的交互体验。

AJAX 的基本用法

使用 AJAX 的基本步骤如下：

1. 创建一个 XMLHttpRequest 对象。
2. 打开一个与服务器的连接。
3. 发送请求。
4. 接收服务器的响应。
5. 更新页面。

以下是一个简单的 AJAX 示例：

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.open('GET', 'http://example.com/api/data', true);
xhr.send();

实现 Do Something While

在数据加载期间，我们通常需要在页面上显示一些“Loading”提示。我们可以通过以下两种方式实现：

方式一：使用 GIF 动画

可以使用 GIF 动画来展示“Loading”提示。我们只需在 HTML 代码中添加以下代码：

<img src="loading.gif" alt="Loading..." />

方式二：使用 Spin.js 插件

使用 Spin.js 插件可以轻松实现“Loading”提示。我们只需在 HTML 代码中添加以下代码：

<div id="spinner"></div>

然后在 JavaScript 代码中配置 Spin.js：

var opts = {
  lines: 13, // The number of lines to draw
  length: 20, // The length of each line
  width: 10, // The line thickness
  radius: 30, // The radius of the inner circle
  scale: 1, // Scales overall size of the spinner
  corners: 1, // Corner roundness (0..1)
  color: '#000', // CSS color or array of colors
  fadeColor: 'transparent', // CSS color or array of colors
  speed: 1, // Rounds per second
  rotate: 0, // The rotation offset
  animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
  direction: 1, // 1: clockwise, -1: counterclockwise
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  className: 'spinner', // The CSS class to assign to the spinner
  top: '50%', // Top position relative to parent
  left: '50%', // Left position relative to parent
  shadow: 'none', // Box-shadow for the lines
  position: 'absolute' // Element positioning
};
var spinner = new Spin.Spinner(opts).spin(document.getElementById('spinner'));

在 AJAX 请求结束时，我们可以使用以下代码来隐藏“Loading”提示：

spinner.stop();

总结

本文介绍了如何使用 JavaScript 实现 AJAX 请求期间的“Do Something While”需求。使用 GIF 动画或 Spin.js 插件都可以轻松实现“Loading”提示。在实际项目中，根据需要选择合适的方式。