get请求与post请求的区别
总结
get请求与post请求的区别：
1.语义区别:
| -get | -post |
|---|
| 请求用于获取数据 | 请求用于发送数据 |
2.请求参数的发送位置有区别：
-get请求的参数，在URL中传递
-post请求的请求参数，无法看到传递位置
3.可发送数据大小不同
-get请求参数在URL中发送，浏览器限制了URL的长度，不同浏览器限制不同
-可发送数据大小为2k
-post请求，理论上没有大小限制（都是由服务器限制）
-根据需求进行限制设置
-根据服务器处理能力进行限制设置
4.可发送内容格式不同
-get只能发送文字数据
-post可以发送各种类型数据
get请求参数的形式：
格式为：接口地址？请求参数
形式为：
请求参数：名=值&名=值&名=值......【注：某个值为中文，中文会自动进行编码处理】
（network->点击某个get请求->headers->Query String Parameters->可以查看所参数）
post请求参数形式：
形式为：
URL编码形式urlencoded，只是与get发送位置不同，数据的形式相同
（network->点击某个post请求->headers->Form Data->可以查看所有参数）
原生的ajax发送get请求的使用：
浏览器提供XMLHttpRequest构造函数，用于创建可以发送ajax对象
-----请求发送功能-----
1
2
3
4
5
6
7
8
9
| 1创建xhr实例
var xhr = new XMLMLHttpRequest();
2调用open()用于建立与服务器的链接
-设置请求方式和请求地址
-参数1：请求方式，get或者post
-请求地址
xhr.open('get','地址')；
3调用send()，用于将请求发送出去，这一句send()是异步代码
xhr.send();
|
-----响应处理功能-----
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| 由于send()是异步操作，所有不能直接在send()之后直接写代码获取响应内容
- xhr.readyState 用于表示ajax对象的操作状态
- 0 初始化阶段：创建了xhr实例
- 1 调用open：建立与服务器的连接
- 2 调用send：请求发送了
- 3 下载中
- 4 下载完毕：确定下载完毕，还能使用响应的数据
1设置事件，监测响应的状态
xhr.onreadystatechange = function () {
2检测响应下载完毕，还应当确保本次请求是成功的请求状态，这样响应才有意义
- xhr.status 本次请求的状态码
- 200 成功 404没有找到对应资源
if (xhr.status === 4 && xhr.status === 200) {
3 获取响应内容
var data = xhr.responseText;
4 将JSON格式的数据转换为js对象
由于是原生写法，没有人帮我们进行数据类型处理，我们需要自己进行数据处理
data = JSON.parse(data);
console.log(data);
}
};
|
发送带有参数的get请求：
— 请求发送功能—
1
2
3
4
5
6
7
| 1 初始化xhr对象
var xhr = new XMLHttpRequest();
2 调用open
- get请求参数以?连接，拼接在url后面，形式为urlencoded
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=2&bookname=红楼梦');
3 调用send
xhr.send();
|
—响应处理—
1
2
3
4
5
6
7
8
9
10
11
12
| 1 设置事件
xhr.onreadystatechange = function () {
2 检测响应是否下载完毕/请求是否成功
if (xhr.readyState === 4 && xhr.status === 200) {
3 接收响应内容
var res = xhr.responseText;
4 将JSON转换为js对象
res = JSON.parse(res);
console.log(res);
}
};
|
发送post请求：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| 1 初始化xhr对象
var xhr = new XMLHttpRequest();
2 调用open
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');
3 设置本次请求发送的内容类型（告诉服务器请求参数的类型）
- 设置内容类型为urlencoded即可
- setRequestHeader() 用于设置请求头的信息
- 请求头：是请求发送的一些额外信息，这些额外信息用于确保请求发送的数据可以正确被服务器接收使用
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
4 发送请求
- post请求的请求参数为urlencoded形式，传入到send()中即可
xhr.send('bookname=老人与海&author=海明威&publisher=机械工业出版社');
|