转载:Ajax及 GET、POST 区别

转载: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

1. GET会被缓存，POST不能。
2. 书签： GET可收藏为书签，POST不可收藏为书签
3. 历史记录： GET请求的URL，参数会被浏览器保留在历史中,POST参数不会。
4. 默认请求： 在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既不是安全的，也不是幂等的。

参考文献

从HTTP GET和POST的区别说起

关于 HTTP GET/POST 请求参数长度最大值的一个理解误区

GET，POST — 简述

JS 高级程序设计