Ajax异步刷新功能及其简单案例

2025年06月09日/ 浏览 5

首页 公司动态 文章详情

Ajax 简介

定义

Ajax是一种技术方案，它允许Web页面通过后台与服务器进行数据交换，并更新部分网页内容，而不影响用户界面的其他部分。它结合了JavaScript、XMLHttpRequest（XHR）对象、CSS等技术。

工作原理

  1. 客户端请求：用户触发一个事件（如点击按钮），JavaScript通过XHR对象向服务器发送一个异步请求。
  2. 服务器响应：服务器处理请求并返回数据（通常是JSON格式）。
  3. 更新页面：JavaScript接收数据后，利用DOM操作更新页面的特定部分，而无需重新加载整个页面。
  4. 持续交互：用户可以继续与已更新的页面进行交互，而无需等待整个页面重新加载。

简单案例：新闻更新应用

假设我们正在开发一个新闻网站，需要实现一个功能：当用户访问某个新闻页面时，每隔一定时间自动从服务器获取最新的新闻条目并显示在页面上。我们将使用Ajax来实现这一功能。

准备工作

  • HTML结构：定义一个<div>用于显示新闻条目。
  • JavaScript：编写脚本处理Ajax请求和更新DOM。
  • 服务器端：准备一个API接口，用于返回最新的新闻数据。

HTML代码（index.html）

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻更新应用</title>
</head>
<body>
<div id="news-container"></div>
<script src="app.js"></script> <!-- 引入JavaScript -->
</body>
</html>

JavaScript代码（app.js）

javascript
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('news-container');
let lastTime = 0; // 上次请求时间
const updateInterval = 5000; // 更新间隔时间（5秒）
const apiUrl = 'https://api.example.com/news'; // 假设的新闻API接口URL
let lastUpdated = 0; // 上次更新的时间戳
let isLoading = false; // 是否正在加载数据的状态标志
let timer; // 定时器ID
let newsData = []; // 存储获取的新闻数据数组
let requestCount = 0; // 请求计数器，避免在短时间内重复请求同一批数据（可选）
const limit = 5; // 一次请求的新闻数量限制（可选）
const displayLimit = 5; // 显示在页面上的新闻数量限制（可选）
let lastDisplayedNewsIDs = new Set(); // 已显示的新闻ID集合（可选）
lastUpdated = new Date().getTime(); // 初始化时间戳为当前时间，第一次请求不发送lastUpdated参数以获取全部数据（可选）
timer = setInterval(() => { updateNews(); }, updateInterval); // 设置定时器调用updateNews函数进行数据更新（可选）
function updateNews() { // 获取新闻并更新DOM的函数（可选）... } // 详见下文解释 } }); }); …… </script> </body> </html>

picture loss