搭建Web服务环境
之前讲过 Express 快速启动Web服务，这里把代码再重写一下；
需要复习的同学请看：
AJAX(笔记03) - 原生AJAX - Node.js 和 Express 的简介、安装
AJAX(笔记04) - 原生AJAX - GET请求
Express 简介、安装、使用和案例
新建 server.js 服务文件：这次多写一个 post 响应的路由：
const express = require('express')
const app = express()
// post 路由
app.post('/server', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*')
response.send('Hello Ajax post!')
})
// get 路由 参考上一篇，本篇不需要 get 路由
app.get('/server', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*')
response.send('Hello Ajax!')
})
app.listen('8000', () => {
console.log('Web服务已经启动，端口8000监听中... ...');
})
为了区分 get 路由的响应结果，在post 里修改一下响应体；
启动服务：需在 server.js 目录执行 node 命令；
> node server.js
测试服务：浏览器只能测试get请求，这里使用 apifox 来测试路由；
提示：apifox 和 postman 在服务测试这块功能一样；
可以正常显示响应体；
创建POST请求
需求：鼠标经过 div 时，向服务端发送 post 请求，并把响应体显示在 div 中；
新建一个 ajax_post.html页面，再写点结构样式：
<style>
#result {
width: 200px;
height: 100px;
border: 1px solid #385;
}
</style>
<div id="result">
</div>
看下效果：
对，就是这么一个框，鼠标经过时发送POST请求，并把响应体显示在框里；
接下来写 js 逻辑：
// 获取对象
let result = document.getElementById('result')
// 绑定事件
result.addEventListener('mouseover',function(){
// 1. 创建对象
const xhr = new XMLHttpRequest
// 2. 初始化 设置类型与URL
xhr.open('POST', 'http://127.0.0.1:8000/server')
// 3. 发送请求
xhr.send()
// 4. 事件绑定
xhr.onreadystatechange = function () {
// 判断
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response);
// 返回结果
result.innerHTML = xhr.response
}
}
}
})
提示1：拿到DOM元素，创建监听事件，设置AJAX并返回结果；
看下效果：
提示：鼠标经过，触发响应结果；控制台也输出结果；
network 查看下 post 请求：
请求报文：请求行，请求头
提示：请求报文（红框），请求行（黄框），请求头键值对（蓝框）
响应报文：响应行，响应头
提示：响应报文（红框），响应行（黄框），响应头键值对（蓝框），跨域设置（绿框）；
响应报文：响应体
POST发送参数
Post请求在 xhr.send() 方法中发送参数；
参数的格式非常灵活，甚至可以任意写，但需要对应的服务来处理相应的数据；所以列出两种常用格式；
格式一：
xhr.send('a=1&b=2&c=3')
看下结果：
格式二：
xhr.send('a:1&b:2&c:3')
POST设置请求头
上面说明了 Post 设置请求行和请求体的方法，接下来说明设置请求头信息；
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.setRequestHeader('name','Jacky')
几个关联的问题：
为什么要设置请求头？
设置了请求头，可以影响服务器响应的数据，比如：
Content-Type
