Ajax在改變著web應用，並且帶來了一種前所未有的傳統型應用程式之外的震撼。但是，在這些宣傳的背後我們應該意識到，其實ajax不過是——(X)HTML,Javascript以及XML,沒什麼新鮮的.在這個教程中,我將給你展示如何讓簡單的添加ajax到你的應用中去,並且教你如何使用一個流行的javascript庫Jquey進行ajax開發.
1. 什麼是ajax
你以前可能聽說過ajax,或者至少用過ajax的應用--比如Gmail.簡單的說,ajax就是使用javascript來非同步地處理資料,而不是一下子重載整個頁面.SitePoint上有個教程a good introduction to Ajax.另外,ajax這個詞出自Jesse James Garrett的這篇著名的文章.
不幸的是,關於ajax深入的實踐教程可以說少之又少,還有就是ajax中使用的XMLHttpRequest 類對初學網頁開發的人來說有很大的難度.不過慶幸的是有一大批javascript庫相繼出現,為實現ajax提供了簡單的方法.我們今天要用到的Jquery就是其中之一.
2. 什麼是JQuery
Jquery是一個成熟的Javascript庫,它提供許多其他庫沒有的特性.當然也得承認,它有19K之大,不想moo.fx那樣只有3KB之輕.你可以在這裡看到對許多javascript庫效能以及其他方面的比較資料.
3. 先驗知識
要學習此教程,你需要有基本的javascript只是,如果你懂c風格的語言,那麼你可以對javascript很快上手.其實不過是大括弧,函式宣告以及可有可無的行末分號(對Jquery來說;為必須).如果你想學習javascript,可以看這個教程. 另外,既然我們討論的是web應用,基本的html只是自然是必不可少的.
4. Jquery 101
讓我們簡單瀏覽一下jQuery.要想使用jQuery,首先你必須下載這個庫.下載地址在這裡(目前版本1.1.2).jQuery的文法非常簡單:找到,然後做.我們從文檔中選擇元素則使用$().這個符號就相當於 document.getElementById(),不過除了支援ID外,它還支援css選擇符以及一些XPath選擇符. 而且,它可以返回一個元素的數組.好,也許舉個例子可以更好的說明$()的功能.
我們想使用函數來操作我們的選擇符.比如,把"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的函數不需要對象,也就是說獨立工作,許多ajax相關的函數都這樣.比如,我們將會使用的post函數,調用方式為$.post(parameters). 更多jQuery函數資訊可以來online documentation 或者 visualjquery.com.
5. 樣本一:我們的第一個ajax程式
作為一個例子,我們將做一個互動概念產生器.簡單的說就是讓我們從列表中隨機播放兩個選項,然後組合成一個片語.這個例子中我們將使用web2.0特性的詞語(像'Mashup', 'Folksonomy', 'Media'等等),通常情況下我們從文字檔中獲得這些選項.為節省使用者用javascript下載每一個組合(或者至少每一個元素)的時間,我們將在伺服器端快速產生它,並且使用jQuery在用戶端擷取到它.jQuery可以很好的和javascript結合使用,所以你將發現在代碼中使用它將使工作變得十分容易.
伺服器端代碼(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總是為同一個地址建立緩衝,甚至頁面內容有變化時也是.很明顯,這對我們的例子很不利,因為我們在每次載入的時候重建一句話.我們也可以使用jQuery產生一個隨機數加到地址的後邊,不過這不像在伺服器端這樣處理比較簡單.[譯者著:其實作者在這裡提供了ajax和IE cache衝突的兩種解決方案.]
用戶端代碼(html)
可以開始編寫前端代碼了,然後我們就可以把ajax加進去了.我們需要做的僅僅是加一個按鈕,好讓使用者點擊一下獲得一句新的語句,還有一個div標籤,好讓我們在從伺服器端接收到語句的時候顯示在div裡面.我們將使用jQuery選中這個div以及載入返回的那句話,我們可以使用div的id來引用它.如果需要,你可以載入這句話到不同的元素標籤中,這可能需要使用class了.不過這裡,我們僅僅需要使用id就夠了.此頁面body標籤中的內容為:
<input type="submit" id="generate" value="Generate!">
<div id="quote"></div>
一般說來,我們需要為這個按鈕(就是這個id為generate的input)加上一個冗長的onSubmit 事件. 有時,我們用onSumit事件調用一個Javascript函數. 但是在jQuery裡面,我們設定不需要修改任何html代碼,我們可以簡單的實現行為(事件處理)和結構(html代碼)的分離.
用戶端代碼(jQuery)
終於該使用jQuery把我們的後台和前台結合到一起了.前面我提到我們可以使用jQuery從DOM中選擇元素.首先,我們應該ixuanze這個按鈕,並給它一個onClick事件響應.在這個事件代碼中,我們可以選中div並且載入內容.下面是click事件響應的寫法:
$("element expression").click(function(){
// Code goes here
});
可能你已經知道,在CSS裡選擇一個元素的時候我們使用#來使用元素的id屬性. 你可以在jQuery裡使用同樣的文法.因此,要選擇那個按鈕,我們可以使用#generate. 注意,這種文法可以讓我們把事件處理函數定義成匿名的.
Mark Wubben's JavaScript Terminology page 提供了詳細的關於匿名函數的解釋,有興趣可以參考.
我們將要使用jQuery中一個比較進階的ajax函數:load(). 假設我們的代碼儲存為script.php.我們這樣把它和我們的用戶端整合起來:
$("#generate").click(function(){
$("#quote").load("script.php");
});
只有:3行代碼!現在我們已經做了一個完整的ajax隨機語句產生器了!不錯!
問題是javascript代碼並不是在一個瀏覽器載入完就執行的函數內.這樣的話,這段代碼就會試圖去關聯一個可能還沒有被載入的元素.一般情況下我們使用window.load來處理這個問題,不過這種方法的局限性在於,window.load只在所有的東西(圖片及其它)被載入完成後載入一次.我們對等待這些圖片的載入可能毫沒有興趣--我們只是需要去獲得DOM中的元素罷了.
幸運的是,jQuery有一個 $(document).ready()函數,如其名,它在DOM被載入完之後就被執行.
完整的代碼
下面是完整的代碼,使用 $(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>
代碼可以在這裡下載,注意你的jquery需要儲存在php檔案的同目錄,並且名為 jquery.js .現在你已經熟悉jQuery了,讓我們做些更複雜的:表單元素和XML處理,這才是真正的ajax!
當前1/3頁
123下一頁閱讀全文
