Ajax(Asynchronous JavaScript+XML)能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验。Ajax技术的核心是XMLHttpRequest对象(简称XHR)。
21.1XMLHttpRequest对象
IE中可能会遇到三种不同版本的XHR对象,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MXSML2.XMLHttp.6.0
XHR的用法
要调用的第一个方法是open(),接收3个参数:要发送的请求的类型(“get”、“post”等)、请求的URL和表示是否异步发送请求的布尔值。send()方法接收一个参数,即要作为请求主体发送的数据。建议通过检测states来决定下一步的操作,不要依赖statusText。只要readyState属性的值由一个值变为另一个值,都会触发一次readystatechange事件。在接收到相应之前还可以调用absort()方法来取消异步请求。
HTTP头部信息
使用setRequestHeader()方法可以设置自定义的请求头部信息。要成功发送请求头部信息,必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()。
GET请求
GET是最常见的请求类型,最常用于向服务器查询某些信息。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码,然后才能放到URL的末尾。
POST请求
POST请求通常用于向服务器发送应该被保存的数据。
21.2XMLHttpRequest2级
FormData:FormData为序列化表单以及创建于表单格式相同的数据(用于通过XHR传输)提供了便利
超时设定:timeout属性表示请求在等待相应多少毫秒之后就终止,如果在规定时间内浏览器没有接受到响应,就会触发timeout时间,进而调用ontimeout事件处理程序。
overrideMimeType()方法:用于重写XHR相应的MIME类型。
21.3进度事件
有6个进度事件:loadstart、progress、error、abort、load和loaded
21.4跨源资源共享
CORS(Cross-Orign Resource Sharing)的基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或相应是应该成功还是失败。
IE对CORS的实现
引入了XDR类型,能实现安全可靠的跨域通信。XDR的使用方法:创建一个XDomainRequest的实例,调用open()方法(接收两个参数:请求的类型和URL),在调用send()方法。
其他浏览器对CORS的实现
通过XMLHttpRequest对象实现对CORS的原生支持。
Preflighted Reqeusts
叫做Preflighted Reqeusts的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法,以及不同类型的主体内容。
带凭证的请求:通过将withCredentials属性设置为true,可以指定某个请求应该发送凭据。
跨浏览器的CORS