使用jQuery簡化Ajax開發——Ajax開發入門[1]
日期:2008-07-11 作者:喜騰小二 來源:PHPChina
jQuery是一個可以簡化 JavaScript™以及AJAX（Asynchronous JavaScript + XML，非同步Javascript和XML）編程的Javascript庫。不同於其他的Javascript庫，jQuery有他自己的哲學，使妳可以很簡單的編寫程式碼。這篇文章就會帶領妳見識一下jQuery的哲學，探討一下他的特性以及功能，並且會做一些ajax的範例，以及如何使用plug- in（外掛程式）來延伸jQuery。
1. 什麼是jQuery？
jQuery是個很優秀的Javascript庫，它誕生於2006年，出自John Resig之手。不管妳是一個javascript新手，但是卻想嘗試一下DOM（Document Object Model）以及Ajax的繁雜，抑或妳是個javascript專家級人物，但是已經厭倦了反覆的重複那無味的DOM以及Ajax指令檔，jQuery都將是妳的不二選擇。
jQuery會說明妳保持程式碼的簡單和簡潔。妳不必再去寫一大堆重複的迴圈或者是DOM調用指令檔，使用jQuery，妳將很快找到關鍵點，並且可以以最少的程式碼表達妳的思想。
jQuery的哲學其實很單一：簡單、可重用。當妳理解並且認同這種思想的時候，妳就可以開始體會一下使用jQuery能讓妳的編程變得多麼輕鬆愉快了！
2. 一些簡單概念
這裡是個簡單的例子，嚮妳展示jQuery如何影響妳編寫的程式碼。做的事情其實很簡單，比如對页面上某一區網域內的所有連結都新增一個click回應事件，妳可以使用一般的Javascript以及DOM來寫，程式碼見Listing1：
Listing 1. DOM scripting without jQuery
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
var link = links.item(i);
link.onclick = function() {
return confirm('You are going to visit: ' + this.href);
};
}
如果使用jQuery的話實現如下：
Listing 2. DOM scripting with jQuery
$('#external_links a').click(function() {
return confirm('You are going to visit: ' + this.href);
});
很驚訝，是吧？使用jQuery的話，妳可以很快找到關鍵點，並且隻需要表達妳需要表達的，
而不需要羅裡羅嗦。不需要對這些元素進行迴圈，click()函式可以處理好這一切。而且妳不要謝太多的操作DOM的程式碼，
妳需要的僅僅是使用很少的字元定義妳要找的那個元素。
來看一下這段程式碼是如何工作的，有點小技巧。首先，看到$()函式--jQuery裡最有用的最強大的函式.大部分情況下,
妳使用這個函式從文檔中選擇元素.在這個例子中,使用這個函式傳遞帶有一些級聯樣式表(Cascading Style Sheets,CSS)
語法的字串,jQuery可以很方便的找到這個元素.
如果妳懂一點基本的CSS選擇符的隻是,我想這個語法應該看起來相當熟悉.在Listing2中,#external_links用來尋找帶有id為
external_links的元素.接下來的空格表示jQuery要找到在#external_links元素內的所有的元素.用口語開表達的話有點費勁--
用DOM指令檔來寫也挺麻煩,不過,在CSS裡,沒有比這個更簡單的了.$()函式返回一個包含與css選擇符比對的所有元素的一個jQuery物件. jQuery物件的概念就像是陣列,但是它可能含有許多jQuery函式. 舉例來說,妳可以調用click函式來繫結一個click事件回應到jQuery物件中的每個元素上.
妳還可以嚮$()函式傳遞一個元素或者是元素的陣列,它將把所有的元素打包成一個jQuery物件.妳可能想要把這一特性應用到象視窗物件上麵.舉例來說, 妳有可能使用此函式來載入事件,像這樣:
window.onload = function() {
// do this stuff when the page is done loading
};如果使用jQuery的話,妳可以這樣寫:
$(window).load(function() {
// run this when the whole page has been downloaded
});
如妳所知,等待一個視窗的載入是異常痛苦的,因為必須載入整個页面,包括页面上所有的圖片. 某些情況下,妳需要首先載入圖片,
但是大部分時候,妳可能隻需要看到一下超文字的標記(HTML).jQuery透過在文檔上建立一個很特殊的事件ready來解決這個問題,
使用方法如下:
$(document).ready(function() {
// do this stuff when the HTML is all ready
});
這段程式碼建立一個document元素的jQuery物件, 然後當html DOM文檔準備完畢後調用此實例. 妳可以無限次的調用這個函式. 另外,
在真正的jQuery風格程式碼中,這個函式還有一個縮寫形式.簡單的傳遞一個函式給$()函式:
$(function() {
// run this when the HTML is done downloading
});到現在位置,我已經嚮妳展示了三種不同的使用$()函式的方法.第四種方式, 妳可以使用一個字串建立一個元素. 結果是一個包含此元素的jQuery物件. Listing3展示了一個增加一段到页面上的例子:
Listing 3. Creating and appending a simple paragraph
$('')
.html('Hey World!')
.css('background', 'yellow')
.appendTo("body");
正如妳從上麵的例子中看到的一樣,jQuery還有一個很強大的功能就是方法鏈(method chaining), 每次妳對一個jQuery物件調用一個方法,這個方法將同樣返回一個jQuery物件. 這就是說如果妳需要對一個jQuery物件調用多個方法的話, 妳可以不必重複寫css選擇符,可以像這樣:
$('#message').css('background', 'yellow').html('Hello!').show();
3.jQuery讓Ajax變得異常簡單
使用jQuery,Ajax恐怕不能變得再簡單了. jQuery有一係列的函式,可以使簡單的事情變得真正簡單,讓復雜的事情也能變得盡可能
的簡單.
Ajax的一個一般用法就是載入一段html程式碼到页面上的某一區網域. 要實現這個,妳只要簡單的選中這個元素,然後使用load()函式.
下麵是個例子,用來更新一些統計資訊.
$('#stats').load('stats.html');通常,妳可能需要嚮伺服器端的页面傳遞一些參數. 妳可能猜到了, 使用jQuery來實現的話會十分簡單. 妳可以選擇使用$.post()或者$.get(), 當然要根據妳的俱體需要. 如果需要, 妳可以傳遞一個可選的資料物件和一個回呼函式. Listing4是一個發送資料以及使用回呼函式的簡單例子:
Listing 4. Sending data to a page with Ajax
$.post('save.cgi', {
text: 'my string',
number: 23
}, function() {
alert('Your data has been saved.');
});
如果妳真的想要一些復雜的Ajax程式碼,那就是用$.ajax()函式. 妳可以指定資料類型為xml, html, script或者json, jQuery 會為妳自動準備好結果一遍妳的回呼函式能夠立即使用這些資料. 妳還可以設定 beforeSend, error, success, 以及 complete 回呼函式來給使用者一些ajax體驗的更多提示資訊. 另外,還有一些參數,可以讓妳設定ajax請求的逾時時間,或者一個页面的"最後變更"狀態. Listing5展示了一個獲取xml文檔並使用我上麵提到的一些參數的簡單例子:
Listing 5. Complex Ajax made simple with $.ajax()
$.ajax({
url: 'document.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){
alert('Error loading XML document');
},
success: function(xml){
// do something with xml
}
});
當妳成功的獲得xml回饋的時候, 妳可以使用jQuery來遍歷xml文檔,就像妳操作html的方式一樣. 這使操作一個xml檔案以及整合內容到页面上變得十分的簡單. Listing6 延伸了success函式, 根據xml文檔裡的每個- 在页面上增加一個了list(清單)條目.
Listing 6. Working with XML using jQuery
success: function(xml){
$(xml).find('item').each(function(){
var item_text = $(this).text();
$('
')
.html(item_text)
.appendTo('ol');
});
}
Copyright 2004 - 2009 SYSTN.COM