-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (105 loc) · 5.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- bootstrap的javascript插件--需要引用jQuery -->
<script src="bootstrap/js/jquery.min.js"></script>
<!--包括所有已编译的插件-->
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div>
<h3 class="text-center text-primary">表单编码的 POST 请求</h3>
POST 请求一般用于修改服务器上的资源,它需要发送一个请求主体,客户端传递给服务器的数据就包含在这个请求主体中。<br>
POST 请求使用 表单编码 的方式来发送数据的关键步骤:<br>
1,对所需发送的数据(具有名称和值)执行普通的 URL 编码,即:像 GET 请求那样拼接为 名/值 对的形式;<br>
2,将"Content-Type"请求头的值设置为"application/x-www-form-urlencoded"。<br>
<pre style="background-color:black;color:white;">
// 获取用户输入的表单数据
var country = document.getElementById("country").value,
city = document.getElementById("city").value;
// 将数据拼接为 名/值对 的形式
var query = "country=" + country + "&city=" + city;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return; // 如果http响应不成功直接返回
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
// 获取到响应数据,可执行一些请求成功的回调函数
alert( success);
}else {
alert( error);
}
}
// 指定 POST 请求
xhr.open("POST", "/statics/demosource/demo_post_json.php");
// 设置请求主体的编码方法
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 发送请求主体(数据)
xhr.send(query);
</pre>
</div>
<div>
<h3 class="text-center text-primary">JSON 编码的 POST 请求</h3>
JSON 是一种轻量级的前后端数据交换格式,直接使用JSON.stringify原生 API 即可实现 JSON 编码,比表单编码的方式更加快捷。<br>
POST 请求使用 JSON编码 的方式来发送数据的关键步骤:<br>
1,"Content-Type"请求头的值需要为"application/json";<br>
2,对请求主体进行序列化,在 JavaScript 中可使用JSON.stringify完成这步操作。<br>
<pre style="background-color:black; color:white;">
// 获取用户输入的表单数据
var country = document.getElementById("country").value,
city = document.getElementById("city").value;
// 将数据转换为 JavaScript 对象
var data = {
country : country,
city : city
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return; // 如果http响应不成功直接返回
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
// 获取到响应数据,可执行一些请求成功的回调函数
alert( success);
}else {
alert( error);
}
}
// 指定 POST 请求
xhr.open("POST", "/statics/demosource/demo_json_data.php");
// 设置请求主体的编码方法
xhr.setRequestHeader("Content-Type", "application/json");
// 编码请求主体并发送
xhr.send(JSON.stringify(data));
</pre>
</div>
<div>
<h3 class="text-primary">GET请求 与 POST请求 对比</h3>
<ul class="list-group">
<li class="list-group-item">GET 请求:</li>
<li class="list-group-item">一般用于信息获取:通过发送一个请求来取得服务器上的资源;</li>
<li class="list-group-item">数据包含在 URL 地址中;</li>
<li class="list-group-item">数据量受 URL 的长度限制;</li>
<li class="list-group-item">不安全:浏览器的 URL 可以直接看到,明文传输;</li>
<li class="list-group-item">GET 请求会被缓存;</li>
<li class="list-group-item">GET 没有请求主体,请求速度相对较快。</li>
</ul>
<ul class="list-group">
<li class="list-group-item">POST 请求:</li>
<li class="list-group-item">
一般用于修改服务器上的资源:向指定资源提交数据,后端处理请求后往往会导致服务器 建立新的资源 或 修改已有资源;</li>
<li class="list-group-item">数据包含在请求主体中;</li>
<li class="list-group-item">没有数据量限制,可在服务器的配置里进行限制;</li>
<li class="list-group-item">只能是比 GET 安全,实际上也是不安全的:可通过开发者工具或者抓包看到,明文传输;</li>
<li class="list-group-item">POST 请求不会缓存;</li>
<li class="list-group-item">POST 相对稳定、可靠:可发送包含未知字符的内容。</li>
</ul>
容易产生的误区:HTTP 协议里并没有限制 GET 和 POST 的长度,GET 的最大长度限制是因为浏览器和
Web 服务器对 URL 的长度限制,不同的浏览器和 Web 服务器限制的最大长度不一样,它们所限制的是整个 URL 的长度
,而不仅仅是查询参数的数据长度。<br>
</div>
</div>
</body>
</html>