什么是数据交互？
数据交互是httpd协议中常见的，数据交互顾名思义就是我把数据传输给你，你再把数据返回给我，这么一个过程其实就是数据交互。
数据交互里面的一些基本概念：
数据交互过程图：
根据上图的意思，无非就是用户在客户端的浏览器中上网，这一个上网打开链接的过程，其实就是访问一个具体url地址而要发起一个请求到服务器这一端来，而服务器这边拿到客户端发过来的请求，表示收到呼叫，稍等片刻，在这片刻之间呢，服务器就会去处理客户端发起请求的，然后把结果反馈给客户端，并且告诉客户端一声，这是你的用户需要的资料，浏览器当即进行解析把页面渲染出来，然后用户就看到了浏览器解析网页后所呈现出的内容了，上述的这么一个过程其实就是数据交互啦。
那么在数据交互的过程中到底发送了什么事情呢？
比如浏览器发送给服务器的这个数据到底是什么？
服务器返还给客户端的这个数据又是什么呢？
嘿嘿!其实，这个数据就叫报文，那报文又长啥样呢？
从浏览器发送给服务器的这个数据，我叫它请求报文，换言之还有一个响应报文。
请求报文拆解图：
如果我们用过ajax就知道，报文其实Network里面那个东东，分别对应请求头、请求体，还有响应头、响应体。
数据的交互方式，换个说法也可以叫数据的请求方式
常见的数据请求方式是:GET请求(完整请求一个资源)和POST请求(表单提交)
此外还有一些比较偏，或者比较冷，简单点就是平时基本用不到的数据请求方式：PUT（上传文件）、DELETE、PATCH（打补丁）、HEAD(仅请求响应首部)
什么是GET请求？
- 从字面上理解,GET就是获取、获得、得到的意思。而GET()请求主要就是获取数据。
- 发起GET请求,数据是放在url里面进行传输的，就像ajax里面的携带参数，专业点叫查询字符串,Query String，一段完整的url后面,出现了一个?，这个?符号后面就表示具体的携带信息，而&这个符号就是作参数拼接意思。
axios.get({
url:'localhost:3000/api/goodsList?id=10023&page=1&limit=10'
})
回顾一下上面报文图，这里的url其实指的就是我们放在报文里面那个请求头位置的请求信息。
- GET请求容量小,必须小于32KB,这是http协议规定的，因为这个规定，所以GET请求只允许传递少量的数据，比如一些数字、字符串等，如果想要传递图片格式的数据或者视频，GET请求确实有点捉襟见肘，必须采用POST请求。
当页面发起一个GET请求时，应如何拿到GET请求发送过来数据？
一个小demo,用到node中http模块来搭建服务器，而前端暂且使用表单发起GET请求。
前端界面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://localhost:3000/api" method="GET">
<table border="1">
<tr>
<td>用户名：</td>
<td><input type="text" name="userName"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交" style="width: 100%;"></td>
</tr>
</table>
</form>
</body>
</html>
服务器：
const http = require('http')
//搭建服务器
http.createServer((req, res)=>{
console.log(req.url);//拿到浏览器发起请求的路径
}).listen(3000)//监听端口号
运行服务器，当我们在客户端浏览器中提交表单后
PS C:\Users\asus\Desktop\学习Nodejs> node index
/api?userName=qinfubin&password=123456
如果我们想拿到这些数据，可以通过es6语法的解构赋值去获取，用split()方法去切一刀,返回一个字符串数组
const http = require('http')
//搭建服务器
http.createServer((req, res)=>{
console.log(req.url);//拿到浏览器发起请求的路径
let [url,queryString] = req.url.split('?') //以?号切一刀，返回1个字符串数组分别赋值给url和queryString
console.log(url)
console.log(queryString);
let [user_name,passwd] = queryString.split('&')
console.log(`用户名：${user_name},密码：${passwd}`);
}).listen(3000)//监听端口号
但在node中有一个url模块，有了它，我们就不需要去用split()去砍一刀又一刀，然后再结构赋值，我们为什么不用现成的呢？
const http = require('http')
const url = require('url')
//搭建服务器
http.createServer((req, res)=>{
console.log(url.parse(req.url));//拿到浏览器发起请求的路径进行解析
}).listen(3000)//监听端口号
如果我们再增加一个参数：true，这样我们就直接可以拿到一个json对象
console.log(url.parse(req.url,true));
接下来我们只需要结构赋值，将json里面的数据值取出来即可
const http = require('http')
const url = require('url')
//搭建服务器
http.createServer((req, res)=>{
//console.log(url.parse(req.url,true));;//拿到浏览器发起请求的路径进行解析
const {pathname, query} = url.parse(req.url,true)
console.log(`请求的路径pathname是:${pathname},用户名:${query.userName},密码：${query.password}`);
}).listen(3000)//监听端口号
POST请求和GET请求的区别在哪里？
我们知道无论是GET方式还是POST方式，它们共同的特点就是都可以发起请求，并且还可以进行传递数据。
而POST方式相比于GET方式，具体有哪些区别呢？
- 数据是放在body里面进行传输的。
- 具有小于2G的传递数据空间，传输容量大，是POST传递数据方式最明显的特点，这也意味着，传输一些视频或者图片格式的文件绰绰有余。
- 因为GET方式传递数据容量小，所以是一次性传输，而POST方式不一样，比如传递一个文件，因为数据量大，它会分成一段一段地进行传输二进制的buffer流。
demo案例
前端界面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://localhost:3000/api" method="POST">
<table border="1">
<tr>
<td>用户名：</td>
<td><input type="text" name="userName"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交" style="width: 100%;"></td>
</tr>
</table>
</form>
</body>
</html>
服务器：
const http = require('http')
const queryString = require('querystring')
//搭建服务器
http.createServer((req, res)=>{
let result = []
req.on('data',buffer => { //监听buffer流动过程
result.push(buffer)//将每次流过的都添加到数组中
})
req.on('end', () =>{//进行最后一次buffer流动的监听
console.log('数据已经传输完成',result);
})
}).listen(3000)//监听端口号
拿到的只是二进制的buffer流，我们需要转换成字符串的形式，才能看懂。
const http = require('http')
const queryString = require('querystring')
//搭建服务器
http.createServer((req, res)=>{
let result = []
req.on('data',buffer => { //监听buffer整个流动过程
result.push(buffer)//将每次流过一段buffer流的都添加到数组中
})
req.on('end', () =>{//进行最后一次buffer流动的监听
//console.log('数据已经传输完成',result);
let data = Buffer.concat(result).toString()//将二进制的buffer流解析成字符串
console.log(data);
console.log(queryString.parse(data)); //解析成json对象
})
}).listen(3000)//监听端口号
接下来只需要取出值即可
const http = require('http')
const queryString = require('querystring')
//搭建服务器
http.createServer((req, res)=>{
let result = []
req.on('data',buffer => { //监听buffer整个流动过程
result.push(buffer)//将每次流过一段buffer流的都添加到数组中
})
req.on('end', () =>{//进行最后一次buffer流动的监听
//console.log('数据已经传输完成',result);
const data = Buffer.concat(result).toString()//将二进制的buffer流解析成字符串
//console.log(data);
//console.log(queryString.parse(data)); //解析成json对象
const userName = queryString.parse(data).userName;//取出用户名
const password = queryString.parse(data).password;//取出密码
console.log(userName,password);
})
}).listen(3000)//监听端口号
网友评论