向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验。
核心对象:XMLHttpRequest对象(XHR)
XMLHttpRequest对象
var xhr = new XMLHttpRequest()
open方法
参数:要发送的请求的类型(get,post)、请求的URL、表示是否异步发送的布尔值。
open方法并不会真正发送请求,而只是启动一个请求以备发送
发送请求:send()
参数:作为请求主体发送的数据
同步请求:表示等服务器响应之后再继续执行。
在收到请求之后,响应的数据会自动天长XHR对象的属性,相关属性:
responseText:作为响应主体被返回的文本
responseXML:如果响应的内容是"text/xml"或"application/xml",这个属性将保存着数据XML DOM文档
status:响应的HTTP状态
status:HTTP状态的说明。
readyState属性:表示请求/响应过程的当前活动阶段。
0:为初始化
1:启动
2:发送
3:接受
4:完成
每一次状态的改变,都会触发一次readystatechange事件,不过必须在open()之前指定事件处理程序才能确保跨浏览器的兼容性。
必须通过XHR对象本身来确定下一步该怎么做。
在接受相应之前,可以用abort()方法来取消异步的请求。
HTTP头部信息
在发送XHR请求的同时,还有发送:
Accept
Accept-Charset
Accept-Encoding
Accept-Language:
Connectio
Cookie
Host
Referer
User-Agent
GET请求
想服务器查询某些信息
查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码,才能放到URL的末尾。所有的名-值对都必须由和号&分割。
POST请求
向服务器发送应该被保存的数据。POST请求,把数据作为请求的主体提交,POST请求的主体可以包含非常多的数据,而且格式不限。
XMLHttpRequest2级
FormData
超时设定timeout 会触发ontimeout事件
overrideMimeType()方法 用于重写XHR相应的MIME类型
进度事件
loadStart:在接收到相应数据的第一个字节时触发
progress:在接受相应期间持续不断地触发
error:在请求发生错误时触发
abort:在因为调用了abort()方法而终止连接时触发
load:在接受完整的响应数据时触发
loadend:在通信完成或者触发error、abort和load事件后触发。
跨域资源共享
XHR对象只能访问与包含它的页面位于同一个于中的资源。
CORS(Cross-Origin Resource Sharing)
使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是否应该成功,还是失败。
IE对CORS的实现
XDR(XdDomainRequest)类型
所有XDR的请求都是异步执行的,不能用它来创建同步请求。
CSRF(corss-site request forgery) 跨站点请求伪造
XSS(Corss-site scripting)跨站点脚本
其它浏览器对CORS的实现
原生的XMLHttpRequest对象支持跨域,要在open中传入绝对URL
Prefighted Requests
透明服务器验证技术
Preflight请求。
带凭据的请求
默认情况下,跨域请求不提供凭据(cookie,HTTP认证,客户端SSL证明)
通过将withCredentials属性设置为true,可以指定某个请求应该发送凭据。,服务器接受带凭据的请求,会用Access-Control-Allow-Credentials:true的HTTP头部来响应。
其它跨域技术
图形ping
JSONP
Comet
一种服务器向叶面推送数据的技术。
Comet是能够让信息近乎实时地被推送到页面上,非常适合处理体育比赛的分数和股票报价。
- 长轮询
短轮询:浏览器定时向服务器发送请求,看有没有更新的数据。
长轮询:页面发起一个到服务器的请求,然后服务器一直保持连接打开,直到有数据可发送。 - HTTP流
它在整个生命周期内只使用一个HTTP连接。
服务器发送事件
SSE(Server-Sent Events,服务器发送事件)
web sockets
在一个单独的持久的连接上提供全双工、双向通信。