AJAX 系列文章（1）：入门

 AJAX 系列文章（1）：入门
(C) 2001-2007 周融 All Rights Reserved.
2006 年 12 月

概述

AJAX 已经成为 Web 2.0 时代的事实开发标准，大量使用 AJAX 技术的网站出现在了互联网上。连 Live.com 和 Google 都不例外。本文介绍一些 AJAX 的基本知识和实现方法，为以后我公司的产品向 AJAX 技术靠近做好技术储备。

本文为 AJAX 系列文章中的第一节，包含以下内容：
· B/S 模式 v.s. C/S 模式
· AJAX 概述
· XMLHttp 对象简介
· 结论

B/S 模式 v.s. C/S 模式

人们在长期的计算机软件实践中采用了最传统的人机交互模式，即用户向计算机发送指令，计算机在本地处理指令并返回输出结果。这种经典的模式一直延续了三十年，直到 Web 时代的到来。

1989 年前后，第一个 Web 站点在 WWW 服务的支持下在互联网上出现，这意味着一种全新的计算模型由此而生。Web 应用程序在一个特定的服务器上运行，使用它的用户需要一台带有 Web 浏览器的本地计算机连接到这个服务器并向该服务器发送请求，Web 服务器收到请求后处理请求，最后将结果发送给用户的计算机（客户端计算机），客户端计算机执行一次刷新操作，将服务器返回的信息显示在浏览器上。

这种浏览器/服务器（B/S）模式引起了全世界的震动，用户的计算机只需要一个能够浏览 Web 的浏览器，不需要任何其他硬件代价和 CPU 时间就可以轻松访问大量 Web 应用程序，这是一个好的开端，以至于在今后的 15 年，B/S 模式的 Web 应用程序一度成为主流服务应用程序。

然而，在人们舍弃客户端/服务器（C/S）应用程序多年后，开发人员又重新开始思考，B/S 模式和 C/S 模式能不能更好的融合？他们发现 B/S 模式有如下优点：
· 最少利用用户的本地计算机资源，所有负载均在服务期上，对用户计算机的配置要求很低。
· 集中式服务管理导致管理成本降低
· 方便、快捷，不需要额外的软件和硬件，Web 应用程序可以在任何计算机上运行。
而 B/S 模式也有一个显著的缺点，那就是：
·  任何请求结果都需要服务器返回，客户端刷新才能呈现，没有 C/S 模式应用程序的方便。
·  由于服务器响应和客户端刷新需要时间，可能造成浏览器无内容显示一段时间，对用户体验有影响。
那么能不能借鉴一些 C/S 模式的优点，完善 B/S 应用程序的用户体验？

21 世纪前的几年，人们都在致力于研究一种通用文档格式，这种文档格式能够用于描述任何信息，如文本、数据、配置信息等，这种文档就是大家熟悉的 XML。2001 年，一个基于 XML 的 Http 请求协议被 W3C 所认可，成为标准，而基于这种协议的 HTTP 请求通信方式正好是异步通信，也就是说，利用 XMLHttp 很可能实现 B/S 模式应用程序的“无刷新”用户体验。

2001 年，一种新的技术被发现，随后立即引起了轰动，这就是 AJAX，AJAX 的全称是异步 JavaScript 和 XML（Asynchronized JavaScript And XML），它不是一种新的模型，而是一种利用 XML 和 JavaScript 语言进行 B/S 模式异步通信的一套实现方法。最起初这种技术在 JSP 上实现，但后来，开发人员发现在 Microsoft Windows Internet Explorer 5.x、6 和 7 以及 Firefox 等多种浏览器上都支持了 XMLHttp，到 2004 年底，AJAX 在几乎所有的浏览器上都已经被实现。

从 C/S 到 B/S，再从 B/S 回到一些 C/S，人们在用户体验的不断成长中使得计算机软件技术得到了更好的更新和发展。

AJAX 概述

AJAX 是 Web 2.0 时代的基础实现技术之一，它有效的利用客户端计算机资源进行一些呈现层甚至更低级别的计算，充分发挥 B/S 结构的优势，也更好的提高了用户体验。

AJAX 为我们的 Web 应用程序带来了如下优势
· 改善的用户体验，使用 AJAX，您的应用程序可以像经典 C/S 应用程序一样，再也看不到服务器刷新过程。
· 使基于服务的应用程序（SOA）开发更加简单。通过 AJAX 调用 Web Service 和使用 Gadget，您的应用程序将更具备扩展性、易用性和克访问性。
· 集成 C/S 模式应用程序大量使用键盘的特性，现在利用 AJAX 就可以实现右键菜单、拖动和 Web Parts 等个性化功能。
· 充分利用客户端计算机资源，使应用程序的呈现更易于扩展。AJAX 目前可以实现在 ASP.NET、JSP、静态 HTML 和 Windows(R) Presentation Foundation(WPF) 上，利用这些宿主服务器技术的强大功能对您的 Web 应用程序进行扩展。

AJAX 目前实现在绝大多数浏览器上，例如 Windows Internet Explorer，Firebox,，Sofari 等，它具备平台无关性，开发人员开发和维护都比较轻松。

在一些 AJAX 的实现技术上还对 JavaScript 语言进行了扩展，比如 JSON 和增强的 JavaScript 面向对象特性（将在后面的文章中介绍），这些也为开发人员提供了便利。

从技术上来看，AJAX 需要通过 XMLHttp 对象进行异步操作，XMLHttp 提供了一些固定方法用来支持异步通信请求，下面就简要介绍一下在 Windows Internet Explorer 中的 XMLHttpRequest 对象。

XMLHttp 简介

让我们来实现一个简单的 Web 异步请求，首先建立一个如下所示的 HTML 文件。

< html >
< head ></ head >
< body >
   < input  type ="text"  id ="UserNameTextBox"  size ="12"   />
   < input  type ="button"  id ="OKButton"  value ="Show Remote Machine User Name"  onClick ='javascript:window.open("http://localhost/default.aspx")'  />
</ body >

这个例程用来显示远程服务器上的登录用户名。假设远程服务器上存在以下 URL，并可以获取其用户名：http://localhost/default.aspx，那么，此时如果单击按钮，浏览器将刷新，然后显示一个对话框。可以看到，此时，浏览器控件中没有任何内容可显示。

如果需要象经典 C/S 模式应用程序一样，单击按钮直接出线对话框，不要刷新，那么就需要对以上代码进行改造。

首先应创建 XMLHttpRequest 的实例。这个实例创建方法如下：

var  xmlHttp  =   null ;
if  (window.XMLHttpRequest)  ... {
  // If IE7, Mozilla, Safari, and so on: Use native object
  xmlHttp = new XMLHttpRequest();
}
else
... {
  if (window.ActiveXObject) ...{
     // ...otherwise, use the ActiveX control for IE5.x and IE6
     xmlHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0');
  }
}

然后，在 OKButton.onClick 上调用 Open 方法：

xmlHttp.open( " GET " ,  " http://localhost/default.aspx " ,  false );
//  ... 添加其它代码
temp  =  xmlHttp.responseText;
alert(temp);

这样，我们可以看到与前面实例不同的结果。

这只是一个很简单的例子，在下面的文章中，我们还会涉及到很多关于 AJAX 方面的东西，例如：
· JavaScript 的面向对象技术
· ASP.NET AJAX Extensions
· Microsoft AJAX Core Library

结论

AJAX 可以为开发人员编写更具备时代特性和高级体验的开发模式，同时也更新了目前 B/S 模式 Web 应用程序设计的结构。开发人员应当接触并了解更多有关 AJAX 的信息，并将其利用到实际的开发中。