【js中ajax完整例子】在JavaScript开发中，AJAX（Asynchronous JavaScript and XML）是一种用于创建异步Web应用的技术。通过AJAX，可以在不重新加载整个页面的情况下，与服务器进行数据交换并更新部分网页内容。下面将通过一个完整的示例来展示如何在JS中使用AJAX。
一、AJAX简介
AJAX并不是一种新的编程语言，而是多种技术的组合，包括：
- XMLHttpRequest对象：用于在浏览器和服务器之间发送请求和接收响应。
- JavaScript：用于控制流程和操作DOM。
- HTML/CSS：用于构建页面结构和样式。
- 服务器端语言（如PHP、Node.js等）：用于处理请求并返回数据。
二、AJAX基本流程
1. 创建 `XMLHttpRequest` 对象
2. 设置请求方式（GET/POST）和URL
3. 发送请求
4. 接收服务器响应
5. 处理响应数据
三、完整示例代码
以下是一个简单的AJAX请求示例，演示如何从服务器获取数据并在页面上显示。
```html
用户信息
<script>
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 设置请求方式和URL
xhr.open("GET", "https://jsonplaceholder.typicode.com/users/1", true);
// 设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("user-info").innerHTML =
"姓名：" + response.name + "
" +
"邮箱：" + response.email + "
" +
"公司：" + response.company.name;
}
};
// 发送请求
xhr.send();
</script>
```
四、AJAX常用方法与属性总结
| 方法/属性 | 描述 |
| `new XMLHttpRequest()` | 创建一个新的 AJAX 请求对象 |
| `open(method, url, async)` | 初始化一个请求，`method` 可以是 GET 或 POST，`async` 是布尔值表示是否异步 |
| `send(data)` | 发送请求，POST 时可以传递数据 |
| `onreadystatechange` | 当 readyState 改变时触发的事件处理函数 |
| `readyState` | 表示请求的状态（0=未初始化，1=已打开，2=已发送，3=接收中，4=完成） |
| `status` | HTTP 状态码（如 200 表示成功） |
| `responseText` | 服务器返回的文本数据 |
| `responseJSON` | 将返回的数据解析为 JSON 对象 |
五、注意事项
- 使用 `GET` 请求时，参数应附加在 URL 后面。
- 使用 `POST` 请求时，需要设置 `Content-Type` 为 `application/x-www-form-urlencoded` 或 `application/json`。
- 注意跨域问题，如果请求不同源的接口，可能需要后端设置 CORS。
- 建议使用现代的 `fetch()` API 替代 `XMLHttpRequest`，更加简洁和强大。
通过以上示例和总结，你可以快速了解如何在 JavaScript 中使用 AJAX 实现异步请求，并根据实际需求进行扩展和优化。
