jQuery類庫新手使用指南之AJAX方法 - 第一部分

日期：2012/03/07

jQuery類庫新手使用指南之AJAX方法

最近幾年很多網(wǎng)站，事實(shí)上基本所有的網(wǎng)站都使用一個(gè)技術(shù) - AJAX來提供流暢并且高效的用戶體驗(yàn)。無論是出名的Google Maps還是Gmail，或者是流行的javascript框架-jQuery Mobile，都使用AJAX來獲取后臺數(shù)據(jù)，并且實(shí)時(shí)更新用戶瀏覽頁面。

使用javascript代碼來構(gòu)建一個(gè)AJAX應(yīng)用可能需要技巧。但是，很多的javascript類庫，包括jQuery都已經(jīng)內(nèi)建支持AJAX，這樣使得開發(fā)一個(gè)AJAX驅(qū)動的網(wǎng)站或者應(yīng)用變得非常簡單。

在這個(gè)教程中，我們將學(xué)習(xí)使用jQuery來執(zhí)行基本的AJAX請求操作。你將會學(xué)習(xí)：

AJAX是什么？工作原理是什么？為什么AJAX是一個(gè)好東西？
如何使用jQuery來調(diào)用各種AJAX請求
使用AJAX請求來發(fā)送數(shù)據(jù)
處理服務(wù)器端的AJAX請求，獲取返回的數(shù)據(jù)
如何自定義jQuery的AJAX處理及其參數(shù)設(shè)置
AJAX的高級使用

注意：本文主要介紹javascript端的使用，如何你需要了解后臺，請參考你所使用的語言。

AJAX是什么？工作原理是什么？為什么AJAX是一個(gè)好東西？

簡單說，AJAX是一個(gè)幫助你的瀏覽器和服務(wù)器異步通訊的javascript技巧。是Asynchronous JavaScript And XML的縮寫，和傳統(tǒng)的web編程比較來說，他們有如下區(qū)別：

傳統(tǒng)方式的web頁面處理包含了鏈接和表單，當(dāng)用戶點(diǎn)擊或者發(fā)送，將會對服務(wù)器進(jìn)行一次請求調(diào)用。然后服務(wù)器會通過返回整個(gè)頁面來響應(yīng)，然后瀏覽器負(fù)責(zé)顯示頁面內(nèi)容，替換開始的頁面。這個(gè)過程可能非常的耗時(shí)間，往往會讓用戶的使用體驗(yàn)大打折扣，因?yàn)橛脩艨赡艿没ê芏鄷r(shí)間來等待頁面加載
使用AJAX方式，javascript代碼會向服務(wù)器請求一個(gè)URL，同時(shí)也可以發(fā)送數(shù)據(jù)。javascript代碼然后處理服務(wù)器的響應(yīng)，然后對應(yīng)做處理。例如，可能計(jì)算返回的數(shù)據(jù)，添加或者更新頁面上的組件，或者通知用戶服務(wù)器端數(shù)據(jù)的變化等

因?yàn)锳JAX的請求往往在后臺發(fā)生，用戶在閱讀網(wǎng)頁的時(shí)候，javascript代碼可以繼續(xù)在后臺工作。這個(gè)過程對于用戶來說是不可見的。并且不會打擾用戶目前瀏覽的頁面內(nèi)容。這一點(diǎn)使得web應(yīng)用更接近于桌面應(yīng)用的行為。

AJAX的基礎(chǔ)是javascript中的XMLHttpRequest對象，這個(gè)對象提供了各種方法，例如，open()，send()和onreadystatechange()方法來創(chuàng)建AJAX的請求和響應(yīng)。

書寫跨瀏覽器的AJAX的js代碼可能非常費(fèi)時(shí)。很幸運(yùn)的是，jQuery提供了使用簡單的AJAX方法幫助你跳過底層的處理。

我們首先來看看最重要的方法：$.get().

使用$.get()方法來創(chuàng)建GET請求

jQuery的$.get()方法提供了你簡單的方式來處理HTTP GET方法，通常用來獲取web頁面或者圖片。對應(yīng)的是POST方法。使用$.get()方法非常簡單，如下：

$.get( url );

url是服務(wù)器端的一個(gè)地址，可以是服務(wù)器端腳本或者是一個(gè)靜態(tài)頁面，如下：

$.get( "http://gbin1.com/index.html" );

或者一個(gè)動態(tài)的document

$.get( "http://gbin1.com/index.jsp" );

當(dāng)然，同時(shí)也支持參數(shù)，如下：

$.get( "http://gbin1.com/index.jsp?category=jquery" );

一個(gè)簡單的方法來處理是使用參數(shù)對象來發(fā)送http參數(shù)，如下：

var gbdata={category:"jquery", subcategory:"ajax"};
 $.get( "http://gbin1.com/index.jsp", data );

當(dāng)然以下形式也沒有問題：

var gbdata="category=jquery&subcategory=ajax";
  $.get( "http://gbin1.com/index.jsp", data );

服務(wù)器端取得數(shù)據(jù)

這里我們使用的$.get()方法都是發(fā)送請求到服務(wù)器，但是有的時(shí)候，我們需要得到服務(wù)器返回的內(nèi)容，例如，一些數(shù)據(jù)。這里我們?nèi)绾翁幚砟兀看鸢妇褪菚鴮懸粋€(gè)回調(diào)(Callback)方法，一個(gè)AJAX請求的返回?cái)?shù)據(jù)會作為這個(gè)回調(diào)方法的參數(shù)，如下：

function myCallback( returnedData ) {
   // 這里我們可以處理returnedData，例如，封裝數(shù)據(jù)生成HTML展現(xiàn)給用戶
 }

一旦你創(chuàng)建了你的回調(diào)函數(shù)，你就可以將它傳遞給$.get()方法，如下：

var gbdata={category:"jquery", subcategory:"ajax"};
 $.get( "http://gbin1.com/index.jsp", gbdata, myCallback );

指定返回的數(shù)據(jù)類型

服務(wù)器端的數(shù)據(jù)返回類型可以是不同的格式，包括，XML，JSON和javascript，或者HTML。缺省情況下，jQuery會盡力自己判斷返回的數(shù)據(jù)格式，并且正確解析，當(dāng)然最好的大家自己指定數(shù)據(jù)格式。

參數(shù)可以為以下：

XML
JSON
script
HTML

例如，如果你知道你的服務(wù)器端返回JSON格式，你可以調(diào)用$.get()，如下：

$.get( "http://gbin1.com/index.jsp", gbdata, myCallback, "json" );

這里是一個(gè)完整的例子，展示了如何使用$.get()方法來調(diào)用一個(gè)AJAX請求并且返回響應(yīng)內(nèi)容。首先創(chuàng)建一個(gè)文本文件如下：

{
   "site": "GBin1.com",
   "date": "2011/06/06",
   "tag": "jQuery",
   "pages": 800
 }

以上文件模擬了一個(gè)JSON響應(yīng)的結(jié)果。下面我們保存另外一個(gè)html文件，如下：

<!doctype html>
<html lang="en">
<head>
<title>Site Info Demo for jQuery $.get()</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
	#container{
		padding: 100px;
		font-size: 12px;
		font-family: arial;
	}
	#result{
		padding: 10px 0;
	}
	#result li{
		padding: 10px 0;
	}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script>
$( function() {
    $('#showinfo').click( function() {
      var data = { site: "GBin1.com", date: "20120318" };
      $.get( "siteinfo.txt", data, success, "json" );
    } );

    function success( siteData ) {
      var result = "<li>Site Name:" + siteData.site + "</li>";
            result += "<li>Creation Date:" + siteData.date + "</li>";
            result += "<li>Site tag: "  + siteData.tag + "</li>";
            result += "<li>Site pages: "  + siteData.pages + "</li>";
      $("#result").html(result);
    }
 } );
</script>
</head>
<body> 
<div id="container">
 <button id="showinfo">show info</button>
 <ul id="result"></ul>
</body>
</div>
</html>

在線演示

代碼說明：

首先我們這里包含了一個(gè)show info的按鈕，點(diǎn)擊這個(gè)按鈕觸發(fā)click事件
代碼最上面我們加載jQuery的最新類庫，然后當(dāng)頁面加載完畢后，即DOM is ready后等待運(yùn)行，這里我們沒有使用 "$(document).ready(function(){" ，而是直接使用 "$( function() {"，這兩種方式在jQuery是等同的。當(dāng)然，使用前一種代碼更容易閱讀，后面一種方式比較簡潔。
我們使用click方法來綁定一個(gè) 點(diǎn)擊方法到show info按鈕。如果你點(diǎn)擊這個(gè)按鈕，將會觸發(fā)一個(gè)AJAX請求到siteinfo.txt，并且我們向這個(gè)url傳遞了倆個(gè)參數(shù)，當(dāng)然，對于這個(gè)例子來說傳遞url參數(shù)沒有意義，如果你指向一個(gè)后臺url，它需要處理你的參數(shù)，再返回結(jié)果。然后，這里有個(gè)success()的回調(diào)函數(shù)，它在AJAX請求完畢后運(yùn)行，最后我們指定使用的數(shù)據(jù)格式是JSON
success()方法將調(diào)用由jQuery處返回的JSON對象，并且組裝最后的顯示內(nèi)容。
我們將顯示內(nèi)容顯示到$("#result")中，這是一個(gè)div層
如果你使用firefox，并且安裝了firebug，你可以使用網(wǎng)絡(luò)功能來查看后臺的ajax調(diào)用，如下：

jQuery類庫新手使用指南之AJAX方法

可以看到以上AJAX請求及其響應(yīng)處理代碼非常簡單，大家是不是覺得使用jQuery的AJAX方法學(xué)習(xí)成本很低，希望大家能喜歡！

來源：jQuery類庫新手使用指南之AJAX方法 - 第一部分

posted @ 2012-03-12 12:03 igeekbar 閱讀(1050) 評論(0) 收藏舉報(bào)

刷新頁面返回頂部