以下是一个简单的 AJAX 教程，以了解如何使用原生 JavaScript 发送 AJAX 请求：
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 Tutorial</title>
</head>
<body>
<h1>AJAX Tutorial</h1>
<button onclick="loadData()">Load Data</button>
<div id="result"></div>
<script src="ajax.js"></script>
</body>
</html>
2. 创建一个 JavaScript 文件（例如 ajax.js）：
function loadData() {
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 配置请求
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
// 定义回调函数，处理请求完成后的操作
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
// 请求成功
var responseData = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML = `
<p>User ID: ${responseData.userId}</p>
<p>Title: ${responseData.title}</p>
<p>Body: ${responseData.body}</p>
`;
} else {
// 请求失败
console.error('Request failed with status:', xhr.status);
}
};
// 处理网络错误
xhr.onerror = function () {
console.error('Network error occurred');
};
// 发送请求
xhr.send();
}
3. 启动一个本地服务器：
如果你在本地运行这个示例，你需要启动一个本地服务器。你可以使用 Python 提供一个简单的 HTTP 服务器：
python -m SimpleHTTPServer 8000
或者如果你使用 Python 3：
python -m http.server 8000
访问 http://localhost:8000 即可查看示例页面。
4. 点击按钮触发 AJAX 请求：
打开浏览器，访问 http://localhost:8000，点击 "Load Data" 按钮，页面会发起一个 AJAX 请求，获取并显示数据。
这只是一个基本的 AJAX 示例。在实际应用中，你可能会遇到跨域请求、POST 请求、使用 Fetch API 等更复杂的情况。为了处理这些情况，也可以考虑使用现代的 JavaScript 框架（如 Vue.js、React、Angular）或库（如 Axios）来简化 AJAX 请求的管理。
转载请注明出处：http://www.zyzy.cn/article/detail/13176/AJAX