輕松掌握AJAX（jQuery）異步通信

作者：smszhuang168 2012-07-17 10:54:49

我們只需要掌握某些主流技術(shù)的基本原理和學(xué)習(xí)的方法即可，有了一套完整的思想，學(xué)習(xí)什么技術(shù)基本上都一樣，有時(shí)候遇到一門新技術(shù)我們可能用兩三天的時(shí)間就能明白其大概的框架，參考說明就能將其應(yīng)用到我們的項(xiàng)目中來。

上篇博客談了AJAX，下面再說說它的優(yōu)缺點(diǎn)，我們知道不管是什么技術(shù)一般都是因?yàn)橛兴睦脙r(jià)值才出現(xiàn)的，也就是它們都是有優(yōu)點(diǎn)的，而有老句話說的是“是藥三分毒”，技術(shù)也一樣，什么樣的技術(shù)一般也都會(huì)有它的缺陷的。項(xiàng)目中只要是它的優(yōu)點(diǎn)大于它的缺點(diǎn)我們就會(huì)去使用它。AJAX的缺點(diǎn)相對(duì)于它的優(yōu)點(diǎn)來說基本上可以忽略，因?yàn)樗膬?yōu)點(diǎn)真的是很優(yōu)秀。

AJAX優(yōu)點(diǎn)：

1、使用異步方式與服務(wù)器通信，不需要打斷用戶正在進(jìn)行的操作，具有更加迅速的響應(yīng)能力。

2、可以在不更新整個(gè)頁面的前提下維護(hù)數(shù)據(jù)（不刷新頁面），給用戶的體驗(yàn)非常棒。這也是它最大的優(yōu)點(diǎn)。

3、 AJAX的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請(qǐng)求，充分利用了客戶端閑置的處理能力，降低服務(wù)器的負(fù)荷。

AJAX缺點(diǎn)：

1、破壞瀏覽器后退按鈕的正常行為。在動(dòng)態(tài)更新頁面后，用戶無法回到前一個(gè)頁面的狀態(tài)，這是因?yàn)闉g覽器只能記下歷史記錄中的靜態(tài)頁面。

2、使用JavaScript作Ajax的引擎，JavaScript的兼容性和Debug需要特別注意。

AJAX讓用戶頁面豐富起來,增強(qiáng)用戶體驗(yàn).AJAX也是所有Web開發(fā)的必修課.雖然說AJAX技術(shù)并不復(fù)雜,但是實(shí)現(xiàn)方式還是會(huì)因?yàn)槊總€(gè)開發(fā)人員而有所差異。看著它如此之好，是不是感覺使用起來還是不太方便，不太好控制而煩惱呢？不要著急，下面就再介紹一種技術(shù)，讓AJAX的異步通信技術(shù)更加方便的應(yīng)用到我們的程序中，那就是Jquery。

jQuery提供一系列AJAX函數(shù)來幫助我們統(tǒng)一這種差異, 并且讓調(diào)用AJAX更加簡(jiǎn)單.jQuery提供了幾個(gè)用于發(fā)送AJAX請(qǐng)求的函數(shù). 其中最核心的也是最復(fù)雜的是jQuery.ajax()，所有的其他AJAX函數(shù)都是它的一個(gè)簡(jiǎn)化調(diào)用.當(dāng)我們想要完全控制AJAX時(shí)可以使用此方法, 否則還是使用簡(jiǎn)化方法如get, post, load等更加方便。下面我們就來逐一認(rèn)識(shí)這些個(gè)方法。

1. load(url, [data], [callback] )

載入遠(yuǎn)程 HTML 文件代碼并插入至 DOM 中，默認(rèn)使用 GET 方式傳遞，附加參數(shù)時(shí)自動(dòng)轉(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 請(qǐng)求載入信息，這是一個(gè)簡(jiǎn)單的 GET 請(qǐng)求功能以取代復(fù)雜 $.ajax 。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請(qǐng)使用 $.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，取決于返回值)，添加一組請(qǐng)求參數(shù)。

jQuery 代碼:

$.get("test.cgi",{ name: "John", time: "2pm" },  
  function(data){  
    alert("Data Loaded: " + data);  
  });

3. jQuery.getJSON(url, [data], [callback] )

通過 HTTP GET 請(qǐng)求載入 JSON 數(shù)據(jù)，在 jQuery 1.2 中，您可以通過使用JSONP 形式的回調(diào)函數(shù)來加載其他網(wǎng)域的JSON數(shù)據(jù)，如 "myurl?callback=?"。jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。注意：此行以后的代碼將在這個(gè)回調(diào)函數(shù)執(zhí)行前執(zhí)行。

參數(shù)：解釋參見1

示例：

描述: 從 test.js 載入 JSON 數(shù)據(jù)，附加參數(shù)，顯示 JSON 數(shù)據(jù)中一個(gè) 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 請(qǐng)求載入并執(zhí)行一個(gè) JavaScript 文件，jQuery 1.2 版本之前，getScript 只能調(diào)用同域 JS 文件。 1.2中，您可以跨域調(diào)用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步執(zhí)行腳本。如果通過 getScript 加入腳本，請(qǐng)加入延時(shí)函數(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 請(qǐng)求載入信息，這是一個(gè)簡(jiǎn)單的 POST 請(qǐng)求功能以取代復(fù)雜 $.ajax 。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請(qǐng)使用 $.ajax。

參數(shù)：參見2

示例：

描述1：請(qǐng)求 test.php 網(wǎng)頁，忽略返回值

$.post("test.php");

描述2：請(qǐng)求 test.php 頁面，并一起發(fā)送一些額外的數(shù)據(jù)（同時(shí)仍然忽略返回值）

$.post("test.php",{ name: "John", time: "2pm" } );

描述3：輸出來自請(qǐng)求頁面 test.php 的結(jié)果（HTML 或 XML，取決于所返回的內(nèi)容）

$.post("test.php",function(data){  
   alert("Data Loaded: " + data);  
 });

6. jQuery.ajax(options )

通過 HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)。jQuery 底層 AJAX 實(shí)現(xiàn)。簡(jiǎn)單易用的高層實(shí)現(xiàn)見 $.get, $.post 等。$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對(duì)象。大多數(shù)情況下你無需直接操作該函數(shù)，除非你需要操作不常用的選項(xiàng)，以獲得更多的靈活性。

最簡(jiǎn)單的情況下，$.ajax()可以不帶任何參數(shù)直接使用。

注意：所有的選項(xiàng)都可以通過 $.ajaxSetup()函數(shù)來全局設(shè)置。

一些參數(shù)介紹請(qǐng)參見：

http://www.cnblogs.com/zengen/archive/2011/03/25/1995761.html

關(guān)于jQuery.ajax百度文庫(kù)里介紹的非常全面（還有示例）：

http://baike.baidu.com/view/6278307.htm

總結(jié)：

各種功能的實(shí)現(xiàn)隨著技術(shù)的不斷革新將會(huì)變得越來越簡(jiǎn)單，我們只需要掌握某些主流技術(shù)的基本原理和學(xué)習(xí)的方法即可，有了一套完整的思想，學(xué)習(xí)什么技術(shù)基本上都一樣，有時(shí)候遇到一門新技術(shù)我們可能用兩三天的時(shí)間就能明白其大概的框架，參考說明就能將其應(yīng)用到我們的項(xiàng)目中來。

原文鏈接：http://blog.csdn.net/smszhuang168/article/details/7749881

【編輯推薦】