Ajax技术

196 阅读3分钟

向服务器请求额外数据而无须刷新页面的技术

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