转载:Ajax及 GET、POST 区别
收获:
xhr.setRequestHeader(), xhr.getResponseHeader() 可以设置和获取请求头/响应头信息;
new FormData(form) 可以更方便的组装POST请求数据
XHR2有 xhr.onload xhr.onprogress事件
GET 和 POST 除了发送请求数据的方式和请求数据量大小的区别外，还有速度的区别，REST语意上的不同
XMLHttpRequest对象
- open():接受三个参数，发送请求名，url和是否异步请求的布尔值。
- readystatechange 事件监听，DOM0级方法，因为并非所有浏览器都支持 DOM2级方法。
- abort()方法可以取消异步请求，终止请求之后，还应该对 xhr 进行解引用操作，由于内存原因，不建议重用 xhr 对象。
| xhr.readyState状态码 | 说明 |
|---|---|
| 0 | 尚未初始化，还没有调用 open 方法 |
| 1 | open()方法已调用，还未发送 send()方法 |
| 2 | send()方法已调用，尚未接受响应 |
| 3 | 已经开始接受部分响应，但没有完全接收 |
| 4 | 响应已经接受完成 |
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
console.log(xhr.responseText)
}
}
}
xhr.open('GET', url, true)
xhr.send(null)
HTTP 头部信息
- 使用 setRequestHeader()可以设置自定义的请求头部信息。接收两个参数，头部字段的名称和头部字段值。必须在 open 方法后，send 方法前进行设置。
xhr.open('get', url, true)
xhr.setRequestHeader('myHeader', 'myValue') //open 和 send 中间设置
xhr.send(null)
- 调用 getResponseHeader()方法可以取得头部信息，接受一个包含头部字段名。
- 调用 getAllResponseHeaders()可以取得所有头部信息。是一个格式化过的长字符串。
var header = xhr.getResponseHeader('myHeader') //'myValue'
var allHeaders = xhr.getAllResponseHeaders() //返回一个长字符串
GET 请求
- 使用 get 请求通常会发生一个错误，就是查询字符串的格式有问题，一定要使用 encodeURIConponent()进行转码后在放到 url 末尾。
- 键值对以&分隔，url 跟？再接参数字符串。
function addUrl(url, key, value) { //添加参数的方法，向现有 url 末尾添加参数
url += url.indexOf('?') == -1 ? '?' : '&'
url += encodeURIComponent(name) + '=' + encodeURLIIComponent(value)
return url
}
url = addUrl(url, 'username', 'www')
xhr.open('get', url, true)
POST请求
- 默认情况下，服务器对 POST 请求不会和表单请求一视同仁，所以我们用 xhr 模仿表单提交，首先将头部 Content-type 信息设置为 application/x-www-form-urlencoded，也就是表单提交时的内容类型，然后以适当格式创建一个字符串。
function submitData() {
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){...}
xhr.open('post', url, true)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') //设置头部信息
var form = document.getElementById('user-info')
xhr.send(serialize(form)) //序列化表单数据的一个自定义方法
}
XMLHTTPRequest2级
FormData
- FormData 类型，为序列化表单以及创建与表单格式相同的数据提供便利。
- FormData类型有 append 方法，接受键值对这两个参数。
var data = new FormData()
data.append('name', 'Nicholas') // FormData.append()方法
var data = new FormData(document.form[0]) //也可以直接传入一个表单元素
- 创建 FormData 实例后，可以传给 send 方法
xhr.open('post', url, true)
var form = document.getElementById('user-info')
xhr.send(new FormData(form))
进度事件
load 事件
- 兼容性 IE8+。
- 只要浏览器接受响应，不管状态如何，都会触发 load 事件。所以还是得判断 status 状态码确定数据是否真的可用。
var xhr = new XMLHttpRequest()
xhr.onload = function() { //实际只是少了 readyState判断，相比之下
if(xhr.status === 200 || xhr.status === 304) {
console.log(xhr.responseText)
}
}
xhr.open('get', url, true)
xhr.send(null)
progress 事件
- xhr.onprogress()事件会接收一个 event 对象，target 属性指向 xhr 对象，有三个额外的属性。
| 属性值 | 说明 |
|---|---|
| event.lengthComputable | 进度信息是否可用的布尔值 |
| event.position | 表示已经接收的字节数 |
| event.totalSize | 表示根据 Content-Length 响应头部确定的预期字节数 |
var xhr = new XMLHttpRequest()
xhr.onprogress = function(e) { //进度事件
if(e.lengthComputable) {
var divProgress = document.getElementbyId('div')
divProgress.innerHTML = e.position + '/' + e.totalSize
}
}
xhr.onload = function() {...}
//记得 progress 事件要在 open 之前调用，和 onload 一样
xhr.open(...)
xhr.send(null)
GET和 POST 区别
请求方式
- GET 是从服务器上获取数据，POST 则是向指定资源提交要被处理的数据。
格式
- GET请求数据按照查询字符串（名称/值对）方式，放置在HTTP请求协议头（headers）中，也就是URL之后；
而POST提交的数据则放在实体的主体（request-body）中.
缓存 书签 历史纪录 默认 method
- GET会被缓存，POST不能。
- 书签： GET可收藏为书签，POST不可收藏为书签
- 历史记录： GET请求的URL，参数会被浏览器保留在历史中,POST参数不会。
- 默认请求： 在from提交的时候，如果不指定Method，则默认为get请求。
响应速度
- GET请求是可以被客户端缓存的。会比POST高效。
- AJAX环境中GET响应快速，POST需要先发送HTTP头部(headers) 服务器接收成功返回100状态码，再发送报文实体的主体(request-body)中的数据。
大小限制
- GET参数是带在URL后面，传统IE中URL的最大可用长度为2048字符，其他浏览器对URL长度限制实现上有所不同。POST请求无长度限制（目前理论上是这样的）。
- GET提交的数据大小，不同浏览器的限制不同，一般在2k-8K之间，POST提交数据比较大，大小靠服务器的设定值限制，而且某些数据只能用 POST 方法「携带」，比如 file。
实际中 — POST比GET「相对安全」
- GET所发送的数据是 URL 的一部分，有时候会直接反应在浏览器的地址栏，现在的浏览器大多会记住曾经输入过的URL（在发送密码或敏感信息时绝不要使用 GET ！）。
- 试想如果你曾经在别人电脑上填过一个很私密的表单，那么你的这份记录很可能被连没什么电脑常识的人都一览无遗。
- 但是被抓包之后的POST请求和GET请求是一样裸露的，所以这里是相对的。
语义上 — GET比POST「相对安全」
根据HTTP规范，POST表示可能修改变服务器上的资源的请求。
在语义上（restful视角）:
GET的是获取指定URL上的资源，是读操作。
重要的一点是不论对某个资源GET多少次，它的状态是不会改变的，
在这个意义上，我们说GET是安全的（不是被密码学或者数据保护意义上的安全）。
因为GET是安全的，所以GET返回的内容可以被浏览器，Cache服务器缓存起来。POST的语义是修改变服务器上的资源的请求，所以是不安全的，
每次提交的POST，代码都会认为这个操作会修改资源的状态，
于是，浏览器在你按下F5的时候会跳出确认框，缓存服务器不会缓存POST请求返回内容。安全的是指没有明显的对用户有影响的副作用(包括修改该资源的状态)。HTTP方法里的GET和HEAD都是安全的。
幂等的是指一个方法不论多少次操作，结果都是一样。PUT(把内容放到指定URL)，DELETE(删除某个URL代表的资源)，虽然都修改了资源内容，但多次操作，结果是相同的，因此和HEAD，GET一样都是幂等的。
所以根据HTTP协议，GET是安全的，也是幂等的，而POST既不是安全的，也不是幂等的。