比較簡單的jquery教程 Easy Ajax with jQuery 中文版全集第1/3頁

更新時間：2007年11月30日 13:24:41 作者：

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

1. 什么是ajax

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

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

2. 什么是JQuery

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

3. 先驗知識

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

4. Jquery 101

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

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

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

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

復制代碼代碼如下:

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

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

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

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

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

復制代碼代碼如下:

<?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 頭選項是因為IE總是為同一個地址建立緩存,甚至頁面內(nèi)容有變化時也是.很明顯,這對我們的例子很不利,因為我們在每次加載的時候重新生成一句話.我們也可以使用jQuery生成一個隨機數(shù)加到地址的后邊,不過這不像在服務器端這樣處理比較簡單.[譯者著:其實作者在這里提供了ajax和IE cache沖突的兩種解決方案.]

客戶端代碼(html)

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

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

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

客戶端代碼(jQuery)

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

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

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

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

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

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

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

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

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

完整的代碼

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

復制代碼代碼如下:

<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> 