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

转载:Ajax及 GET、POST 区别的更多相关文章

  1. json和jsonp的区别,ajax和jsonp的区别

    json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...

  2. 转载>>C# Invoke和BeginInvoke区别和使用场景

    转载>>C# Invoke和BeginInvoke区别和使用场景 一.为什么Control类提供了Invoke和BeginInvoke机制? 关于这个问题的最主要的原因已经是dotnet程 ...

  3. WebSocket和long poll、ajax轮询的区别,ws协议测试

    WebSocket和long poll.ajax轮询的区别,ws协议测试 WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连 ...

  4. 小渣渣的json和jsonp和ajax的实质和区别

    json和jsonp和ajax的实质和区别ajax的两个问题 1.ajax以何种格式来交换数据 2.跨域的需求如何解决 数据跨域用自定义字符串或者用XML来描述 跨域可以用服务器代理来解决jsonp来 ...

  5. Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别

    为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...

  6. ajax同步与异步的区别

    jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里 ...

  7. 小白需要了解的Ajax和websocket的区别以及使用场景!

    在我们日常使用的互联网产品中,很多都是前后端数据的交互来完成的,说到数据交互就不得不提Ajax和websocket,它们可是数据交互的利器,那么它们分别是什么?websocket与Ajax轮询的区别又 ...

  8. [转] form.getForm().submit的用法及Ext.Ajax.request的小小区别

    原文地址:http://blog.csdn.net/hongleidy5000/article/details/7329325 if (!formDetail.getForm().isValid()) ...

  9. 【转载】strlen与sizeof区别

    自己小结: sizeof使用时,若是数组变量,则是数组变量占的大小 char a[10]; sizeof(a)=10 若是指针,则为指针大小,数组变量作为函数参数传递时,会退化成指针,且函数内是不知道 ...

随机推荐

  1. JAVA反射系列之Field,java.lang.reflect.Field使用获取方法

    JAVA反射系列之Field,java.lang.reflect.Field使用获取方法.   转载https://my.oschina.net/u/1407116/blog/209383 摘要 ja ...

  2. Spring-----Spring Jar包

    转载自:http://blog.csdn.net/hekewangzi/article/details/51713110

  3. Yaf-Plus 我们只谈框架这件事

    预热下,也算对自己的督促. Comming soon!

  4. 联系InfoSphere Streams和OpenMI时对水利模型联系的设计模式的一些考虑

    从<时序计算通用模型接口 OpenMI开发技术及应用>一书中的第一章的对接口要求描述,我想到InfoSphere streams的流数据处理模式刚好可以满足这种模型/数据之间对接的需求. ...

  5. [原创]反汇编之一:和Taskmgr过不去篇(无厘头版)

    原文链接:和Taskmgr过不去篇(无厘头版) Hook入门级文章,主要想培养一下偶写文章的感觉,老鸟无视…我想看看技术文章能不能无厘头的写,如果效果不错的话,准备更上一层-----用我的原创漫画表达 ...

  6. Krita编译和旧版本下载

    Linux For Krita 2.9, David Revoy's guide Building Krita for Cats is the best available! Build Krita ...

  7. poj1547---结构数组

    题意:老师发给每个学生的橡皮泥相同,找出谁抢了谁的橡皮泥 思路:结构数组存储每个学生的橡皮总量,和名字 /* 结构数组存储用户信息--只放名称和体积 while输入循环复用长宽高变量 for循环求所有 ...

  8. oracle任务计划debug

    crontab -eno crontab for root - using an empty onecrontab: installing new crontab"/tmp/crontab. ...

  9. ruby简单的基础 5

    方法和代码块 在Ruby中.{}或do...end之间的代码是一个代码块.代码块只能出如今一个方法的后边,它紧接在方法最后一个參数的同一行上,一般由yieldkeyword调用代码块中的代码. 方法是 ...

  10. HDU 5062 Beautiful Palindrome Number(数学)

    主题链接:http://acm.hdu.edu.cn/showproblem.php? pid=5062 Problem Description A positive integer x can re ...