使用XMLHttpRequest对象
使用XMLHttpRequest对象
我 |
们已经讨论了动态Web应用的发展历史,并简要介绍了Ajax,下面再来讨论问题的关键:如何使用XMLHttpRequest对象。尽管与其说Ajax是一种技术,不如说是一种技巧,但如果没有对XMLHttpRequest的广泛支持,Google Suggest和Ta-da List可能不会像我们看到的有今天这样的发展,而你可能也不会看到手上的这本书!
XMLHttpRequest最早是在IE 5中以ActiveX组件形式实现的。由于只能在IE中使用,所以大多数开发人员都没有用XMLHttpRequest,直到最近,Mozilla 1.0和Safari 1.2把它采用为事实上的标准,情况才有改观。需要重点说明的是,XMLHttpRequest并不是一个W
前面已经说过,如果大量用户还是在使用较旧的浏览器访问网站或应用,就要三思了。第1章讨论过,在这种情况下,如果要使用Ajax技术,要么需要开发一个候选网站,要么你的应用应当能妥善地降级。大多数使用统计表明,在当前使用的浏览器中只有极少数不支持XMLHttpRequest,所以一般情况下不会存在这个问题。不过,还是应该查看Web日志,确定你的用户在使用什么样的客户端来访问网站。
2.1 XMLHttpRequest对象概述
在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W
很多人可能还记得从前的那段日子,那时不同浏览器上的JavaScript和DOM实现简直千差万别,听了上面这段话之后,这些人可能又会不寒而栗。幸运的是,在这里为了明确该如何创建XMLHttpRequest对象的实例,并不需要那么详细地编写代码来区别浏览器类型。你要做的只是检查浏览器是否提供对ActiveX对象的支持。如果浏览器支持ActiveX对象,就可以使用ActiveX来创建XMLHttpRequest对象。否则,就要使用本地JavaScript对象技术来创建。代码清单2-1展示了编写跨浏览器的JavaScript代码来创建XMLHttpRequest对象实例是多么简单。
代码清单2-1 创建XMLHttpRequest对象的一个实例
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
可以看到,创建XMLHttpRequest对象相当容易。首先,要创建一个全局作用域变量xmlHttp来保存这个对象的引用。createXMLHttpRequest方法完成创建XMLHttpRequest实例的具体工作。这个方法中只有简单的分支逻辑(选择逻辑)来确定如何创建对象。对window.ActiveXObject的调用会返回一个对象,也可能返回null,if语句会把调用返回的结果看作是true或false(如果返回对象则为true,返回null则为false),以此指示浏览器是否支持ActiveX控件,相应地得知浏览器是不是Internet Explorer。如果确实是,则通过实例化ActiveXObject的一个新实例来创建XMLHttpRequest对象,并传入一个串指示要创建何种类型的ActiveX对象。在这个例子中,为构造函数提供的字符串是Microsoft.XMLHTTP,这说明你想创建XMLHttpRequest的一个实例。
如果window.ActiveXObject调用失败(返回null),JavaScript就会转到else语句分支,确定浏览器是否把XMLHttpRequest实现为一个本地JavaScript对象。如果存在window.
XMLHttpRequest,就会创建XMLHttpRequest的一个实例。
由于JavaScript具有动态类型特性,而且XMLHttpRequest在不同浏览器上的实现是兼容的,所以可以用同样的方式访问XMLHttpRequest实例的属性和方法,而不论这个实例创建的方法是什么。这就大大简化了开发过程,而且在JavaScript中也不必编写特定于浏览器的逻辑。
2.2 方法和属性
表2-1显示了XMLHttpRequest对象的一些典型方法。不要担心,稍后就会详细介绍这些方法。
表2-1 标准XMLHttpRequest操作
方 法 |
描 述 |
abort() |
停止当前请求 |
getAllResponseHeaders() |
把HTTP请求的所有响应首部作为键/值对返回 |
getResponseHeader("header") |
返回指定首部的串值 |
open("method", "url") |
建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数 |
send(content) |
向服务器发送请求 |
setRequestHeader("header", "value") |
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open() |
下面来更详细地讨论这些方法。
void open(string method, string url, boolean asynch, string username, string password):这个方法会建立对服务器的调用。这是初始化一个请求的纯脚本方法。它有两个必要的参数,还有3个可选参数。要提供调用的特定方法(GET、POST或PUT),还要提供所调用资源的URL。另外还可以传递一个Boolean值,指示这个调用是异步的还是同步的。默认值为true,表示请求本质上是异步的。如果这个参数为false,处理就会等待,直到从服务器返回响应为止。由于异步调用是使用Ajax的主要优势之一,所以倘若将这个参数设置为false,从某种程度上讲与使用XMLHttpRequest对象的初衷不太相符。不过,前面已经说过,在某些情况下这个参数设置为false也是有用的,比如在持久存储页面之前可以先验证用户的输入。最后两个参数不说自明,允许你指定一个特定的用户名和密码。
void send(content):这个方法具体向服务器发出请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等待直到接收到响应为止。可选参数可以是DOM对象的实例、输入流,或者串。传入这个方法的内容会作为请求体的一部分发送。
void setRequestHeader(string header, string value):这个方法为HTTP请求中一个给定的首部设置值。它有两个参数,第一个串表示要设置的首部,第二个串表示要在首部中放置的值。需要说明,这个方法必须在调用open()之后才能调用。
在所有这些方法中,最有可能用到的就是open()和send()。XMLHttpRequest对象还有许多属性,在设计Ajax交互时这些属性非常有用。
void abort():顾名思义,这个方法就是要停止请求。
string getAllResponseHeaders():这个方法的核心功能对Web应用开发人员应该很熟悉了,它返回一个串,其中包含HTTP请求的所有响应首部,首部包括Content-
Length、Date和URI。
string getResponseHeader(string header):这个方法与getAllResponseHeaders()是对应的,不过它有一个参数表示你希望得到的指定首部值,并且把这个值作为串返回。
除了这些标准方法,XMLHttpRequest对象还提供了许多属性,如表2-2所示。处理XMLHttpRequest时可以大量使用这些属性。
表2-2 标准XMLHttpRequest属性
属 性 |
描 述 |
onreadystatechange |
每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数 |
readyState |
请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成 |
responseText |
服务器的响应,表示为一个串 |
responseXML |
服务器的响应,表示为XML。这个对象可以解析为一个DOM对象 |
status |
服务器的HTTP状态码(200对应OK,404对应Not Found(未找到),等等) |
statusText |
HTTP状态码的相应文本(OK或Not Found(未找到)等等) |
2.3 交互示例
看到这里,你可能想知道典型的Ajax交互是什么样。图2-1显示了Ajax应用中标准的交互模式。
数据库 |
服务器资源 |
服务器 |
客户 |
事件 |
Web容器 |
使用Ajax的Web应用 |
图2-1 标准Ajax交互
不同于标准Web客户中所用的标准请求/响应方法,Ajax应用的做法稍有差别。
1. 一个客户端事件触发一个Ajax事件。从简单的onchange事件到某个特定的用户动作,很多这样的事件都可以触发Ajax事件。可以有如下的代码:
<input type="text"d="email" name="email" onblur="validateEmail()";>
2. 创建XMLHttpRequest对象的一个实例。使用open()方法建立调用,并设置URL以及所希望的HTTP方法(通常是GET或POST)。请求实际上通过一个send()方法调用触发。可能的代码如下所示:
var xmlHttp;
function validateEmail() {
var email = document.getElementById("email");
var url = "validate?email=" + escape(email.value);
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
3. 向服务器做出请求。可能调用servlet、CGI脚本,或者任何服务器端技术。
4. 服务器可以做你想做的事情,包括访问数据库,甚至访问另一个系统。
5. 请求返回到浏览器。Content-Type设置为text/xml——XMLHttpRequest对象只能处理text/html类型的结果。在另外一些更复杂示例中,响应可能涉及更广,还包括JavaScript、DOM管理以及其他相关的技术。需要说明,你还需要设置另外一些首部,使浏览器不会在本地缓存结果。为此可以使用下面的代码:
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");[1]
6. 在这个示例中,XMLHttpRequest对象配置为处理返回时要调用callback()函数。这个函数会检查XMLHttpRequest对象的readyState属性,然后查看服务器返回的状态码。如果一切正常,callback()函数就会在客户端上做些有意思的工作。以下就是一个典型的回调方法:
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//do something interesting here
}
}
}
可以看到,这与正常的请求/响应模式有所不同,但对Web开发人员来说,并不是完全陌生的。显然,在创建和建立XMLHttpRequest对象时还可以做些事情,另外当“回调”函数完成了状态检查之后也可以有所作为。一般地,你会把这些标准调用包装在一个库中,以便在整个应用中使用,或者可以使用Web上提供的库。这个领域还很新,但是在开源社区中已经如火如荼地展开了大量的工作。
通常,Web上提供的各种框架和工具包负责基本的连接和浏览器抽象,有些还增加了用户界面组件。有一些纯粹基于客户,还有一些需要在服务器上工作。这些框架中的很多只是刚开始开发,或者还处于发布的早期阶段,随着新的库和新的版本的定期出现,情况还在不断发生变化。这个领域正在日渐成熟,最具优势的将脱颖而出。一些比较成熟的库包括libXmlRequest、RSLite、sarissa、JavaScript对象注解(JavaScript Object Notation,JSON)、JSRS、直接Web远程通信(Direct Web Remoting,DWR)和Rails on Ruby。这个领域日新月异,所以应当适当地配置你的RSS收集器,及时收集有关Ajax的所有网站上的信息!
2.4 GET与POST
你可能想了解GET和POST之间有什么区别,并想知道什么时候使用它们。从理论上讲,如果请求是幂等的就可以使用GET,所谓幂等是指多个请求返回相同的结果。实际上,相应的服务器方法可能会以某种方式修改状态,所以一般情况下这是不成立的。这只是一种标准。更实际的区别在于净荷的大小,在许多情况下,浏览器和服务器会限制URL的长度URL用于向服务器发送数据。一般来讲,可以使用GET从服务器获取数据;换句话说,要避免使用GET调用改变服务器上的状态。
一般地,当改变服务器上的状态时应当使用POST方法。不同于GET,需要设置XML- HttpRequest对象的Content-Type首部,如下所示:
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
与GET不同,POST不会限制发送给服务器的净荷的大小,而且POST请求不能保证是幂等的。
你做的大多数请求可能都是GET请求,不过,如果需要,也完全可以使用POST。
2.5 远程脚本
我们已经介绍了Ajax,下面来简单谈谈远程脚本。你可能会想:“Ajax有什么大不了的?我早就用IFRAME做过同样的事情。”实际上,我们自己也曾用过这种方法。这在以前一般称为远程脚本(remote scripting),很多人认为这只是一种修修补补。不过,这确实提供了一种能避免页面刷新的机制。
基本说来,远程脚本是一种远程过程调用类型。你可以像正常的Web应用一样与服务器交互,但是不用刷新整个页面。与Ajax类似,你可以调用任何服务器端技术来接收请求、处理请求并返回一个有意义的结果。正如在服务器端有很多选择,客户端同样有许多实现远程脚本的选择。你可以在应用中嵌入Flash动画、Java applet,或者ActiveX组件,甚至可以使用XML-RPC,但是这种方法过于复杂,因此除非你使用这种技术很有经验,否则这种方法不太合适。实现远程脚本的通常做法包括将脚本与一个IFRAME(隐藏或不隐藏)结合,以及由服务器返回JavaScript,然后再在浏览器中运行这个JavaScript。
Microsoft提供了自己的远程脚本解决方案,并聪明地称之为Microsoft远程脚本(Microsoft Remote Scripting,MSRS)。采用这种方法,可以像调用本地脚本一样调用服务器脚本。页面中嵌入Java applet,以便与服务器通信,.asp页面用于放置服务器端脚本,并用.htm文件管理客户端的布局摆放。在Netscape和IE 4.0及更高版本中都可以使用Microsoft的这种解决方案,可以同步调用,也可以异步调用。不过,这种解决方案需要Java,这意味着可能还需要附加的安装例程,而且还需要Internet Information Services(IIS),因此会限制服务器端的选择。
Brent Ashley为远程脚本创建了两个免费的跨平台库。JSRS是一个客户端JavaScript库,它充分利用DHTML向服务器做远程调用。相当多的操作系统和浏览器上都能使用JSRS。如果采用一些常用的、流行的服务器端实现(如PHP、Python和Perl CGI),JSRS一般都能在网站上安装并运行。Ashley免费提供了JSRS,而且还可以从他的网站(www.ashleyit.com
/rs/main.htm)上得到源代码。
如果你觉得JSRS太过笨重,Ashley还创建了RSLite,这个库使用了cookie。RSLite仅限于少量数据和单一调用,不过大多数浏览器都能提供支持。
为了进行比较,这里向你展示如何使用IFRAME来实现类似Ajax的技术。这非常简单,而且过去我们就用过这种方法(在XMLHttpRequest问世之前)。这个示例并没有真正调用服务器,只是想让你对如何使用IFRAME实现远程脚本有所认识。
这个示例包括两个文件:iframe.html(见代码清单2-2)和server.html(见代码清单2-3)。server.html模拟了本应从服务器返回的响应。
代码清单2-2 iframe.html文件
<html>
<head>
<title>Example of remote scripting in an IFRAME</title>
</head>
<script type="text/javascript">
function handleResponse() {
alert('this function is called from server.html');
}
</script>
<body>
<h1>Remote Scripting with an IFRAME</h1>
<iframe id="beforexhr"
name="beforexhr"
style="width:0px; height:0px; border: 0px"
src="blank.html"></iframe>
<a href="server.html" target="beforexhr">call the server</a>
</body>
</html>
代码清单2-3 server.html文件
<html>
<head>
<title>the server</title>
</head>
<script type="text/javascript">
window.parent.handleResponse();
</script>
<body>
</body>
</html>
图2-2显示了最初的页面。运行这个代码生成的结果如图2-3所示。
图2-2 最初的页面
图2-3 调用“服务器”之后的页面
2.6 如何发送简单请求
现在已经准备开始使用XMLHttpRequest对象了。我们刚刚讨论了如何创建这个对象,下面来看如何向服务器发送请求,以及如何处理服务器的响应。
最简单的请求是,不以查询参数或提交表单数据的形式向服务器发送任何信息。在实际中,往往都希望向服务器发送一些信息。
使用XMLHttpRequest对象发送请求的基本步骤如下:
1. 为得到XMLHttpRequest对象实例的一个引用,可以创建一个新的实例,也可以访问包含有XMLHttpRequest实例的一个变量。
2. 告诉XMLHttpRequest对象,哪个函数会处理XMLHttpRequest对象状态的改变,为此要把对象的onreadystatechange属性设置为指向JavaScript函数的指针。
3. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个参数:一个是指示所用方法(通常是GET或POST)的串;一个是表示目标资源URL的串;一个是Boolean值,指示请求是否是异步的。
4. 将请求发送给服务器。XMLHttpRequest对象的send()方法把请求发送到指定的目标资源。send()方法接受一个参数,通常是一个串或一个DOM对象。这个参数作为请求体的一部分发送到目标URL。当向send()方法提供参数时,要确保open()中指定的方法是POST。如果没有数据作为请求体的一部分被发送,则使用null。
这些步骤很直观:你需要XMLHttpRequest对象的一个实例,要告诉它如果状态有变化该怎么做,还要告诉它向哪里发送请求以及如何发送请求,最后还需要指导XMLHttpRequest发送请求。不过,除非你对C或C++很了解,否则可能不明白函数指针(function pointer)是什么意思。
函数指针与任何其他变量类似,只不过它指向的不是像串、数字、甚至对象实例之类的数据,而是指向一个函数。在JavaScript中,所有函数在内存中都编有地址,可以使用函数名引用。这就提供了很大的灵活性,可以把函数指针作为参数传递给其他函数,或者在一个对象的属性中存储函数指针。
对于XMLHttpRequest对象,onreadystatechange属性存储了回调函数的指针。当XMLHttpRequest对象的内部状态发生变化时,就会调用这个回调函数。当进行了异步调用,请求就会发出,脚本立即继续处理(在脚本继续工作之前,不必等待请求结束)。一旦发出了请求,对象的readyState属性会经过几个变化。尽管针对任何状态都可以做一些处理,不过你最感兴趣的状态可能是服务器响应结束时的状态。通过设置回调函数,就可以有效地告诉XMLHttpRequest对象:“只要响应到来,就调用这个函数来处理响应。”
第一个示例很简单。这是一个很小的HTML页面,只有一个按钮。点击这个按钮会初始化一个发至服务器的异步请求。服务器将发回一个简单的静态文本文件作为响应。在处理这个响应时,会在一个警告窗口中显示该静态文本文件的内容。代码清单2-4显示了这个HTML页面和相关的JavaScript。
代码清单2-4 simpleRequest.html页面
<!DOCTYPE html PUBLIC "-//W
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple XMLHttpRequest</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "simpleResponse.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
alert("The server replied with: " + xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="Start Basic Asynchronous Request"
onclick="startRequest();"/>
</form>
</body>
</html>
服务器的响应文件simpleResponse.xml只有一行文本。点击HTML页面上的按钮会生成一个警告框,其中显示simpleResponse.xml文件的内容。在图2-4中可以看到分别在Internet Explorer和Firefox中显示的包含服务器响应的相同警告框。
对服务器的请求是异步发送的,因此浏览器可以继续响应用户输入,同时在后台等待服务器的响应。如果选择同步操作,而且倘若服务器的响应要花几秒才能到达,浏览器就会表现得很迟钝,在等待期间不能响应用户的输入。这样一来,浏览器好像被冻住一样,无法响应用户输入,而异步做法可以避免这种情况,从而让最终用户有更好的体验。尽管这种改善很细微,但确实很有意义。这样用户就能继续工作,而且服务器会在后台处理先前的请求。
图2-4 第一个简单的异步请求
与服务器通信而不打断用户的使用流程,这种能力使开发人员采用多种技术改善用户体验成为可能。例如,假设有一个验证用户输入的应用。用户在输入表单上填写各个字段时,浏览器可以定期地向服务器发送表单值来进行验证,此时并不打断用户,他还可以继续填写余下的表单字段。如果某个验证规则失败,在表单真正发送到服务器进行处理之前,用户就会立即得到通知,这就能大大节省用户的时间,也能减轻服务器上的负载,因为不必在表单提交不成功时完全重建表单的内容。
图2-5 对于潜在的安全威胁,Internet |
这个安全限制的强度因浏览器而异(见图2-5)。IE会显示一个警告,指出可能存在一个潜在的安全风险,但是用户可以选择是否继续发出请求。Firefox则会断然停止请求,并在JavaScript控制台显示一个错误消息。
Firefox确实提供了一些JavaScript技巧,使得XMLHttpRequest也可以请求外部URL的资源。不过,由于这些技术针对特定的浏览器,所以最好不要用,而且要避免使用XMLHttpRequest访问外部URL。
2.7 DOM Level 3 加载和保存规约
到目前为止,我们讨论的解决方案都不是标准。尽管XMLHttpRequest得到了广泛支持,但是你已经看到了,创建XMLHttpRequest对象的过程会随浏览器不同而有所差异。许多人错误地认为Ajax得到了W
什么时候加载和保存规约能取代Ajax?谁也不知道。想想看有多少浏览器没有完全支持现有的标准,所以这很难说,但是随着越来越多的网站和应用利用了Ajax技术,可能以后的版本会得到支持。不过,较早的DOM版本就花了很长时间才得到采纳,所以你得耐心一点。在一次访谈中,DOM Activity主席Philippe Le Hégaret称,需要花“相当长的时间”才能得到广泛采纳。DOM Level 3也得到了一些支持,Opera的XMLHttpRequest实现就基于DOM Level 3,而且Java XML处理API(Java API for XML Processing,JAXP)1.3版本也支持DOM Level 3。不过,从出现了相应的W
从1997年8月起,人们就一直在为解决浏览器之间的不兼容而努力,加载和保存规约则达到了极致。你可能注意到,标题里写的是“Level 3”,那么Level 1和Level 2呢?Level 1在1998年10月完成,为我们带来了HTML 4.0和XML 1.0。如今,Level 1已经得到了广泛支持。2000年11月,Level 2完成,不过它被采纳得比较慢。CSS就是Level 2的一部分。
开发人员能从加载和保存规约得到些什么?在理想情况下,它能解决我们目前遇到的许多跨浏览器问题。尽管Ajax很简单,但是你应该记得,仅仅是为了创建XMLHttpRequest对象的一个实例,就需要检查浏览器的类型。真正的W
2.8 DOM
我们一直在说DOM,如果你没有做过太多客户端的工作,可能不知道什么是DOM。DOM是一个W
有一点很重要,DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法,不过DOM的应用已经远远超出这个范围。
DOM实际上是以面向对象方式描述的对象模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示,不过页面当然可能并不是以这种树的方式具体实现。假设有一个Web页面,如代码清单2-5所示。
代码清单2-5 简单的表格
图2-6 简单的DOM |
<tbody>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
</tbody>
</table>
可以画出这个简单表格的DOM,如图2-6所示。
DOM规约好就好在它提供了一种与文档交互的标准方法。如果没有DOM,Ajax最有意思的方面也许根本就没有存在的可能。由于DOM不仅允许遍历DOM树,还可以编辑内容,因此可以建立极为动态的页面。
2.9 小结
尽管Ajax风格的技术已经用了很多年,但直到最近XMLHttpRequest对象才得到现代浏览器的采纳,而这也为开发丰富的Web应用开启了一个新的时代。在本章中,我们讨论了Ajax核心(即XMLHttpRequest对象)的相关基础知识。我们了解了XMLHttpRequest对象的方法和属性,而且展示了使用XMLHttpRequest对象的简单示例。可以看到,这个对象相当简单,无需你考虑其中很多的复杂性。适当地使用JavaScript,再加上基本的DOM管理,Ajax可以提供高度的交互性,而这在此前的Web上是做不到的。
第1章曾提到,利用XMLHttpRequest,你不必将整个页面完全刷新,也不限于只能与服务器进行同步会话。在后面的几章中,我们会介绍如何将你已经掌握的服务器端技术与XMLHttpRequest的独特功能相结合,来提供高度交互性的Web应用。