HTTP 的 GET 与 POST 方法，有以下几个明显的区别:
- 在浏览器回退的时候，GET 请求不会重新发送，而 POST 请求会重新发送。
- GET 请求会被浏览器主动缓存，而 POST 不会。
- GET 的请求参数直接暴露在 URL 中，相对不隐私、不安全。POST 请求的参数放在请求体中，相对隐私、安全。
- GET 的请求参数会被保存到浏览器的历史记录中，POST 不会。
- GET 请求参数有大小限制，一般 2KB 左右。POST 理论上没有传递参数没有大小限制，有些后端服务及会有一个大小限制，比如 Tomcat 的大小限制为 2M。
总结起来就是三点，大小、是否缓存与重发、安全性。
下面我用代码来验证 GET 与 POST 的这些区别。
首先用 nodejs 编写后端的请求处理代码。
const http = require('http')
const url = require('url')
const qs = require('querystring') //用于解析参数
const fs = require('fs')
let server = http.createServer((req, res) => {
let pathname = url.parse(req.url).pathname;
res.writeHead(200, {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
});
if (req.method === 'GET') {
fs.readFile(`${__dirname}/http.html`, function(error, file) {
if (error) {
console.log(error)
} else {
res.writeHead(200, {
"Content-Type": "text/html"
});
res.write(file, function(err) {
res.end();
});
}
})
} else if (req.method === 'POST') {
fs.readFile(`${__dirname}/http.html`, function(error, file) {
if (error) {
console.log(error)
} else {
res.writeHead(200, {
"Content-Type": "text/html"
});
res.write(file, function(err) {
res.end();
});
}
})
}
})
server.listen(8088, () => {
console.log('server start 8088')
})
然后再编写 HTML 文件，JavaScript 也写到 HTML 文件中。
<!DOCTYPE html>
<html>
<head>
<title>http</title>
<style type="text/css">
</style>
</head>
<body>
<button class="get">get</button>
<button class="post">post</button>
<form action="http://localhost:8088" method="get">
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
<input type="submit" value="Save">
</form>
<a href="./http2.html">http2.html</a>
<script type="text/javascript">
function ajax(url, method, data, callback) {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status <= 300 || xhr.status === 304) {
callback(xhr.responseText);
} else {
}
} else {
}
}
xhr.open(method, url, true);
if (method === 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
} else {
}
xhr.send(data || null);
}
function get() {
ajax('http://localhost:8088?name=666g&password=456', 'get', void 0, function(res) {
let data = JSON.parse(res);
console.log(data.name);
})
}
function post() {
ajax('http://localhost:8088', 'post', 'name=hahap&password=123', function(res) {
let data = JSON.parse(res);
console.log(data.name);
})
}
let getBtn = document.querySelector('.get');
let postBtn = document.querySelector('.post');
getBtn.addEventListener('click', function() {
get();
})
postBtn.addEventListener('click', function() {
post();
})
</script>
</body>
</html>
提交数据后如果返回本页面，点击浏览器的后退并提交或刷新页面，会导致 form 表单重复提交。
通过这两段代码的以下表现，可以验证 GET 与 POST 的区别：
-
在表单提交方法为 post 时：
- 提交后刷新页面， 会出现重新提交。
- 提交后访问另一个页面 http2.html，回退时重新提交。
- url 中没有参数。
- 两次以上 post 之后，回退会重新 post。
-
在表单提交方法为 get 时：
- 提交后刷新页面 ，会出现重新提交。
- 提交后访问另一个页面 http2.html，回退时重新提交。
- url 中有参数，且会保存到历史记录中。
- 两次以上 get 之后，回退不会重新 get。（也就是说回退到一个有过 POST 的页面时，那个 POST 会重新发送）。
PS: 通过 Ajax 实现的请求不会重新提交。
Piotr Łaskawski 2016-08-11 02-53-44.jpg
网友评论