一、白話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
%>
做了這樣的改變後，在瀏覽器端，使用者看到的效果是一模一樣的。
張慶（網眼）http://blog.why100000.com
2010-1-22
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
