ajax实现页面的局部加载例子解析

最新推荐文章于 2025-06-03 09:12:12 发布

原创最新推荐文章于 2025-06-03 09:12:12 发布 · 464 阅读

7 ·

CC 4.0 BY-SA版权

CC BY-NC-SA 3.0

文章标签：

#ajax #前端 #javascript

ajax 专栏收录该内容

108 篇文章

订阅专栏

在这里插入图片描述

代码示例：

Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不干扰用户的情况下，对网页的某部分进行更新。下面是一个使用原生JavaScript实现Ajax局部加载的详细例子：

1. HTML部分

首先，我们需要一个简单的HTML页面结构，用于触发Ajax请求和显示结果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax局部加载示例</title>
</head>
<body>

<button id="loadButton">加载内容</button>
<div id="content"></div>

<script src="ajax.js"></script>
</body>
</html>

2. JavaScript部分

接下来，我们编写JavaScript代码来处理Ajax请求。

// ajax.js

function loadContent() {
    var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
    xhr.open('GET', 'data.txt', true); // 初始化请求，这里假设服务器返回的是文本内容

    xhr.onreadystatechange = function() { // 状态改变时的回调函数
        if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且成功
            document.getElementById('content').innerHTML = xhr.responseText; // 将响应文本显示在div中
        }
    };

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

document.getElementById('loadButton').addEventListener('click', loadContent); // 给按钮添加点击事件