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