浏览器在XMLHttpRequest类上定义了它们的HTTP API
常用的三个方法
GET,POST不用说
HEAD:请求资源的首部信息,通常用来判断资源的大小以决定是否要下载,以此节约资源。请求方式类似GET,无需发送请求体,且无响应主体
发送请求
GET,HEAD:
function get(url,callback,params){ var request=new XMLHttpRequest(); request.open("GET"/*HEAD*/,url/*+?params+*/); request.send(null); }
POST:
function post(url,callback,params){ var request=new XMLHttpRequest(); request.open("POST",url); request.setRequestHeader("Content-type","text/plain;charset=UTF-8"); request.send(params); }
请求主体
表单编码请求:借助encodeURIComponent对参数进行编码。注:POST请求头设置为application/x-www-form-urlencoded
JSON编码请求:POST请求头设置为application/json。借助JSON.stringify()将数据转换为JSON格式
文件上传:借助HTML元素上<input type="file">上的files属性
multipart/form-data请求:借助FormData对象,设置为键值对形式。注:传入FormData对象时,send()会自动设置Content-type
获得响应
function post(url,callback,params){ var request=new XMLHttpRequest(); request.open("POST",url); request.onreadystatechange=function(){ //判断响应状态码 if(request.readyState===request.DONE&&request.status===200){ //获取响应头中的响应内容类型 var type=request.getResponseHeader("Content-type"); //如果是文本类型 if(type.match(/^text/)){ //将响应主体传送给回调函数,注:HEAD无响应主体 callback(request.responseText/*响应主体为文本*/); //callback(request.responseXML/*响应主体为XML*/); } } } request.setRequestHeader("Content-type","text/plain;charset=UTF-8"); request.send(params); }
响应内容三部分组成:状态码,响应头,响应主体。
默认异步响应,同步响应只需在open()方法中设置第三个参数false。
readyState和readystatechange
只要readyState发生变化,readystatechange事件就会被调用
请求取消方法abort()可能会触发readystatechange事件
响应信息
responseText:返回一个DOMString,在请求完成之前将会得到部分属性
responseType:返回值的类型,可以设置返回的类型,例如:blob,document,text
responseURL:若有重定向,则返回重定向后的url,若没有,则返回url,任意跟在url后面的fragment都会被删除
responseXML:返回HTML或XML的DOM文档
HTTP进度事件
XMLHttpRequest对象在请求不同的阶段触发不同事件
XMLHttpRequest对象也定义了upload属性,upload是一个对象,定义了addEventListener()方法和整个progress事件集合。用于监控文件上传进度事件
请求成功:send()时触发loadstart()事件,加载服务器响应时,触发progress事件,事件完成,触发load事件
请求失败:
HTTP无法完成请求的3种情况:
请求超时 触发timeout事件
请求中止 触发abort事件
网络错误 触发error事件
上述任意事件发生后触发一个loadend事件
事件对象:除了JavaScript事件对象常见的type和timestamp属性。还有loaded(传输的字节数值),total(“Content-Length”头传输的数据的整体长度),lengthComputable(知道内容长度为true,否则为false)
有用的响应状态码
304:无需再次请求传输内容,即能够使用缓存的内容
跨域的HTTP请求
跨域资源共享CORS
简单请求:
请求报文的Origin字段,响应报文的Access-Control-Allow-Origin
Access-Control-Allow-Origin:* 表示可以接受任意外域的访问
Access-Control-Allow-Origin:<Origin>表示只接受来自Origin中域的访问
预检请求:略
附带身份凭证的请求:
设置XMLHTTPRequest对象的withCredentials为true,从而向服务器发送cookie。该属性也可以用来测试浏览器是否值支持CORS
类似于简单请求,响应报文中多了Access-Control-Allow-Credentials字段,如果缺失该行信息,响应内容不会发送给请求发起者
H5中,一些元素例如<img>和<video>均有跨域属性crossOrigin,该属性有两个值:anonymous和use-credentials,即不设置凭据和设置凭据。
以上更详细的解释请查阅:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#Preflighted_requests
JSONP
借助<script>的src属性。优点:1不受同源策略的影响 2包含JSON编码的数据会自动解码.
使用<script>元素调用数据时,响应内容必须用JavaScript函数名和圆括号包裹起来。注:此函数名允许客户端指定,并附在查询参数后
[1,2,{"buckle":" my shoe"}] =>handleResponse([1,2,{"buckle":" my shoe"}] )
在请求时,通过url后面附加一个"?json"来通知服务器应该返回一个JSONP响应
跨域消息传递postMessage()方法
指定源匹配后,调用postMessage方法时,会在目标窗口上触发message事件
事件对象:
data消息副本,source消息源自的window对象,origin URL形式的消息来源