【js中ajax完整例子】在JavaScript开发中，AJAX（Asynchronous JavaScript and XML）是一种用于创建异步Web应用的技术。通过AJAX，网页可以在不重新加载整个页面的情况下与服务器进行数据交换，从而提升用户体验。下面将总结一个完整的AJAX示例，并以表格形式展示关键点。
一、AJAX简介
AJAX不是一种编程语言，而是一种技术组合，它结合了以下几种技术：
| 技术 | 作用 |
| JavaScript | 控制浏览器行为 |
| XMLHttpRequest | 发送和接收数据 |
| HTML/CSS | 页面结构和样式 |
| XML/JSON | 数据格式 |
二、AJAX工作原理
AJAX的核心在于异步请求。当用户触发某个事件（如点击按钮），JavaScript会使用`XMLHttpRequest`对象向服务器发送请求，服务器处理后返回数据，JavaScript再根据返回的数据更新页面内容。
三、完整AJAX示例
以下是一个简单的AJAX请求示例，使用原生JavaScript实现，包含HTML、CSS和JavaScript代码。
1. HTML部分
```html
AJAX 请求示例
<script src="script.js"></script>
```
2. JavaScript部分（script.js）
```javascript
function sendRequest() {
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 设置请求类型和URL
xhr.open("GET", "data.json", true);
// 设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功，更新页面内容
document.getElementById("response").innerHTML = xhr.responseText;
} else if (xhr.status !== 200) {
document.getElementById("response").innerHTML = "请求失败：" + xhr.status;
}
};
// 发送请求
xhr.send();
}
```
3. JSON数据文件（data.json）
```json
{
"message": "AJAX 请求成功！",
"time": "2025-04-05 10:30:00"
}
```
四、关键点总结
| 模块 | 内容 |
| 请求方式 | GET 或 POST |
| 请求对象 | `XMLHttpRequest` |
| 状态码 | 200 表示成功，其他为错误 |
| 异步处理 | 使用 `onreadystatechange` 监听状态变化 |
| 数据格式 | 支持 JSON、XML、HTML 等 |
| 安全性 | 需注意跨域问题（CORS） |
| 优势 | 提升用户体验，减少页面刷新 |
五、注意事项
- 在实际开发中，建议使用封装好的库（如jQuery的`$.ajax()`或Fetch API）来简化操作。
- 跨域请求需服务器支持CORS，否则会被浏览器拦截。
- 处理错误时应添加适当的提示信息，提高用户体验。
通过以上示例，你可以快速了解如何在JavaScript中使用AJAX进行异步请求。掌握AJAX技术，是构建现代Web应用的重要一步。