<script src="http://wz.csdn.net/javascripts/vote.js" type="text/javascript"></script>白話 Ajax 及其入門基礎(1)
一、白話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
%>
做了這樣的改變後，在瀏覽器端，用戶看到的效果是一模一樣的。
