Ajax与Web2.0应用架构

 5.1 Ajax应用技术
5.1.1 Ajax 应用简介
Ajax（Asynchronous JavaScript + XML）是由HTML、JavaScript技术、DHTML 和 DOM技术组成，使用它可以构建更为动态和响应更灵敏的Web应用程序。Ajax技术的关键在于对浏览器端的JavaScript、DHTM和与服务器异步通信的组合。这一技术可以将笨拙的 Web 界面转化成交互性的Ajax应用程序。
在Ajax应用之前，Web站点强制用户进入提交、等待、重新刷新显示浏览器的交互过程，用户的动作总是与服务器的“处理时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新用户界面，并向服务器发出异步请求，以执行更新或查询数据库操作。当请求返回时，就可以使用JavaScript和CSS来相应地更新用户界面，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信，Web站点看起来是即时响应的。
5.1.2 Ajax的工作原理
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在IE5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpReques可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。Ajax 应用程序所用到的基本技术有：
（1）HTML用于建立Web表单并确定应用程序其他部分使用的字段。
（2）JavaScript代码是运行Ajax应用程序的核心代码，帮助改进与服务器应用程序的通信。
（3）DHTML用于动态更新表单。如使用div、span和其他动态 HTML元素来标记 HTML。
（4）文档对象模型DOM用于通过JavaScript处理HTML结构和服务器返回的XML或其他数据。
使用Ajax可以完成的功能有：
（1）动态更新当前页面的显示信息，如购物车的物品总数，无需用户单击更新并等待服务器重新发送整个页面。
（2）提升网站的性能，通过减少从服务器下载的数据量而实现提高网络性能。例如，在商务购物网站的购物车页面中，当更新购物车中的一项物品的数量时，会重新载入整个页面，这必须重新下载全部页面的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽很小。
（3）避免了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击下一页，则服务器数据只刷新列表而不是整个页面。
（4）直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击编辑时，可以将静态表格刷新为内容可编辑的表格。用户单击更新请求后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。
5.2 Ajax开发步骤
5.2.1 XMLHttpRequest对象
Ajax的核心是JavaScript对象XmlHttpRequest，创建该对象的方法如清单4-1所示。
清单 5-1
<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>
通过XMLHttpRequest对象与服务器进行对话的是使用JavaScript技术。这正是Ajax的强大功能的来源。在一般的Web应用程序中，用户填写表单字段并单击Submit按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本，如Servlet、PHP。脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的 HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。当然，在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。
Ajax基本思想就是把 JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。当用户填写表单时，数据发送给特定JavaScript代码而不是直接发送给服务器。相反，JavaScript代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。JavaScript代码在幕后发送请求，用户甚至不知道请求的发出。而且请求是异步发送的，就是说JavaScript代码不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。
服务器将数据返回JavaScript代码，JavaScript代码决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预，这就是XMLHttpRequest的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。
5.2.2 应用JavaScript代码
得到XMLHttpRequest的句柄后，其他的JavaScript代码就容易编写了。可以使用 JavaScript代码完成基本任务， JavaScript代码很容易从HTML表单中抽取数据并发送到服务器。更新表单也很简单，需要熟悉getElementById方法，用JavaScript代码捕获和设置字段值程序如清单5-2所示。
清单 5-2
// 把表单字段ID的值赋予变量ID
var ID= document.getElementById("ID").value;
// 根据返回的response对象给表单字段赋值
var response = xmlHttp.responseText.split("|");//分析服务器返回的文本,假设文本的格式为tfnew|xi’an
document.getElementById("name").value = response[0];
document.getElementById("address").value = response[1];
上面的代码没有特别需要注意的地方，只要掌握了XMLHttpRequest，Ajax 应用程序的其他部分与如程序清单5-2所示的JavaScript 代码一样简单了，代码中混合有少量的HTML。同时还需要应用DOM的基础知识。
5.2.3 获取Request对象
通过上面的基础知识介绍后，下面以一些具体的例子来介绍Ajax的应用。XMLHttpRequest是Ajax应用程序的核心，而且对很多读者来说可能还比较陌生，从程序清单 5-1中可以看出，创建和使用这个对象非常简单，但由于浏览器之间的差异，获得 XMLHttpRequest对象可能需要采用不同的方法。下面将详细讲解如何在不同浏览器中获得XMLHttpRequest 对象。
（1） 使用Microsoft浏览器IE
Microsoft浏览器IE使用MSXML解析器处理XML。因此如果编写的Ajax应用程序要和Internet Explorer打交道，那么必须用一种特殊的方式创建对象。但并不是这么简单。根据Internet Explorer中安装的JavaScript技术版本不同，MSXML实际上有两种不同的版本，因此必须对这两种情况分别编写代码。下面就是在 Microsoft浏览器上创建了一个XMLHttpRequest的例子，代码如程序清单5-3。
程序清单5-3
<script language="javascript" type="text/javascript">
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
    xmlHttp = false;
}
}
</script>
对于上面这两行代码：
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
基本上就是尝试使用一个版本的MSXML创建对象，如果失败则使用另一个版本创建该对象。如果都不成功，则将xmlHttp变量设为false，如果出现这种情况，可能是因为安装了非Microsoft浏览器，需要使用不同的代码。
（2） 使用Mozilla和非Microsoft浏览器
如果选择的浏览器不是Internet Explorer，或者为非Microsoft浏览器编写代码，就需要使用不同的代码。事实上就是 清单5-1 所示的一行简单代码：
var xmlHttp = new XMLHttpRequest object
这行简单的代码在 Mozilla、Opera 以及基本上所有以任何形式或方式支持Ajax的非 Microsoft浏览器中创建了XMLHttpRequest对象。
通过对上述代码的分析，可以编写一个通用的，适合所有支持Ajax技术的浏览器的代码，如程序清单5-4所示。
程序清单5-4
<script language="javascript" type="text/javascript">
var xmlHttp = false;
//获得Microsoft IE
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
    xmlHttp = false;
}
}
//获得非Microsoft IE
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
</script>
上面这段代码的核心是建立一个变量xmlHttp来引用即将创建的XMLHttpRequest对象。然后尝试在Microsoft浏览器中创建该对象，尝试使用Msxml2.XMLHTTP对象创建它。 如果失败，再尝试Microsoft.XMLHTTP对象。如果仍然没有建立xmlHttp，则以非Microsoft 的方式创建该对象。 最后，xmlHttp应该引用一个有效的XMLHttpRequest对象，无论运行什么样的浏览器。
5.2.4 Ajax的基本请求/响应模型
当创建了一个XMLHttpRequest对象后，就可以应用来处理服务请求。首先需要一个 Web页面能够调用的JavaScript方法。Ajax应用程序中处理服务请求流程为：
（1） 从Web表单中获取需要的数据。
（2） 建立要连接的URL。
（3） 打开到服务器的连接。
（4） 设置服务器在完成后要运行的函数。
（5） 发送请求。
具体Ajax方法流程应用如清单5-5所示。
清单 5-5
<script language="javascript" type="text/javascript">
function callServer() {
// 从表单中获取用户ID和口令
var ID = document.getElementById("ID").value;
var PASS = document.getElementById("PASS").value;
// 当用户ID和口令不为空时，提交请求
if ((ID == null) || (ID == "")) return;
if ((PASS == null) || (PASS == "")) return;
// 创建 URL 连接
var url = "Login?Id=" + escape(ID) + "&PASS=" + escape(PASS);
// 打开服务器连接
xmlHttp.open("GET", url, true);
// 如果服务器处理完了请求，一个名为 RefreshPage() 的方法将被触发
xmlHttp.onreadystatechange = RefreshPage;
// 发送请求
xmlHttp.send(null);
}
</script>
上面的代码使用基本JavaScript代码获取几个表单字段的值。然后设置一个Servlets作为链接的目标。然后打开一个连接，这是第一次使用到XMLHttpRequest。其中指定了连接方法（GET）和要连接的URL。最后一个参数如果设为true，那么将请求一个异步连接。如果使用false，那么代码发出请求后将等待服务器返回的响应。如果设为true，当服务器在后台处理请求的时候用户仍然可以使用表单，也可以调用其他JavaScript方法。
XMLHttpRequest对象实例xmlHttp的onreadystatechange属性告诉服务器在运行完成后。因为代码没有等待服务器，必须让服务器知道怎么做以便能作出响应。在这个示例中，如果服务器处理完了请求，一个特殊的名为RefreshPage的方法将被触发。最后，使用值null调用send方法。因为已经在请求URL中添加了要发送给服务器的数据（ID 和 PASS），所以请求中不需要发送任何数据。这样就发出了请求，服务器按照请求的要求工作。
5.2.5 处理响应
发送请求后，进入等待服务器的响应。直到xmlHttp.readyState属性的值等于4。服务器将把响应填充到xmlHttp.responseText属性中。其中的第一点是就绪状态，只要检查一个特定的值为4就表明服务器己处理完请求响应，第二点就是使用xmlHttp.responseText属性获得服务器的响应。XmlHttpRequest对象属性主要有：
（1）onreadystatechange：每次状态改变所触发事件的事件处理程序。
（2）readyState：对象状态值。状态值的含义如下：
 0 = 未初始化（uninitialized）
 1 = 正在加载（loading）
 2 = 加载完毕（loaded）
 3= 交互（interactive）
 4= 完成（complete）
（3）responseText：从服务器进程返回的数据的字符串形式。
（4）responseXML：从服务器进程返回的DOM兼容的文档数据对象。
（5）status：从服务器返回的数字代码，比如404（未找到）或200（就绪）。
（6）statusText：伴随状态码的字符串信息。
下面就是处理服务器响应的例子，代码如程序清单5-6 所示。程序清单5-6中的示例方法可供程序清单 5-5 中发送的数据调用。
程序清单5-6
function RefreshPage() {
if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("UserName").value = response;
}
}
上面这个函数等待服务器调用，如果是就绪状态，则使用服务器返回的值设置另一个表单字段的值。
5.2.6 调用Ajax过程
一个JavaScript方法捕捉用户输入表单的信息并将其发送到服务器，另一个 JavaScript 方法监听和处理响应，并在响应返回时设置字段的值。所有这些实际上都依赖于调用第一个JavaScript方法，它启动了整个过程。在Web表单调用一个 Ajax 过程如清单5-7所示。
清单5-7
<form>
<p>用户ID: <input type="text" name="ID" id="city" size="10"
       onChange="callServer();" /></p>
<p>口令: <input type="text" name="PASS" id="state" size="16"
       onChange="callServer();" /></p>
<p>用户姓名: <input type="text" name="UserName" id="UserName" size="15" /></p>
</form>