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

1. 什么是ajax

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

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

2. 什么是JQuery

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

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

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

4. Jquery 101

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

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

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

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

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

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

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

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

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

復(fù)制代碼 代碼如下:
<?php  
header("Cache-Control: no-cache");  
// Ideally, you'd put these in a text file or a database.   
// Put an entry on each line of 'a.txt' and use $prefixes = file("a.txt");  
// You can do the same with a separate file for $suffixes.  
$prefixes = array('Mashup','2.0','Tagging','Folksonomy');  
$suffixes = array('Web','Push','Media','GUI');  
// This selects a random element of each array on the fly  
echo $prefixes[rand(0,count($prefixes)-1)] . " is the new "   
   . $suffixes[rand(0,count($prefixes)-1)];  
// Example output: Tagging is the new Media  
?> 

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

客戶端代碼(html)

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

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

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

客戶端代碼(jQuery)

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

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

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

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

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

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

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

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

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

完整的代碼

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

復(fù)制代碼 代碼如下:
<html>  
<head>  
  <title>Ajax with jQuery Example</title>  
  <script type="text/JavaScript" src="jquery.js"></script>  
  <script type="text/JavaScript">  
  $(document).ready(function(){  
    $("#generate").click(function(){  
      $("#quote p").load("script.php");  
    });  
  });  
  </script>  
<style type="text/css">  
    #wrapper {  
      width: 240px;  
      height: 80px;  
      margin: auto;  
      padding: 10px;  
      margin-top: 10px;  
      border: 1px solid black;  
      text-align: center;  
    }  
  </style>  
</head>  
<body>  
  <div id="wrapper">  
    <div id="quote"><p> </p></div>  
    <input type="submit" id="generate" value="Generate!">  
  </div>  
</body>  
</html> 


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

JavaScript技術(shù)：比較簡單的jquery教程 Easy Ajax with jQuery 中文版全集第1/3頁，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。