Ajax 入门之 GET 与 POST 的不同处详解
在之前的随笔中,本着怀旧的态度总结了一篇 兼容不同浏览器 建立xhr对象的方法:
在建立好xhr对象之后,客户端需要做的就是,将数据以某种方式传递到服务器,以获得相应的响应,在这里, ajax技术总结的第二季,我将重点阐述 提交数据的两种方式。
在这之前需要了解一下我们的http传输协议:
http 的工作方式是客户机与服务器之间的请求-应答协议。
举例：客户端（浏览器）向服务器提交 http 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。而想要基于http协议进行数据传输,必然要用到两种请求方式.
两种 http 请求方法：get 和 post
在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：get 和 post。
- get - 从指定的资源请求数据。
- post - 向指定的资源提交要被处理的数据
这是w3c上对grt与post的使用场景描述,从字面上来理解，就是： get是用来从服务器获取数据的，post是用来向服务器传送数据的
这一点，我们从提交路径与数据的url中就可以看出来：
可以用来指向url的属性有：
1. 表单中的 action；
2. a 标签中的 href
3. img script 中的 src 属性（此属性不受“ 同源策略 ”限制，可以利用来进行“跨域”，我想近期总结一片关于跨域的问题，在这里先挖个坑）
这里，我们讲一讲form表单提交中他们的不同
一 、ajax的表单提交中，get 使用 open（）函数来提交数据，其中，数据以 url? key & value 的形式拼接在url后面：
xhr.open('get','xxx.php?name=tom & age=18');
xhr.send(null);
在浏览器的url中是这样的:
get 提交 url
这里可以看出:get是把参数数据队列加到提交表单的action属性所指的url中，值和表单内各个字段一一对应，在url中可以看到。id的url长度是有限制的，当url过长时会自动截取超长字符。这样就容易引发一个问题：当传递的参数过多，导致url过长时，url自动截取超长字符，最终传递参数部分获取不到。这也限制了get传送的数据大小一般不能超过2kb;
而且,从url截图中可以看出: get安全性非常低，当通过get方法提交数据时，用户名和密码将出现在url上。如果：
- 登陆页面可以被浏览器缓存；
- 其他人可以访问客户的这台机器。
那么，别人即可以从浏览器的历史记录中，读取到此客户的账号和密码。所以，在某些情况下，get方法会带来严重的安全性问题。
并不是说get方法没有优点，在速度测试中，get提交的速度是post方式的数十倍。
二 、ajax的表单提交中，post 在 open（）函数中只需要提供url，由send（）函数提交数据:
//获取form数据
var formdom = document.queryselector('form');
var formdata = new formdata(formdom);
//发送数据
xhr.open('post',formdom.action);
xhr.send(formdata);
post是:通过httppost机制，将表单内各个字段与其内容放置在html header内一起传送到action属性所指的url地址。用户看不到这个过程。安全性较高
post传送的数据量较大，一般被默认为不受限制。可以用这段demo中formdata对象的方式传递图片,富文本等文件,这是get所做不到的。
总结一下，get是向服务器发索取数据的一种请求，而post是向服务器提交数据的一种请求，在form（表单）中，method默认为"get"，
实质上，get和post只是发送机制不同，并不是一个取一个发！
总之，这两种表单提交方式并没有优劣之分，只有不同的适应场景，这需要我们日常工作中去根据需求把握。
后面，我将总结一下，在浏览器与服务器之间的交互中，路径的几种不同书写方法。
以上所述是小编给大家介绍的ajax 入门之 get 与 post 的不同处详解，希望对大家有所帮助