向服务器请求额外数据而无须刷新页面的技术
Ajax技术的核心是 XMLHttpRequest 对象(简称XHR)。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。使用XHR对象取得新数据,然后再通过DOM将数据插入到页面中。
Ajax通信与数据格式无关
XMLHttpRequest对象
//创建XHR对象
var xhr = new XMLHttpRequest();
//启动一个针对 example.php的 GET 请求,并不会真正发送
//只能向同一个域中使用相同端口和协议的URL发送请求。
xhr.open("get","example.php",false)
//发送请求
xhr.send(null);
在收到响应之后,响应的数据会自动填充XHR对象的属性。相关属性如下:
responseText
无论返回数据的类型是什么,响应主体的内容都会保存到该属性中。
responseXML
如果响应的内容类型是“text/xml”或“application/xml”,这个属性中保存包含响应数据的XML DOM文档。
status
响应的HTTP状态
statusText
HTTP状态的说明
if(( xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304 ){
} else {
}
readyState
可以使用readyState属性,检测当前请求/响应过程的活动阶段。
- 0:未初始化。尚未调用 open 方法。
- 1:启动。已经调用 open() 方法,但尚未调用 send() 方法。
- 2:发送。已经调用 send() 方法,但尚未接收到响应。
- 3:接收。已经接收到部分响应数据
- 4:完成。已经接收到全部响应数据。
只要readyState属性的值由一个值变成另一个值,都会触发一次 readystatechange事件。
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 ){
if(( xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304 ){
} else {
}
}
}
HTTP头部信息
每个HTTP请求和响应都会带有响应的头部信息。XHR对象提供了操作请求头部和响应头部信息的方法。
Accept
浏览器能够处理的内容类型
Accept-Charset
浏览器能够显示的字符集
Accept-Encoding
浏览器能够处理的压缩编码
Accept-Language
浏览器当前设置的语言
Connection
浏览器与服务器之间连接的类型
Cookie
当前页面设置的任何cookie
Host
发出请求的页面所在域
Pragma
Referer
发出请求的页面URL
User-Agent
浏览器的用户代理字符串
GET 请求
GET是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到URL的末尾,以便将信息发送给服务器。
POST请求
POST通常用于向服务器发送应该保存的数据。POST请求应该把数据作为请求的主体提交
跨域资源请求
默认情况下,XHR对象只能访问与包含它的页面位于同一个域中的资源,这种安全策略可以预防某些恶意行为。但是,实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。
CORS(CrossOriginResourceSharing,跨源资源共享)是W3C的一个工作草案,定义了在必须访问跨源资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
比如一个简单的使用GET或POST发送的请求,它没有自定义的头部,而主体内容是text/plain。在发送该请求时,需要给它附加一个额外的Origin头部,其中包含请求页面的源信息(协议、域名和端口),以便服务器根据这个头部信息来决定是否给予响应。
Origin:http://www.nczonline.net
如果服务器认为这个请求可以接受,就AccessControlAllowOrigin头部中回发相同的源信息(如果是公共资源,可以回发"*")。
AccessControlAllowOrigin:http://www.nczonline.net