原生 JavaScript 实现 AJAX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生 AJAX 示例</title>
</head>
<body>
<button id="fetchDataBtn">获取数据</button>
<div id="result"></div>
<script>
document.getElementById('fetchDataBtn').addEventListener('click', function () {
// 1. 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 2. 初始化请求
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
// 3. 监听状态变化
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 请求成功，将响应数据显示在页面上
const data = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML = `标题：${data.title}`;
} else {
// 请求失败，显示错误信息
document.getElementById('result').innerHTML = `请求出错，状态码：${xhr.status}`;
}
}
};
// 4. 发送请求
xhr.send();
});
</script>
</body>
</html>
代码解释：
- 创建 XMLHttpRequest 对象：
const xhr = new XMLHttpRequest();这行代码创建了一个用于处理 AJAX 请求的对象。 - 初始化请求：
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);这里使用open方法初始化请求，参数分别为请求方法（GET）、请求的 URL 以及是否异步（true表示异步）。 - 监听状态变化：
xhr.onreadystatechange用于监听XMLHttpRequest对象的状态变化。当readyState变为 4 时，表示请求已完成，再根据status状态码判断请求是否成功（200 表示成功）。 - 发送请求：
xhr.send();这行代码将请求发送到服务器。
jQuery 实现 AJAX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery AJAX 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="fetchDataBtn">获取数据</button>
<div id="result"></div>
<script>
$(document).ready(function () {
$('#fetchDataBtn').click(function () {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/1',
method: 'GET',
success: function (data) {
// 请求成功，将响应数据显示在页面上
$('#result').html(`标题：${data.title}`);
},
error: function (xhr, status, error) {
// 请求失败，显示错误信息
$('#result').html(`请求出错，状态码：${xhr.status}`);
}
});
});
});
</script>
</body>
</html>
代码解释：
- 引入 jQuery 库：通过
<script>标签引入 jQuery 库，确保后续可以使用 jQuery 的方法。 - 绑定点击事件：使用
$(document).ready()确保文档加载完成后再执行代码。$('#fetchDataBtn').click()为按钮绑定点击事件。 - 发送 AJAX 请求：
$.ajax()方法用于发送 AJAX 请求，通过配置url和method指定请求的 URL 和方法。success回调函数在请求成功时执行，error回调函数在请求失败时执行。