| 導購 | 订阅 | 在线投稿
分享
 
 
 

使用jQuery簡化Ajax開發—Ajax開發入門[1]

來源:互聯網  2008-12-22 08:09:16  評論

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元素內的所有的<a>元素.用口語開表達的話有點費勁--用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

$('<p></p>').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文檔裏的每個<item>在頁面上增加一個了list(列表)條目.

Listing 6. Working with XML using jQuery

success: function(xml){$(xml).find('item').each(function(){var item_text = $(this).text();$('<li></li>').html(item_text).appendTo('ol');});}

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元素內的所有的<a>元素.用口語開表達的話有點費勁--用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 $('<p></p>').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文檔裏的每個<item>在頁面上增加一個了list(列表)條目. Listing 6. Working with XML using jQuery success: function(xml){$(xml).find('item').each(function(){var item_text = $(this).text();$('<li></li>').html(item_text).appendTo('ol');});}
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有