Ajax概述及XMLHttpRequest实现

时间:2022-08-27 13:54:18

一、Ajax概述

1、什么是Ajax

Ajax的全称:Asynchronous JavaScript And XML,可以说是已有技术的集合。主要用来实现客户端与服务器的异步通信效果,实现页面的局部刷新,也即,允许浏览器与服务器通信而无需刷新当前页面。在Ajax模型中,数据在客户端与服务器之间独立传输,服务器不再返回整个页面。

所谓异步,简单的解释是:向服务器发送请求时,不必等待结果,可以同时做其他事情,等有了结果自己会进行后续操作,与此同时,页面不会发生整页刷新,提高了用户体验。

普通B/S模式(同步) vs Ajax技术(异步):

同步:提交请求->等待服务器处理->处理完毕返回(期间客户端浏览器不能干任何事

异步:请求通过事件触发->服务器处理(此时浏览器仍然可以作其他事情)->处理完毕


2、不用刷新整个页面便可与服务器通信的方法

(1)Flash

(2)Java applet

(3)框架:若使用了一组框架构造了一个网页,可以只更新其中一个框架,而不必惊动整个页面。

(4)隐藏的ifame

(5)XMLHttpRequest:该对象是对JavaScript的一个扩展,可以使网页与服务器进行通信,是创建Ajax应用的最佳选择。实际上通常把Ajax当成是XMLHttpRequest的代名词。

 

3、Ajax应用实例

Google Suggest & Google Maps

 

4、Ajax的工作原理

客户端<-------------------------->传输<----------------------------->服务器端

html, xhtml, css, javascript 协议:xmlhttp php, jsp,asp,Ruby等输出结果。

载体:txt,html,xml,json等。      

 

5、Ajax工具包

(1)服务器端语言:服务器需要向具备向浏览器发送特定信息的能力,Ajax与服务器端语言无关。

(2)2XML:描述数据的格式,Ajax程序需要某种格式化的格式在服务器和客户端之间传递信息,XML是一种选择。

(3)XHTML:标准化呈现。

(4)DOM:实现动态显示和交互。

(5)使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取。

(6)使用JavaScript绑定和处理所有数据。

 

6、Ajax的缺陷

(1)由JavaScript和Ajax引擎导致的浏览器的兼容,但jQuery、ext等js框架可以很好地解浏览器兼容性问题。

(2)破坏浏览器后退按钮的正常行为,在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记下历史记录中的静态页面。

(3)对流媒体的支持没有FLASH和Java Applet好。

(4)一些手持性设备(如手机、PDA等)支持性差,但在B-S架构中可以放心使用)。

(5)Ajax的无刷新重载使得页面的变化没有刷新重载那么明显,所以容易给用户带来困扰——用户不太清楚现在的数据是旧的还是已经更新过的。现有的解决方案有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等。

 

二、Ajax使用XMLHttpRequest实现

1、XMLHttpRequest的概述

XMLHttpRequest对象:由于非标准所以实现方法不统一,IE把XMLHttpRequest实现为一个ActiveX对象;其他浏览器把XMLHttpRequest实现为一个本地的JavaScript对象):

虽然创建的方式不一样,但是属性和方法是一样的。也就是说,XMLHttpRequest在不同浏览器上的实现是兼容的,所以可以用同样的方法访问XMLHttpRequest实例的属性和方法,而不论这个实例创建的是什么。

 

2、XMLHttpRequest的方法

(1)abort():停止当前请求。

(2)getAllResponseHeader():把HTTP请求的所有响应首部作为键/值对返回。

(3)getResponseHeader():返回指定首部的串值。

(4)open("method","url"):method参数可以是GET,POST或PUT,url参数可以是相对URL或绝对URL。

(5)send(content):向服务器发送请求。

(6)setRequestHeader("header","value"):在POST请求中,把指定首部设置为所提供的值,在设置任何首部之前必须先调用open()。

 

3、XMLHttpRequest的属性

(1)onreadystatechange:每个状态改变是都会触发这个事件处理器,通常会调用一个JavaScript函数。

(2)readyState:请求的状态,5个取值——0=未初始化,1=正在加载,2=已经加载,3=交互中,4=完成。

(3)responseText:服务器的响应,表示为一个串。

(4)responseXML:服务器的响应,表示为XML,这个对象可以解析为DOM对象。

(5)status:服务器的HTTP状态码(200对应OK,404对应NotFound等)。

(6)statusText:HTTP状态码的相应文本(OK或NotFound等)。

 

4、创建Ajax的步骤

(1)获取节点,并为其添加onclick属性。

(2)取消节点的默认行为。

(3)创建一个异步调用对象XMLHttpRequest。

(4)设置准备发送请求的url和method。

(5)调用XMLHttpRequest对象的open()方法,创建一个新的HTTP请求。

(6)调用XMLHttpRequest对象的send()方法,发送HTTP请求。

(7)为XMLHttpRequest对象添加请求状态变化的函数onreadystatechange。

(8)判断响应是否完成:XMLHttpRequest对象的readyState属性值为4。

(9)判断响应是否可用:XMLHttpRequest对象的status属性值为200或304。

(10)获取异步调用返回的数据:XMLHttpRequest对象的responseText属性。

(11)使用JavaScript和DOM实现局部刷新。


5、3个关键部分

(1)onreadystatechange

由服务器触发,而不是用户。

在Ajax执行过程中,服务器会通知客户端当前的通信状态,这依靠更新XMLHttpRequest对象的readyState属性来实现。改变readyState属性时服务器对客户端连接操作的一种方式,每次readyState属性的改变都会触发readystatechange事件。

(2)open(method,url,asynch)

允许程序员用一个Ajax调用向服务器发送请求。

method:若只想从服务器检索一个文件而不需要发送任何数据,使用GET,当然可以在GET请求里通过附加在URL上的查询字符串来发送数据,不过数据大小限制为2000个字符;若需要发送数据,使用POST。

在某些情况下,有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL,若对每个请求的响应不同,会带来不好的结果,因此尝常常将时间戳追加到URL的最后,这样能确保URL的唯一性,从而避免浏览器缓存结果。

url:路径字符串,指向所请求的服务器的文件。

asynch:表示请求是否要异步传输,默认值为true,指定true表示在读取后面的基本之前,不需要等待服务器的响应,指定false表示当脚本处理过程经过该点时会停下来一直等到Ajax请求执行完毕再继续执行。

(3)send(data)

open()定义Ajax请求的一些细节,send()为已经待命的请求发送指令。

data:将要传递给服务器的字符串,对于GET请求传递null即可,若向send()方法提供参数则要确保open()中指定的方法是POST。

 

6、接收响应

(1)readyState

readyState属性表示Ajax请求的当前状态,它的值用数字代表(0表示未初始化,还没有调用open方法;1表示正在加载,open方法已被调用,但send方法还没调用;2表示已加载完毕,send已被调用,请求已经开始;3表示交互中,服务器正在发送响应;4表示完成,响应发送完毕)。

每次readyState的值的改变,都会触发onreadystatechange事件,若把onreadystatechange事件处理函数赋给一个函数,那么每次readyState值的改变都会引发该函数的执行。

readyState的值的改变会因浏览器不同而有所差异,但是当请求结束时,每个浏览器都会把readyState的值统一设为4。

(2)status

服务器发送的每一个响应都带有首部信息,三位数的状态码是最重要的首部信息,并且属于超文本传输协议的一部分(404表示没找到页面,403表示禁止访问;200表示一切正常;500表示内部服务器出错;304表示未被修改)。

在XMLHttpRequest对象中,服务器发送的状态码都保存在status属性里,通过把这个值和200或304比较可以确保服务器是否已经发送了一个成功的响应。

(3)resposeText

包含了从服务器返回的数据,它是一个HTML、XML或普通文本,这取决于服务器发送的内容。

当readyState属性变为4的时候,resposeText属性才可用,表明Ajax请求已经结束。

(4)responseXML

若服务器返回的是XML,那么数据将存储在responseXML属性中。

只在服务器发送了带有正确首部信息的数据时,responseXML属性才是可用的,MIME类型必须为text/xml。

 

7、发送请求

setRequestHeader(header,value);

当浏览器向服务器请求页面时,它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata),首部信息用来声明一个请求是GET还是POST。

header:首部的名字。

value:首部的值。

若用POST请求向服务器发送数据,需要将"Content-Type"的首部设置为"application/x-www-form-urlencoded",它会告知服务器正在发送数据,并且数据已经符合URL编码了。

这个方法必须在open()之后才能调用。