发布于 

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 获取响应内容
// console.log(xhr.responseText);
var data = xhr.responseText;


4JSON格式的数据转换为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;

4JSON转换为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=机械工业出版社');

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。