文章來自： http://www.zuoyefeng.com/html/2008-01/590.htm ?

十分鐘教你學(xué)會AJAX，這絕不是夸張！有時候，我十分憎恨一些圖書、教程，講了好幾十頁，說了一大堆，結(jié)果沒有簡單有效的說出，這個東西怎么用，何時用！

實際上，對于IT行業(yè)，新技術(shù)新思想，此起彼伏，并且有些技術(shù)常常曇花一現(xiàn)，不了了之！常常這些技術(shù)名異效同，加之有些書籍和教程如法炮制、千篇一律，這都讓 程序 員們累中加累，莫名一處。

我個人認(rèn)為，學(xué)習(xí)一門技術(shù)應(yīng)從兩方面著手：原理、應(yīng)用。

掌握原理，是理解這門技術(shù)，以致把它應(yīng)用到極點的重要根基。 掌握應(yīng)用，是我們的目標(biāo)，所謂學(xué)以致用，概此理也。

下面我開始說說AJAX。

1、什么是AJAX？ AJAX是Ajax(Asynchronous JavaScript. and XML)的簡稱，它并不是什么新技術(shù)，是現(xiàn)有技術(shù)的組合，實現(xiàn)了客戶端（瀏覽器）與服務(wù)器的異步通信。也就是，我們通常所說的，不刷新頁面。也有人稱之為富客戶端技術(shù)。

假如，你有過開發(fā)體驗，在會員注冊或者 添加 軟件 用戶時，往往要驗證這個用戶名是否重復(fù)，傳統(tǒng)上的實現(xiàn)，要提交整個表單，在服務(wù)器端判斷這個用戶是否存在，然后將信息返回客戶端。這個 過程 ，需要刷新頁面，讓用戶的眼前空白一段時間，而使用ajax，就可以解決這樣的問題， 網(wǎng)頁 不需要刷新，但仍完成了在服務(wù)器端的驗證。

就這是ajax。

2、AJAX的原理？ 實際上，AJAX的原理很簡單。打個比方，你要買張車票，你要自己去車站（這個過程好比瀏覽器提交信息給服務(wù)器的過程），買好票你再回來（服務(wù)器把信息發(fā)回瀏覽器），這一去一回，肯定要占用時間啊，也會耽誤你其它的 工作 。使用了AJAX就不同了，現(xiàn)代你找個代理，讓小張幫你去買票，而你只需要坐在辦公室，看書閱報就OK了。

實際上，AJAX就是這樣一個簡單的原理。AJAX實際客戶端不刷新的原理，就是通過Javascript中的 XmlHttpRequest 這個對象來代理客戶端和服務(wù)器的通信過程，包括了GET和POST，這樣就不需要再提交表單了，也不需要重置網(wǎng)址了，所以也就不刷新了。

“代理”的思想，在軟件業(yè)中，用的是很廣的。生活中也是很常見的。你像Java的虛擬機(jī)，.Net的運行時，實際上，就是通過一個代理，來實現(xiàn)了跨平臺、跨語言的功能；生活 中的 中介、代辦不也就是代理之思維。

所以，AJAX不是 改變 了客戶端與服務(wù)器通信這一現(xiàn)狀，只是通過Javascript（客戶端腳本語言）客戶端（瀏覽器）將要發(fā)送的數(shù)據(jù)準(zhǔn)備好，然后通過XmlHttpRequest這個代理發(fā)送給服務(wù)器，待服務(wù)器把信息返回給客戶端時，Javascript再將數(shù)據(jù)從代理者XmlHttpRequest中讀出來，就是這么點事。 3、花多久AJAX？ 我個人認(rèn)為，如果你不是專業(yè)從事AJAX的研發(fā)與應(yīng)用的人員，三天時間足矣！超過三天就是浪費時間了！希望本教程，可以讓你十分鐘搞定AJAX。

我個人認(rèn)為，不久之后，瀏覽器中會內(nèi)置異步通信功能，所以那時AJAX也就沒有意義了。所以，對于AJAX技術(shù)，我們掌握其原理，能應(yīng)用到項目中去就可以了。整個web開發(fā)，無非也就是一個網(wǎng)絡(luò)通信Socket！所以，不是瀏覽器的廠商，沒必要過于研究AJAX，因為那沒有意義！

4、AJAX的使用？

通過對AJAX的原理了解，我們知道，AJAX實際就是寫Javascript，寫Javascript通過XmlHttpRequest來發(fā)送、接收數(shù)據(jù)，而不是使用表單了。

所以，能發(fā)送，能接受，這就是使用AJAX的責(zé)任所在。國際上，有許多AJAX框架，但他們幾乎都有一個特點，學(xué)習(xí)麻煩，并且和語言相關(guān)，儲如.net2.0集成的Ajax框架， php 的xajax框架等。針對這一情況，我寫了一個純javascript的ajax框架，這個ajax框架是我為jwork for php而定做的，但它同時也支持asp、net、jsp等所有web開發(fā)語言，因為它是純js的。

我們知道，web開發(fā)主要是get（一般為網(wǎng)址請求）、post(一般為提交表單)方式，jwork框架中的ajax也是如此：

jget(url,output) Url：表示你要提交請求的網(wǎng)址。網(wǎng)址中可帶一個或多個參數(shù)。 Output：表示服務(wù)器回調(diào)的值顯示的位置。一般為input或div標(biāo)簽的id名。

jpost(url,input,output) jpost有三處參數(shù)： Url：表示你要提交請求的網(wǎng)址。網(wǎng)址中可帶一個或多個參數(shù)。 Input：表示通過表單POST方式提交的數(shù)據(jù)。形式為：name=ccopen&id=20 Output：表示服務(wù)器回調(diào)的值顯示的位置。一般為input或div標(biāo)簽的id名。

5、示例用戶名是否重復(fù)驗證 注冊頁面：reg.html

<!-- 引入jwork的ajax框架 --> <script. language="javascript" src="libs/ajax.js"></script> <!--?提示信息 --> <div id="err" /> <form. action="reg2save.php" name="form1" method="POST"> ?[ 用戶注冊?] <hr> ?用戶名： <input name="username" nblur="checkname()" ><br> 密碼：<input name="password" ><br> 性別<input type="radio" value="男" name="sex" />男 ? <input type="radio" name="sex" value="女" />女<br> <input type="submit" value="提交" name="sub" /> </form> <script. language="javascript"> ?function checkname() ?{ ? //調(diào)用ajax? ???var username=document.getElementById("username"); ?? jget("checkname.php?username="+username.value,"err"); ??} </script> 處理頁面：checkname.php <?php header('Content-Type:text/html;charset=GBK'); //查詢數(shù)據(jù)庫，判斷是否重復(fù)，如果重復(fù)，打印下面這句話 $username=$_REQUEST["username"];

if($username=="jyh") echo "<font color=red>用戶名重復(fù)</font>"; else echo "<font color=red>用戶名可用</font>"; ?>

O了，AJAX就是如此簡單！ 關(guān)于開發(fā)AJAX的常見關(guān)題，以及具體示例，本次時間有限，待我下回分解