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

1. 什么是ajax

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

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

2. 什么是JQuery

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

3. 先驗(yàn)知識(shí)

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

4. Jquery 101

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

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

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

很簡(jiǎn)單啊!一般情況下,這需要兩行代碼來(lái)完成:

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

5. 示例一:我們的第一個(gè)ajax程序

作為一個(gè)例子,我們將做一個(gè)交互概念生成器.簡(jiǎn)單的說(shuō)就是讓我們從列表中隨機(jī)選擇兩個(gè)選項(xiàng),然后組合成一個(gè)詞組.這個(gè)例子中我們將使用web2.0特性的詞語(yǔ)(像'Mashup', 'Folksonomy', 'Media'等等),通常情況下我們從文本文件中獲得這些選項(xiàng).為節(jié)省用戶(hù)用javascript下載每一個(gè)組合(或者至少每一個(gè)元素)的時(shí)間,我們將在服務(wù)器端快速生成它,并且使用jQuery在客戶(hù)端獲取到它.jQuery可以很好的和javascript結(jié)合使用,所以你將發(fā)現(xiàn)在代碼中使用它將使工作變得十分容易.

服務(wù)器端代碼(php):
簡(jiǎn)單起見(jiàn),我們使用最簡(jiǎn)單的代碼來(lái)做我們的概念生成器.不要擔(dān)心他是如何工作的,注意看它是干什么的:輸出一句話.注意,這段代碼沒(méi)有輸出xml,他只是輸入一個(gè)純文本:


這里,我們使用 Cache-Control 頭選項(xiàng)是因?yàn)镮E總是為同一個(gè)地址建立緩存,甚至頁(yè)面內(nèi)容有變化時(shí)也是.很明顯,這對(duì)我們的例子很不利,因?yàn)槲覀冊(cè)诿看渭虞d的時(shí)候重新生成一句話.我們也可以使用jQuery生成一個(gè)隨機(jī)數(shù)加到地址的后邊,不過(guò)這不像在服務(wù)器端這樣處理比較簡(jiǎn)單.[譯者著:其實(shí)作者在這里提供了ajax和IE cache沖突的兩種解決方案.]

客戶(hù)端代碼(html)

可以開(kāi)始編寫(xiě)前端代碼了,然后我們就可以把a(bǔ)jax加進(jìn)去了.我們需要做的僅僅是加一個(gè)按鈕,好讓用戶(hù)點(diǎn)擊一下獲得一句新的語(yǔ)句,還有一個(gè)div標(biāo)簽,好讓我們?cè)趶姆?wù)器端接收到語(yǔ)句的時(shí)候顯示在div里面.我們將使用jQuery選中這個(gè)div以及加載返回的那句話,我們可以使用div的id來(lái)引用它.如果需要,你可以加載這句話到不同的元素標(biāo)簽中,這可能需要使用class了.不過(guò)這里,我們僅僅需要使用id就夠了.此頁(yè)面body標(biāo)簽中的內(nèi)容為:

<input type="submit" id="generate" value="Generate!"> 
<div id="quote"></div>

一般說(shuō)來(lái),我們需要為這個(gè)按鈕(就是這個(gè)id為generate的input)加上一個(gè)冗長(zhǎng)的onSubmit 事件. 有時(shí),我們用onSumit事件調(diào)用一個(gè)Javascript函數(shù). 但是在jQuery里面,我們?cè)O(shè)置不需要修改任何html代碼,我們可以簡(jiǎn)單的實(shí)現(xiàn)行為(事件處理)和結(jié)構(gòu)(html代碼)的分離.

客戶(hù)端代碼(jQuery)

終于該使用jQuery把我們的后臺(tái)和前臺(tái)結(jié)合到一起了.前面我提到我們可以使用jQuery從DOM中選擇元素.首先,我們應(yīng)該ixuanze這個(gè)按鈕,并給它一個(gè)onClick事件響應(yīng).在這個(gè)事件代碼中,我們可以選中div并且載入內(nèi)容.下面是click事件響應(yīng)的寫(xiě)法:

$("element expression").click(function(){ 
  // Code goes here 
});

可能你已經(jīng)知道,在CSS里選擇一個(gè)元素的時(shí)候我們使用#來(lái)使用元素的id屬性. 你可以在jQuery里使用同樣的語(yǔ)法.因此,要選擇那個(gè)按鈕,我們可以使用#generate. 注意,這種語(yǔ)法可以讓我們把事件處理函數(shù)定義成匿名的.

Mark Wubben's JavaScript Terminology page 提供了詳細(xì)的關(guān)于匿名函數(shù)的解釋,有興趣可以參考.

我們將要使用jQuery中一個(gè)比較高級(jí)的ajax函數(shù):load(). 假設(shè)我們的代碼保存為script.php.我們這樣把它和我們的客戶(hù)端整合起來(lái):

$("#generate").click(function(){ 
  $("#quote").load("script.php"); 
});

只有:3行代碼!現(xiàn)在我們已經(jīng)做了一個(gè)完整的ajax隨機(jī)語(yǔ)句生成器了!不錯(cuò)!

問(wèn)題是javascript代碼并不是在一個(gè)瀏覽器加載完就執(zhí)行的函數(shù)內(nèi).這樣的話,這段代碼就會(huì)試圖去關(guān)聯(lián)一個(gè)可能還沒(méi)有被加載的元素.一般情況下我們使用window.load來(lái)處理這個(gè)問(wèn)題,不過(guò)這種方法的局限性在于,window.load只在所有的東西(圖片及其它)被加載完成后加載一次.我們對(duì)等待這些圖片的加載可能毫無(wú)興趣--我們只是需要去獲得DOM中的元素罷了.

幸運(yùn)的是,jQuery有一個(gè) $(document).ready()函數(shù),如其名,它在DOM被加載完之后就被執(zhí)行.

完整的代碼

下面是完整的代碼,使用 $(document).ready()以及一些簡(jiǎn)單的html和css:



代碼可以在這里下載,注意你的jquery需要保存在php文件的同目錄,并且名為 jquery.js .現(xiàn)在你已經(jīng)熟悉jQuery了,讓我們做些更復(fù)雜的:表單元素和XML處理,這才是真正的ajax!

最新評(píng)論