1. HTML 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Example</title>
</head>
<body>
<h1>User's To-Do List</h1>
<button onclick="loadTodos()">Load To-Do List</button>
<ul id="todoList"></ul>
<script src="ajax-example.js"></script>
</body>
</html>
2. JavaScript 文件（例如 ajax-example.js）：
function loadTodos() {
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 配置 GET 请求，请求 JSONPlaceholder 的待办事项数据
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos', true);
// 定义回调函数，处理请求完成后的操作
xhr.onload = function () {
if (xhr.status === 200) {
// 请求成功，解析返回的 JSON 数据
var todos = JSON.parse(xhr.responseText);
// 更新页面中的待办事项列表
displayTodos(todos);
} else {
// 请求失败
console.error('Failed to load to-do list. Status:', xhr.status);
}
};
// 处理网络错误
xhr.onerror = function () {
console.error('Network error occurred');
};
// 发送请求
xhr.send();
}
function displayTodos(todos) {
var todoList = document.getElementById('todoList');
todoList.innerHTML = ''; // 清空列表
// 遍历待办事项数据，并添加到列表中
todos.forEach(function (todo) {
var listItem = document.createElement('li');
listItem.textContent = todo.title;
todoList.appendChild(listItem);
});
}
3. 在本地服务器上运行：
启动一个本地服务器，以便可以通过浏览器访问 HTML 文件。你可以使用 Python 提供一个简单的 HTTP 服务器：
python -m SimpleHTTPServer 8000
或者如果你使用 Python 3：
python -m http.server 8000
然后访问 http://localhost:8000。
4. 点击按钮触发 AJAX 请求：
打开浏览器，访问 http://localhost:8000，点击 "Load To-Do List" 按钮，页面会发起一个 AJAX 请求，获取并显示用户的待办事项列表。
这个示例演示了一个简单的 AJAX 请求，获取 JSON 数据并在页面上显示。在实际应用中，你可能需要更复杂的处理逻辑，例如处理POST请求、使用 Fetch API、错误处理等。同时，现代的 JavaScript 框架或库（如 Vue.js、React、Angular）也提供了更方便的工具来管理异步请求。
转载请注明出处：http://www.zyzy.cn/article/detail/13178/AJAX