一、細說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 Javascript and XML，就是在浏覽器裡通過一個機制，實現浏覽器端與Web服務器端的一個異步通信，參與這個過程的有Javascript、XML等技術。AJax的引入，使B/S信息傳遞的量減少了，浏覽器界面不再閃爍了，浏覽者的感覺好多了。
AJax並不是一項新技術，而是幾個現有技術的新組合，而且它的發展也得益於幾家大的互聯網企業的率先應用(大家常拿Google的在線Maps來舉例)。連浏覽器寡頭微軟當初都沒怎麼看得起這項技術，後來才在VS.Net2.0時代玩命的趕呀追。
二、AJax的實現
AJax是由浏覽器通過內部的一個組件實現的，這個組件負責接收用戶的請求，以XML作為信息中介，並與Web服務器實現異步通信，並把請求的結果返回給浏覽器，再由浏覽器呈現給用戶界面。“異步”的意思就是組件在後台工作期間，浏覽器與用戶保持在交互狀態，並不更新當前窗口。也不是所有的數據都被組件提交到後台去。
Ajax實現的基礎是：浏覽器有一個AJax引擎;浏覽器支持Javascript;Web服務器端也支持XML數據格式。並不是所有浏覽器都支持Ajax技術的，但支持AJax的浏覽器越來越多。
這個組件在Windows下是一個COM組件，由IE浏覽器調用。IE浏覽器也是在5.0版本以後才提供這個組件的。不同的浏覽器實現和創建XMLHttpRequest對象的方式是不太一樣的。但作為一個通用的AJax接口，其外在表現是一致的。
AJax其實是一項復雜的技術，牽扯到的東西很多。除過XMLHttpRequest對象和Javascript,還有DOM(文檔對象模型)，XML等。Javascript是一個粘合劑，它通過XMLHttpRequest對象對浏覽器端頁面的諸多元素進行操控，實現與Web服務器的後台交互，實現數據驗證、存取等功能。
三、AJax編程示例
1，客戶端(文件clIEnt.htm)
<Html>
<head>
<meta http-equiv=”Content-Type” content=”text/Html; charset=gb2312″>
<title>AJax 客戶端</title>
<script language=”Javascript”>
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);
}
}
</script>
</head>
<body>
<body>
<form name=”form1″ action=”" method=”post”>
用戶名：<input type=”text” name=”username” value=”">
<input type=”button” name=”check” value=”惟一性檢查” onClick=”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對象實例，然後很據對象的狀態觸發事件處理函數，對返回的信息進行處理。一切控制邏輯都是用Javascript腳本來書寫的，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框架已經能工作了，為什麼還有那麼多的框架呢？
隨著頁面的復雜，可能需要書寫大量的Javascript腳本來對頁面中的DOM對象進行控制，工作量和復雜度會大大增加。AJax編程框架通常利用面向對象的方法，對一些基本的對象和行為及其復雜性進行了合理的封裝，建造了一套有自己特色的類庫，並且考慮了效率和可擴充性等優點。我們在開發時，可以使用較少的、更清晰的代碼，完成自己的工作。也使程序員有更多的時間和精力考慮業務邏輯本身，而不是與一堆腳本糾纏在一起。
框架都是與後台腳本相關的。通過後台腳本編程，我們可以不必書寫大量的Javascript腳本就能構建浏覽器兼容的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
//生成必要的JavaScript
$xAJax->printJavascript('../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>
<script type="text/Javascript">
<!--//提交表單
function submitSignup()
{
xAJax.$('submitButton').disabled=true;
xAJax.$('submitButton').value="驗證中...";
xajax_processForm(xAJax.getFormValues("signupForm"));
return false;
}
//-->
</script>
</head>
<body>
<form id="signupForm" action="Javascript:void(null);" onsubmit="submitSignup();">
用戶名：<input type="text" name="username" value="">
<input type="button" name="check" value="Check Only one" onClick="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等相關類庫的文件，這個文件裡還包含了大量的Javascript腳本文件和其他的常數定義等。Xajax類有一條自己的屬性和方法，接管和封裝了原始的AJax的行為和方法，用於處理用戶的事件和頁面文檔對象的屬性和外觀。
Ajax框架有它自己的好處，但是，目前由於AJax框架太多，各有各的優點和缺點，特別是對PHP語言，我們很難在眾多的框架中選中一個最適合我們自己的項目的框架。框架太多加大了交流的成本。框架本身在降低了代碼復雜度的同時，也帶來了學習的成本。不像.Net，背靠財大氣粗的公司，就一套程序庫，一套通用的IDE，熟練一門語言(比如C#)，就可以開發Web和桌面應用。
最後還要注意一下，Ajax並不是萬金油，任何項目都想用一下。AJax目前大多數應用在數據校驗等應用上，在項目中用的時候請慎重考慮。