<!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>
<button onclick="loadData()">Load Data</button>
<div id="output"></div>
<script>
function loadData() {
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 配置请求
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
// 设置回调函数，处理响应
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析响应的 JSON 数据
var responseData = JSON.parse(xhr.responseText);
// 在页面上显示数据
displayData(responseData);
}
};
// 发送请求
xhr.send();
}
function displayData(data) {
// 获取输出的元素
var outputElement = document.getElementById('output');
// 构建输出的HTML内容
var outputHTML = '<p>User ID: ' + data.userId + '</p>';
outputHTML += '<p>Title: ' + data.title + '</p>';
outputHTML += '<p>Completed: ' + data.completed + '</p>';
// 将内容添加到输出元素
outputElement.innerHTML = outputHTML;
}
</script>
</body>
</html>
在这个示例中，当用户点击按钮时，loadData 函数将被调用。该函数创建了一个 XMLHttpRequest 对象，配置了一个 GET 请求到 JSONPlaceholder API，并设置了一个回调函数来处理响应。在回调函数中，我们检查请求的状态和状态码，如果一切正常，我们解析响应中的 JSON 数据并调用 displayData 函数来在页面上显示数据。
请注意，这个示例中的请求使用了一个公共的测试 API（https://jsonplaceholder.typicode.com/todos/1）。在实际应用中，你将使用自己的后端服务的 API 地址。此外，现代前端通常使用 Fetch API 或者更高级的 AJAX 库，以获得更简洁和功能丰富的 API。
转载请注明出处：http://www.zyzy.cn/article/detail/4588/Ajax