### 原生Ajax知识点详解
#### 一、原生Ajax概述
原生Ajax是一种使用JavaScript与服务器异步交互的技术，它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分页面内容。实现这一功能的核心是`XMLHttpRequest`对象。
#### 二、原生Ajax经典四步详解
**第一步：创建网络请求的Ajax对象**
原生Ajax操作的第一步是创建一个`XMLHttpRequest`对象，该对象用于发起HTTP请求，并接收服务器响应。在现代浏览器中，可以通过以下方式创建：
```javascript
let xhr = new XMLHttpRequest();
```
**第二步：监听对象状态的变化**
创建了`XMLHttpRequest`对象之后，我们需要设置一个回调函数来监听对象的状态变化，以便在请求完成时执行特定的操作。
- **监听`onreadystatechange`事件**
`XMLHttpRequest`对象有一个`readyState`属性，该属性表示当前请求/响应周期的步骤。当`readyState`变为4时，表示请求已完成。此时可以获取服务器响应的数据。
```javascript
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
```
- **监听`onload`事件**
`onload`事件是在请求成功完成后触发的，这是一种更简洁的处理方式，适用于处理成功的响应。
```javascript
xhr.onload = function () {
console.log(xhr.responseText);
};
```
**第三步：配置网络请求**
配置网络请求主要通过调用`open`方法来实现，这个方法接受三个参数：请求类型（如GET或POST）、请求的URL以及是否异步执行请求。
```javascript
xhr.open('GET', 'http://127.0.0.1:3001/getData', true);
```
其中，第三个参数通常设置为`true`表示异步执行请求，这样就不会阻塞浏览器的其他操作。
**第四步：发送网络请求**
最后一步是通过调用`send`方法发送请求。对于GET请求，`send`方法通常不带参数；而对于POST请求，则需要通过`send`方法发送请求体数据。
```javascript
xhr.send(null); // GET请求
```
或者对于POST请求：
```javascript
xhr.send('key=value'); // POST请求
```
#### 三、原生Ajax请求前后端代码示例
**1. package.json依赖**
这里展示了项目中的`package.json`文件，列出了项目所使用的依赖包。这些依赖包对于构建后端服务至关重要。
```json
{
"dependencies": {
"@koa/router": "^12.0.0",
"axios": "^0.27.2",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"express": "^4.17.1",
"express-session": "^1.17.2",
"koa": "^2.13.4",
"koa-body": "^5.0.0",
"koa-bodyparser": "^4.4.0",
"koa-logger": "^3.2.1",
"koa-static": "^5.0.0",
"koa2-cors": "^2.0.6",
"moment": "^2.30.1",
"mongodb": "^4.4.0",
"nprogress": "^0.2.0",
"qs": "^6.10.2"
}
}
```
**2. 前端代码：发送Ajax请求**
下面是一段简单的前端代码，演示了如何使用原生Ajax发起GET请求。
```javascript
<script>
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open('GET', 'http://127.0.0.1:3001/getData', true);
xhr.send();
</script>
```
**3. 后端代码：监听请求并响应**
接下来展示了一段简单的后端代码，使用Koa框架来监听请求并做出响应。
```javascript
const Koa = require('koa');
const cors = require('koa2-cors');
const logger = require('koa-logger');
const app = new Koa();
app.use(cors());
app.use(logger());
// 处理GET请求
app.use(async ctx => {
if (ctx.request.method === 'GET' && ctx.path === '/getData') {
ctx.body = '这是GET请求的响应数据';
}
});
app.listen(3001, () => {
console.log('Server is running on port 3001');
});
```
以上内容详细介绍了原生Ajax的基本使用方法及其前后端代码示例。通过这些知识点的学习，读者可以更好地理解并应用原生Ajax技术。
