转载: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 高级程序设计

posted @ 2016-08-21 22:53  stephenykk  阅读(574)  评论(0编辑  收藏  举报