輕松掌握AJAX(jQuery)異步通信
上篇博客談了AJAX,下面再說說它的優(yōu)缺點,我們知道不管是什么技術(shù)一般都是因為有它的利用價值才出現(xiàn)的,也就是它們都是有優(yōu)點的,而有老句話說的是“是藥三分毒”,技術(shù)也一樣,什么樣的技術(shù)一般也都會有它的缺陷的。項目中只要是它的優(yōu)點大于它的缺點我們就會去使用它。AJAX的缺點相對于它的優(yōu)點來說基本上可以忽略,因為它的優(yōu)點真的是很優(yōu)秀。
AJAX優(yōu)點:
1、 使用異步方式與服務(wù)器通信,不需要打斷用戶正在進行的操作,具有更加迅速的響應(yīng)能力。
2、 可以在不更新整個頁面的前提下維護數(shù)據(jù)(不刷新頁面),給用戶的體驗非常棒。這也是它最大的優(yōu)點。
3、 AJAX的原則是“按需取數(shù)據(jù)”,可以最大程度的減少冗余請求,充分利用了客戶端閑置的處理能力,降低服務(wù)器的負(fù)荷。
AJAX缺點:
1、破壞瀏覽器后退按鈕的正常行為。在動態(tài)更新頁面后,用戶無法回到前一個頁面的狀態(tài),這是因為瀏覽器只能記下歷史記錄中的靜態(tài)頁面。
2、使用JavaScript作Ajax的引擎,JavaScript的兼容性和Debug需要特別注意。
AJAX讓用戶頁面豐富起來,增強用戶體驗.AJAX也是所有Web開發(fā)的必修課.雖然說AJAX技術(shù)并不復(fù)雜,但是實現(xiàn)方式還是會因為每個開發(fā)人員而有所差異??粗绱酥茫遣皇歉杏X使用起來還是不太方便,不太好控制而煩惱呢?不要著急,下面就再介紹一種技術(shù),讓AJAX的異步通信技術(shù)更加方便的應(yīng)用到我們的程序中,那就是Jquery。
jQuery提供一系列AJAX函數(shù)來幫助我們統(tǒng)一這種差異, 并且讓調(diào)用AJAX更加簡單.jQuery提供了幾個用于發(fā)送AJAX請求的函數(shù). 其中最核心的也是最復(fù)雜的是jQuery.ajax(),所有的其他AJAX函數(shù)都是它的一個簡化調(diào)用.當(dāng)我們想要完全控制AJAX時可以使用此方法, 否則還是使用簡化方法如get, post, load等更加方便。下面我們就來逐一認(rèn)識這些個方法。
1. load(url, [data], [callback] )
載入遠(yuǎn)程 HTML 文件代碼并插入至 DOM 中,默認(rèn)使用 GET 方式傳遞,附加參數(shù)時自動轉(zhuǎn)換為 POST 方式。jQuery 1.2 中,可以指定選擇符,來篩選載入的 HTML 文檔,DOM 中將僅插入篩選出的 HTML 代碼。語法形如 "url #some > selector"。
參數(shù):
示例:
描述: 加載 feeds.html 文件內(nèi)容。
jQuery 代碼:
- $("#feeds").load("feeds.html");
2. jQuery.get(url, [data], [callback], [type] )
通過遠(yuǎn)程 HTTP GET 請求載入信息,這是一個簡單的 GET 請求功能以取代復(fù)雜 $.ajax 。請求成功時可調(diào)用回調(diào)函數(shù)。如果需要在出錯時執(zhí)行函數(shù),請使用 $.ajax。
參數(shù):前面的解釋參見1
type (可選)String
返回內(nèi)容格式,xml,html, script, json, text, _default。
示例:
描述: 顯示 test.php 返回值(HTML 或 XML,取決于返回值)。
jQuery 代碼:
- $.get("test.php",function(data){
- alert("Data Loaded: " + data);
- });
描述: 顯示 test.cgi 返回值(HTML 或 XML,取決于返回值),添加一組請求參數(shù)。
jQuery 代碼:
- $.get("test.cgi",{ name: "John", time: "2pm" },
- function(data){
- alert("Data Loaded: " + data);
- });
3. jQuery.getJSON(url, [data], [callback] )
通過 HTTP GET 請求載入 JSON 數(shù)據(jù),在 jQuery 1.2 中,您可以通過使用JSONP 形式的回調(diào)函數(shù)來加載其他網(wǎng)域的JSON數(shù)據(jù),如 "myurl?callback=?"。jQuery 將自動替換 ? 為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。 注意:此行以后的代碼將在這個回調(diào)函數(shù)執(zhí)行前執(zhí)行。
參數(shù):解釋參見1
示例:
描述: 從 test.js 載入 JSON 數(shù)據(jù),附加參數(shù),顯示 JSON 數(shù)據(jù)中一個 name 字段數(shù)據(jù)。
jQuery 代碼:
- $.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){
- alert("JSON Data: " +json.users[3].name);
- });
4. jQuery.getScript(url, [callback] )
通過 HTTP GET 請求載入并執(zhí)行一個 JavaScript 文件,jQuery 1.2 版本之前,getScript 只能調(diào)用同域 JS 文件。 1.2中,您可以跨域調(diào)用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步執(zhí)行腳本。如果通過 getScript 加入腳本,請加入延時函數(shù)。
參數(shù):參見1
示例:
描述:加載并執(zhí)行 test.js ,成功后顯示信息。
jQuery 代碼:
- $.getScript("test.js",function(){
- alert("Script loaded andexecuted.");
- });
5. jQuery.post(url, [data], [callback], [type] )
通過遠(yuǎn)程 HTTP POST 請求載入信息,這是一個簡單的 POST 請求功能以取代復(fù)雜 $.ajax 。請求成功時可調(diào)用回調(diào)函數(shù)。如果需要在出錯時執(zhí)行函數(shù),請使用 $.ajax。
參數(shù):參見2
示例:
描述1:請求 test.php 網(wǎng)頁,忽略返回值
- $.post("test.php");
描述2:請求 test.php 頁面,并一起發(fā)送一些額外的數(shù)據(jù)(同時仍然忽略返回值)
- $.post("test.php",{ name: "John", time: "2pm" } );
描述3:輸出來自請求頁面 test.php 的結(jié)果(HTML 或 XML,取決于所返回的內(nèi)容)
- $.post("test.php",function(data){
- alert("Data Loaded: " + data);
- });
6. jQuery.ajax(options )
通過 HTTP 請求加載遠(yuǎn)程數(shù)據(jù)。jQuery 底層 AJAX 實現(xiàn)。簡單易用的高層實現(xiàn)見 $.get, $.post 等。$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對象。大多數(shù)情況下你無需直接操作該函數(shù),除非你需要操作不常用的選項,以獲得更多的靈活性。
最簡單的情況下,$.ajax()可以不帶任何參數(shù)直接使用。
注意:所有的選項都可以通過 $.ajaxSetup()函數(shù)來全局設(shè)置。
一些參數(shù)介紹請參見:
http://www.cnblogs.com/zengen/archive/2011/03/25/1995761.html
關(guān)于jQuery.ajax百度文庫里介紹的非常全面(還有示例):
http://baike.baidu.com/view/6278307.htm
總結(jié):
各種功能的實現(xiàn)隨著技術(shù)的不斷革新將會變得越來越簡單,我們只需要掌握某些主流技術(shù)的基本原理和學(xué)習(xí)的方法即可,有了一套完整的思想,學(xué)習(xí)什么技術(shù)基本上都一樣,有時候遇到一門新技術(shù)我們可能用兩三天的時間就能明白其大概的框架,參考說明就能將其應(yīng)用到我們的項目中來。
原文鏈接:http://blog.csdn.net/smszhuang168/article/details/7749881
【編輯推薦】
【責(zé)任編輯:張偉 TEL:(010)68476606】