1. GET 请求

应用：ajax 定制网站进行表单提交，定制网站服务器端获取请求参数

在客户端，我们要把定制网站姓名和年龄定制网站拼接成请求参数的格式
格式如下：username=123&age=456
定制网站在传统表单提交中，请求参数 定制网站是自动拼接好的，而ajax 定制网站中这个参数需要我们自己去拼接
并且，这个参数需要放在请求地址的后面

03-传递get请求参数.html 部分代码：

btn.onclick = function() {            // 2. 在用户点击按钮的时候去创建 ajax 对象，然后去发送请求            var xhr = new XMLHttpRequest()                        // 用户点击按钮的时候，我们也要获取到 两个文本框的值            var nameValue = username.value            var ageValue = age.value                // 自己拼接请求参数            var params = 'username=' + nameValue + '&age=' + ageValue                       // 配置 ajax 对象            xhr.open('get', 'http://localhost:3000/get?' + params)                        // 发送请求            xhr.send()                        // 获取服务器端响应的数据            xhr.onload = function() {                console.log(xhr.responseText);            }        }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

app.js 对应代码：

// 对应 03html文件app.get('/get', (req, res) => {    // req.query 返回的就是客户端传来的 get请求参数    res.setHeader("Access-Control-Allow-Origin", "*") // 允许跨域    res.send(req.query) // 把 get请求参数 响应到客户端});1
2
3
4
5
6

浏览器中的 network 显示：

浏览器中的 控制台 显示：

2. POST 请求

post请求参数要放到 send（）方法中
xhr.setRequestHeader()方法是用来设置 请求报文当中的报文头信息
第一个参数是报文属性名称 ，第二个参数是 报文属性对应的值
如果请求参数的类型是：username=123&age=45，则第二个参数是’application/x-www-form-urlencoded’

注意：服务器端要获得post 请求参数，需要借助中间件 body-parser。然后就可以使用 req.body 获得post 请求参数。（以前的方法）

但是，在新的语法中，不再需要body-parser这个中间件了，已经实现了对post 参数的解析。

//express框架已经实现了对post 参数的解析。const app = express();// app.use(bodyParser.urlencoded());  这个语法已被弃用app.use(express.json())app.use(express.urlencoded({ extended: false }))并且，获取post参数方法依旧是req.body1
2
3
4
5
6
7
8
9
10
11

04-传递post请求参数.html部分代码：

var params = 'username=' + nameValue + '&age=' + ageValue            // 配置 ajax 对象            xhr.open('post', 'http://localhost:3000/post')                        // 设置请求参数的格式的类型(post请求必须要设置)            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')                        // 发送请求            xhr.send(params)                        // 获取服务器端响应的数据            xhr.onload = function() {                console.log(xhr.responseText);            }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

app.js 对应的代码：

// 对应 04html文件app.post('/post', (req, res) => {     res.setHeader("Access-Control-Allow-Origin", "*") // 允许跨域    res.send(req.body) // 响应给客户端});1
2
3
4
5

3. 请求报文

在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式。

报文分为 报文头 和 报文体
报文头和报文体在请求的过程中，整体被发送到服务器端。

报文头：

报文头中存储的是一些键值对信息，可以理解为：客户端向服务端说的话
例如，示例中的 Content-Type 就属于报文头信息

报文体：

主要存储一些内容，比如 post请求参数。

定制网站ajax 传递请求参数

定制网站传统表单提交

1. GET 请求

应用：ajax 定制网站进行表单提交，定制网站服务器端获取请求参数

2. POST 请求

3. 请求报文