Ajax在改變著web應(yīng)用，并且?guī)砹艘环N前所未有的桌面應(yīng)用程序之外的震撼。但是，在這些宣傳的背后我們應(yīng)該意識到，其實ajax不過是——(X)HTML,Javascript以及XML,沒什么新鮮的.在這個教程中,我將給你展示如何讓簡單的添加ajax到你的應(yīng)用中去,并且教你如何使用一個流行的javascript庫Jquey進行ajax開發(fā).

1. 什么是ajax

你以前可能聽說過ajax,或者至少用過ajax的應(yīng)用--比如Gmail.簡單的說,ajax就是使用javascript來異步地處理數(shù)據(jù),而不是一下子重載整個頁面.SitePoint上有個教程a good introduction to Ajax.另外,ajax這個詞出自Jesse James Garrett的這篇著名的文章.

不幸的是,關(guān)于ajax深入的實踐教程可以說少之又少,還有就是ajax中使用的XMLHttpRequest 類對初學(xué)網(wǎng)頁開發(fā)的人來說有很大的難度.不過慶幸的是有一大批javascript庫相繼出現(xiàn),為實現(xiàn)ajax提供了簡單的方法.我們今天要用到的Jquery就是其中之一.

2. 什么是JQuery

Jquery是一個成熟的Javascript庫,它提供許多其他庫沒有的特性.當(dāng)然也得承認(rèn),它有19K之大,不想moo.fx那樣只有3KB之輕.你可以在這里看到對許多javascript庫性能以及其他方面的比較數(shù)據(jù).

3. 先驗知識

要學(xué)習(xí)此教程,你需要有基本的javascript只是,如果你懂c風(fēng)格的語言,那么你可以對javascript很快上手.其實不過是大括號,函數(shù)聲明以及可有可無的行末分號(對Jquery來說;為必須).如果你想學(xué)習(xí)javascript,可以看這個教程. 另外,既然我們討論的是web應(yīng)用,基本的html只是自然是必不可少的.

4. Jquery 101

讓我們簡單瀏覽一下jQuery.要想使用jQuery,首先你必須下載這個庫.下載地址在這里(目前版本1.1.2).jQuery的語法非常簡單:找到,然后做.我們從文檔中選擇元素則使用$().這個符號就相當(dāng)于 document.getElementById(),不過除了支持ID外,它還支持css選擇符以及一些XPath選擇符. 而且,它可以返回一個元素的數(shù)組.好,也許舉個例子可以更好的說明$()的功能.

我們想使用函數(shù)來操作我們的選擇符.比如,把"Hello World!" 添加到每個class為foo的div上去,然后設(shè)置顏色為紅色,我們可以這樣寫代碼:

$("div.foo").append("Hello World!").css("color","red");

很簡單啊!一般情況下,這需要兩行代碼來完成:

代碼如下:
$("div.foo").append("Hello World!");  
$("div.foo").css("color","red"); 

jQuery的鏈接方法可以是允許你連寫你的代碼,這點別的庫恐怕沒有.有很多jQuery的函數(shù)不需要對象,也就是說獨立工作,許多ajax相關(guān)的函數(shù)都這樣.比如,我們將會使用的post函數(shù),調(diào)用方式為$.post(parameters). 更多jQuery函數(shù)信息可以來online documentation 或者 visualjquery.com.

5. 示例一:我們的第一個ajax程序