Ajax 及其入门基础
Ajax的原理
这个其实要从C/S和B/S的原理说起。Windows操作系统的诞生，为单机通信提供了很大的支持，程序设计也从DOS早期的单任务单用户向网络的分布式应用过度。C/S提供的客户/服务器编程模式为网络应用提供了一个有效的通信手段。浏览器与Web服务器之间的请求/ 服务，就是一个典型的C/S应用。
有人说，怎么是C/S？这应该是B/S呀！其实是这样理解的：浏览器/Web服务器作为我们实现网页发布的一个平台，对于我们在这个平台上开发的应用，我们的应用是由浏览器从Web服务器上下载下来然后展示在浏览器的“容器”里的，我们的应用是B/S模式的。但是浏览器与Web服务器的通信，却是C/S模式的。可以说，B/S模式是建立在C/S模式之上的。
Windows早期的桌面应用程序(包括单机程序和C/S结构的网络应用程序)，其界面是调用Windows的API来实现的，后来，出现了VB、Delph(VCL)、VC++(MFC)等应用程序框架，把繁杂的API包装起来，使Windows程序开发难度大大降低、效率大大提高。
进入B/S编程阶段后，我们只需要面向Web服务器和浏览器编程，不需要考虑网络通信和并发等复杂的问题。但是在浏览器和Web服务器之间，为了进行数据交互，浏览器经常频繁的向Web服务器提交一些信息，现在的网络环境又极差，使我们经常等待于浏览器与Web服务器的通信状态，用户体验很差。而传统的桌面程序没有这个缺陷。
怎样既能利用B/S程序极强的界面表现力，又能避免其提交后的那一段眩晕的“真空”状态呢？
其实，在浏览器的设计阶段，设计师已经为我们考虑到了这个问题。这就是我们要说到的Ajax！Ajax英文是Asynchronous Javascrīpt and XML，就是在浏览器里通过一个机制，实现浏览器端与Web服务器端的一个异步通信，参与这个过程的有javascrīpt、XML等技术。Ajax的引入，使B/S信息传递的量减少了，浏览器界面不再闪烁了，浏览者的感觉好多了。
Ajax并不是一项新技术，而是几个现有技术的新组合，而且它的发展也得益于几家大的互联网企业的率先应用(大家常拿Google的在线Maps来举例)。连浏览器寡头微软当初都没怎么看得起这项技术，后来才在VS.NET2.0时代玩命的赶呀追。
二、Ajax的实现
Ajax是由浏览器通过内部的一个组件实现的，这个组件负责接收用户的请求，以XML作为信息中介，并与Web服务器实现异步通信，并把请求的结果返回给浏览器，再由浏览器呈现给用户界面。“异步”的意思就是组件在后台工作期间，浏览器与用户保持在交互状态，并不更新当前窗口。也不是所有的数据都被组件提交到后台去。
Ajax实现的基础是：浏览器有一个Ajax引擎;浏览器支持Javascrīpt;Web服务器端也支持XML数据格式。并不是所有浏览器都支持Ajax技术的，但支持Ajax的浏览器越来越多。
这个组件在Windows下是一个COM组件，由IE浏览器调用。IE浏览器也是在5.0版本以后才提供这个组件的。不同的浏览器实现和创建XMLHttpRequest对象的方式是不太一样的。但作为一个通用的Ajax接口，其外在表现是一致的。
Ajax其实是一项复杂的技术，牵扯到的东西很多。除过XMLHttpRequest对象和Javascrīpt,还有DOM(文档对象模型)，XML等。Javascrīpt是一个粘合剂，它通过XMLHttpRequest对象对浏览器端页面的诸多元素进行操控，实现与Web服务器的后台交互，实现数据验证、存取等功能。
三、Ajax编程示例
1，客户端(文件client.htm)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AJAX 客户端</title>
<scrīpt language="javascrīpt">
var xmlhttp = false;
////开始初始化XMLHttpRequest对象
//这段代码考虑到了xmlhttp对象与目前主流浏览器的兼容
//如果在IE浏览器下测试，一条
//xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
//或xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")语句就可以了
if(window.XMLHttpRequest)
{
//Mozilla 浏览器
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType)
{//设置MiME类别
xmlhttp.overrideMimeType(‘text/xml’);
}
}
else
if (window.ActiveXObject)
{
// IE浏览器
try
{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e)
{
try
{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e)
{ }
}
}
function send_request(url, data)
{
//初始化、指定处理函数、发送请求的函数
if (!xmlhttp)
{ //异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
// 确定发送请求的方式和URL以及是否同步执行下段代码
xmlhttp.open("POST", url, true);
xmlhttp.onreadystatechange = processRequest; //根据Web服务器应答，触发该状态改变事件
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("username=" + data); //发送信息到后台程序
}
////状态改变事件处理函数：处理返回的信息
function processRequest()
{
if (xmlhttp.readyState == 4)
{ // 判断对象状态
if (xmlhttp.status == 200) //正常返回信息，状态编号200
{ // 信息已经成功返回，开始处理信息
alert(xmlhttp.responseText);
}
else
{ //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function userCheck()
{
var f = document.form1;
var username = f.username.value;
if(username=="")
{
window.alert("用户名不能为空。");
f.username.focus();
return false;
}
else
{
//该语句由用户按“唯一性检查”按钮后执行
send_request(‘server.php’, username);
}
}
</scrīpt>
</head>
<body>
<body>
<form name="form1" action="" method="post">
用户名：<input type="text" name="username" value="">
<input type="button" name="check" value="惟一性检查" ōnClick="userCheck()">
<input type="submit" name="submit" value="提交">
</form>
</body>
</html>
2，Web服务器端(文件server.php)
<?php
//取得客户端数据
$username = $_POST["username"];
//判断用户名的惟一性
if( $username=="网眼") //实际工程中，这里一般是从数据库取用户名的值
{
printf("用户名“%s”已经被注册，请更换一个用户名", $username);
}
else
{
printf("用户名“%s”尚未被使用，您可以继续", $username);
}
?>
在以上Client.htm代码中，首先建立XMLHttpRequest对象实例，然后很据对象的状态触发事件处理函数，对返回的信息进行处理。一切控制逻辑都是用Javascrīpt脚本来书写的，XMLHttpRequest对象与Web服务器的XML信息交换对我们是隐含的，我们不必关心。
这是一个最原始的Ajax编程框架，它能简单的处理一些少量数据。经过代码重构，完全可以用在我们自己的小型工程中。
注意Ajax本身是一种浏览器端技术，它和Web服务器端采用什么脚本书写代码是没有关系的。比如我们把Client.htm的语句send_request(‘server.php’, username)换为send_request(‘server.asp’, username)，再相对应的建立server.asp文件，内容为：
<%
dim username
username = request("username")
if username="Thomas" then
response.write("用户名" & username & "已经被注册，请更换一个用户名")
else
response.write("用户名" & username & "尚未被使用，您可以继续")
end if
%>
做了这样的改变后，在浏览器端，用户看到的效果是一模一样的。 四、常见Ajax编程框架
既然上述Ajax框架已经能工作了，为什么还有那么多的框架呢？
随着页面的复杂，可能需要书写大量的Javascrīpt脚本来对页面中的DOM对象进行控制，工作量和复杂度会大大增加。Ajax编程框架通常利用面向对象的方法，对一些基本的对象和行为及其复杂性进行了合理的封装，建造了一套有自己特色的类库，并且考虑了效率和可扩充性等优点。我们在开发时，可以使用较少的、更清晰的代码，完成自己的工作。也使程序员有更多的时间和精力考虑业务逻辑本身，而不是与一堆脚本纠缠在一起。
框架都是与后台脚本相关的。通过后台脚本编程，我们可以不必书写大量的Javascrīpt脚本就能构建浏览器兼容的Ajax应用。
比如，我使用一个比较流行的PHP xAjax框架，对前边的示例程序进行了改写：
<?php
require_once ("../xajax/xajax.inc.php");
//服务器处理函数
function processForm($aFormValues)
{
$objResponse = new xajaxResponse();
$bError = false;
//清空错误信息
$objResponse->addClear("usernameInfo", "innerHTML");
//判断账号
if (trim($aFormValues['username']) == "")
{
$objResponse->addAppend("usernameInfo", "innerHTML", "Please Input user name.");
$bError = true;
}
else
{
if(trim($aFormValues['username'])=="Thomas")
$objResponse->addAppend("usernameInfo", "innerHTML", "Has been registed");
else
$objResponse->addAppend("usernameInfo", "innerHTML", "Has not been registed");
$bError = false;
}
if (!$bError)
{
$sForm .="<div>账号：" .$aFormValues['username']. "</div>\n";
}
else
{
$objResponse->addAssign("submitButton", "value", "Submit");
$objResponse->addAssign("submitButton", "disabled", false);
}
return $objResponse;
}
//构造对象
$xajax = new xajax();
//注册处理函数
$xajax->registerFunction("processForm");
//接管HTTP请求
$xajax->processRequests();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<?php
//生成必要的Javascrīpt
$xajax->printJavascrīpt(‘../xajax/’);
?>
<title>XAJAX 用户注册</title>
<style type="text/css">
#formWrapper{ color: #111111; background-color: rgb(200,200,200); width: 360px;}
#title{color: #FFFFFF; text-align: center; background-color: #000000; }
#formDiv{ padding: 20px;}
.submitDiv{ margin-top: 10px; text-align: center; }
.errorSpan{ color:red;}
</style>
<scrīpt type="text/javascrīpt">
<!–//提交表单
function submitSignup()
{
xajax.$(‘submitButton’).disabled=true;
xajax.$(‘submitButton’).value="验证中…";
xajax_processForm(xajax.getFormValues("signupForm"));
return false;
}
//–>
</scrīpt>
</head>
<body>
<form id="signupForm" action="javascrīpt:void(null);" ōnsubmit="submitSignup();">
用户名：<input type="text" name="username" value="">
<input type="button" name="check" value="Check Only one" ōnClick="submitSignup();">
<input type="submit" id="submitButton" name="submit" value="Submit">
</form>
<div id="usernameInfo" class="errorSpan"> </div>
</body>
</html>
大家看到了这段代码前边的包含语句了吧：require_once ("../xajax/xajax.inc.php")。xajax.inc.php就是定义xajax等相关类库的文件，这个文件里还包含了大量的javascrīpt脚本文件和其他的常数定义等。Xajax类有一条自己的属性和方法，接管和封装了原始的Ajax的行为和方法，用于处理用户的事件和页面文档对象的属性和外观。
Ajax框架有它自己的好处，但是，目前由于Ajax框架太多，各有各的优点和缺点，特别是对PHP语言，我们很难在众多的框架中选中一个最适合我们自己的项目的框架。框架太多加大了交流的成本。框架本身在降低了代码复杂度的同时，也带来了学习的成本。不像.NET，背靠财大气粗的公司，就一套程序库，一套通用的IDE，熟练一门语言(比如C#)，就可以开发Web和桌面应用。
最后还要注意一下，Ajax并不是万金油，任何项目都想用一下。Ajax目前大多数应用在数据校验等应用上，在项目中用的时候请慎重考虑。
张庆（网眼）http://blog.why100000.com
2008-3-8
