用前后台代码验证 GET 与 POST 的区别
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
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 用前后台代码验证 GET 与 POST 的区别
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 用前后台代码验证 GET 与 POST 的区别
