jQuery學習之旅 Item10 ajax快餐

jQuery學習之旅 Item10 ajax快餐
1. 摘要

本系列文章將帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經驗和解決方案, 即使你會使用jQuery也能在閱讀中發現些許秘籍.
本篇文章講解如何使用jQuery方便快捷的實現Ajax功能.統一所有開發人員使用Ajax的方式.

2. 前言

Ajax讓使用者頁面豐富起來, 增強了使用者體驗. 使用Ajax是所有Web開發的必修課. 雖然Ajax技術並不複雜, 但是實現方式還是會因為每個開發人員的而有所差異.jQuery提供了一系列Ajax函數來協助我們統一這種差異, 並且讓調用Ajax更加簡單.

3. 原始Ajax與jQuery中的Ajax

首先通過執行個體, 來看一下jQuery實現Ajax有多簡單. 下面是一個使用原始Ajax的樣本:

<script type=text/javascript> $(function() { var xhr = new AjaxXmlHttpRequest(); $(#btnAjaxOld).click(function(event) { var xhr = new AjaxXmlHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { document.getElementById(divResult).innerHTML = xhr.responseText; } } xhr.open(GET, data/AjaxGetCityInfo.aspx?resultType=html, true); xhr.send(null); }); }) //跨瀏覽器擷取XmlHttpRequest對象 function AjaxXmlHttpRequest() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject(Msxml2.XMLHTTP); } catch (e) { try { xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); } catch (e) { alert(您的瀏覽器不支援AJAX！); return false; } } } return xmlHttp; } </script> 原始Ajax調用

 

上面的執行個體中, data/AjaxGetCityInfo.aspx?resultType=html 地址會返回一段HTML代碼.

使用原始Ajax, 我們需要做較多的事情, 比如建立XmlHttpRequest對象, 判斷請求狀態, 編寫回呼函數等.

而用jQuery的Load方法, 只需要一句話:

$(#divResult).load(data/AjaxGetCityInfo.aspx, { resultType: html });

曾經我是一個原始Ajax的絕對擁護者, 甚至摒棄微軟的Asp.net Ajax, 因為我想要最高的代碼靈活度. 使用原始Ajax讓我感覺完成自己的工作更加輕鬆, 即使多寫了一些代碼. 但是當我去翻看別人的Ajax代碼並且嘗試修改的時候, 我改變了我的看法——我們的代碼到處分布著建立XmlHttpRequest方法的函數, 或者某些Ajax程式邏輯性和結構性很差, 很難看懂.

我們可以將通用方法放到一個js檔案中, 然後告訴大家”嘿夥伴們, 都來用這個js中的方法”. 但是在某些時候有些新來的外包人員並不知道有這個js檔案的存在. 而且其實這個通用的js就是一個公用的指令碼類庫, 我相信沒有人會覺得自己開發一個類庫會比jQuery更好!

所以我放棄了製造輪子的計劃, 大家都使用jQuery編寫Ajax相關的方法就可以解決各種差異性問題, 並且讓工作更有效率.

現在只是用jQuery的Ajax函數, 我的頁面變得簡潔了:

<script type=text/javascript src=scripts/jquery-1.3.2-vsdoc2.js></script><script type=text/javascript> $(function() { $(#btnGetHtml).click(function(event) { $(#divResult).load(data/AjaxGetCityInfo.aspx, { resultType: html }); }); }) </script> 使用jQuery的load方法
 4. jQuery Ajax詳解

jQuery提供了幾個用於發送Ajax請求的函數. 其中最核心也是最複雜的是jQuery.ajax( options ),所有的其他Ajax函數都是它的一個簡化調用. 當我們想要完全控制Ajax時可以使用此結果, 否則還是使用簡化方法如get, post, load等更加方便. 所以jQuery.ajax( options ) 方法放到最後一個介紹. 先來介紹最簡單的load方法:

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

Returns: jQuery封裝集

說明:

load方法能夠載入遠程 HTML 檔案代碼並插入至 DOM 中。 預設使用 GET 方式, 如果傳遞了data參數則使用Post方式. 傳遞附加參數時自動轉換為 POST 方式。jQuery 1.2 中，可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 程式碼。文法形如 “url #some > selector”, 預設的選取器是”body>*”.

講解:

load是最簡單的Ajax函數, 但是使用具有局限性: 它主要用於直接返回HTML的Ajax介面 load是一個jQuery封裝集方法,需要在jQuery封裝集上調用,並且會將返回的HTML載入到對象中, 即使設定了回呼函數也還是會載入.
不過不可否認load介面設計巧妙並且使用簡單.下面通過樣本來示範Load介面的使用:

<script type=text/javascript src=../scripts/jquery-1.3.2-vsdoc2.js></script><script type=text/javascript> $(function() { $(#btnAjaxGet).click(function(event) { //發送Get請求 $(#divResult).load(../data/AjaxGetMethod.aspx?param=btnAjaxGet_click + &timestamp= + (new Date()).getTime()); }); $(#btnAjaxPost).click(function(event) { //發送Post請求 $(#divResult).load(../data/AjaxGetMethod.aspx, { param: btnAjaxPost_click }); }); $(#btnAjaxCallBack).click(function(event) { //發送Post請求, 返回後執行回呼函數. $(#divResult).load(../data/AjaxGetMethod.aspx, { param: btnAjaxCallBack_click }, function(responseText, textStatus, XMLHttpRequest) { responseText = Add in the CallBack Function!
+ responseText $(#divResult).html(responseText); //或者: $(this).html(responseText); }); }); $(#btnAjaxFiltHtml).click(function(event) { //發送Get請求, 從結果中過濾掉 鞍山 這一項 $(#divResult).load(../data/AjaxGetCityInfo.aspx?resultType=html + &timestamp= + (new Date()).getTime() + ul>li:not(:contains('鞍山'))); }); }) </script> 使用Load執行Get請求
使用Load執行Post請求
使用帶有回呼函數的Load方法
使用selector過濾返回的HTML內容
 

上面的樣本示範了如何使用Load方法.

提示:

我們要時刻注意瀏覽器緩衝, 當使用GET方式時要新增時間戳記參數 (net Date()).getTime() 來保證每次發送的URL不同, 可以避免瀏覽器緩衝. 當在url參數後面添加了一個空格, 比如” “的時候, 會出現”無法識別符號”的錯誤, 請求還是能正常發送. 但是無法載入HTML到DOM. 刪除後問題解決.

2.jQuery.get( url, [data], [callback], [type] )

Returns: XMLHttpRequest

說明:

通過遠程 HTTP GET 請求載入資訊。 這是一個簡單的 GET 請求功能以取代複雜 $.ajax 。請求成功時可調用回呼函數。如果需要在出錯時執行函數，請使用 $.ajax。

講解:

此函數發送Get請求, 參數可以直接在url中拼接, 比如:

$.get(../data/AjaxGetMethod.aspx?param=btnAjaxGet_click);

或者通過data參數傳遞:

$.get(../data/AjaxGetMethod.aspx, { param: btnAjaxGet2_click });

兩種方式效果相同, data參數會自動添加到請求的url中，如果url中的某個參數, 又通過data參數傳遞, 不會自動合并相同名稱的參數.

回呼函數的簽名如下:

function (data, textStatus) {  // data could be xmlDoc, jsonObj, html, text, etc  this; // the options for this ajax request}

其中data是返回的資料, testStatus表示狀態代碼, 可能是如下值:在回呼函數中的this是擷取options對象的引用
type參數是指data資料的類型, 可能是下面的值:
“xml”, “html”, “script”, “json”, “jsonp”, “text”.預設為”html”.

jQuery.getJSON( url, [data], [callback] ) 方法就相當於 jQuery.get(url, [data],[callback], “json”)

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

Returns: XMLHttpRequest

相當於: jQuery.get(url, [data],[callback], “json”)

說明:

通過 HTTP GET 請求載入 JSON 資料。 在 jQuery 1.2 中，您可以通過使用JSONP 形式的回呼函數來載入其他網域的JSON資料，如 “myurl?callback=?”。jQuery 將自動替換 ? 為正確的函數名，以執行回呼函數。
注意：此行以後的代碼將在這個回呼函數執行前執行。

講解:

getJSON函數僅僅將get函數的type參數設定為”JSON”而已. 在回呼函數中擷取的資料已經是按照JSON格式解析後的對象了:

$.getJSON(../data/AjaxGetCityInfo.aspx, { resultType: json }, function(data, textStatus){      alert(data.length);      alert(data[0].CityName);});

伺服器端返回的字串如下:

[{pkid:0997,ProvinceId:XJ,CityName:阿克蘇,CityNameEn:Akesu,PostCode:843000,isHotCity:false}, {pkid:0412,ProvinceId:LN,CityName:鞍山,CityNameEn:Anshan,PostCode:114000,isHotCity:false}]

樣本中我返回的餓是一個數組, 使用data.length可以擷取數組的元素個數, data[0]訪問第一個元素, data[0].CityName訪問第一個元素的CityName屬性.

4. jQuery.getScript( url, [callback] )

Returns: XMLHttpRequest

相當於: jQuery.get(url, null, [callback], “script”)

說明:

通過 HTTP GET 請求載入並執行一個 JavaScript 檔案。 jQuery 1.2 版本之前，getScript 只能調用同域 JS 檔案。 1.2中，您可以跨域調用 JavaScript 檔案。

講解:

以前我使用dojo類庫時官方預設的檔案不支援跨域最後導致我放棄使用dojo(雖然在網上找到了可以跨域的版本, 但是感覺不夠完美). 所以我特別對這個函數的核心實現和使用做了研究.
首先瞭解此函數的jQuery內部實現, 仍然使用get函數, jQuery所有的Ajax函數包括get最後都是用的是jQuery.ajax(), getScript將傳入值為”script”的type參數, 最後在Ajax函數中對type為script的請求做了如下處理:

var head = document.getElementsByTagName(head)[0];            var script = document.createElement(script);script.src = s.url;

上面的代碼動態建立了一個script語句塊, 並且將其加入到head中:

head.appendChild(script);

當指令碼載入完畢後, 再從head中刪除:

      // Handle Script loading            if ( !jsonp ) {                var done = false;                // Attach handlers for all browsers                script.onload = script.onreadystatechange = function(){                    if ( !done && (!this.readyState ||                            this.readyState == loaded || this.readyState == complete) ) {                        done = true;                        success();                        complete();                        // Handle memory leak in IE                        script.onload = script.onreadystatechange = null;                        head.removeChild( script );                    }                };            }

我主要測試了此函數的跨域訪問和多瀏覽器支援.下面是結果:

下面是我關鍵的測試語句, 也用來示範如何使用getScript函數:

$(#btnAjaxGetJSON).click(function(event)            {                $.getScript(../scripts/getScript.js, function(data, textStatus)                {                    alert(data);                    alert(textStatus);                    alert(this.url);                });            });            $(#btnAjaxGetJSONXSS).click(function(event)            {                $.getScript(http://resource.elong.com/getScript.js, function(data, textStatus)                {                    alert(data);                    alert(textStatus);                    alert(this.url);                });            });

5. jQuery.post( url, [data], [callback], [type] )

Returns: XMLHttpRequest

說明:

通過遠程 HTTP POST 請求載入資訊。 這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。請求成功時可調用回呼函數。如果需要在出錯時執行函數，請使用 $.ajax。

講解:

具體用法和get相同, 只是提交方式由”GET”改為”POST”.

6. jQuery.ajax( options )

Returns: XMLHttpRequest

說明:

通過 HTTP 要求載入遠端資料。 jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。 $.ajax() 返回其建立的 XMLHttpRequest 對象。大多數情況下你無需直接操作該對象，但特殊情況下可用於手動終止請求。 $.ajax() 只有一個參數：參數 key/value 對象，包含各配置及回呼函數資訊。

jQuery 1.2 中，您可以跨域載入 JSON 資料，使用時需將資料類型設定為 JSONP。使用 JSONP 形式調用函數時，如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函數名，以執行回呼函數。資料類型設定為 “jsonp” 時，jQuery 將自動調用回呼函數。

5、Ajax相關函數.

jQuery提供了一些相關函數能夠輔助Ajax函數.

1. jQuery.ajaxSetup( options )
無傳回值

說明:

設定全域 AJAX 預設options選項。

講解:

有時我們的希望設定頁面上所有Ajax屬性的預設行為.那麼就可以使用此函數設定options選項, 此後所有的Ajax請求的預設options將被更改.

比如,設定 AJAX 請求預設地址為 “/xmlhttp/”，禁止觸發全域 AJAX 事件，用 POST 代替預設 GET 方法。其後的 AJAX 請求不再設定任何選項參數:

$.ajaxSetup({  url: /xmlhttp/,  global: false,  type: POST});$.ajax({ data: myData });

2. serialize( )

Returns: String

說明:

序列表表格內容為字串，用於 Ajax 請求。 序列化最常用在將表單資料發送到伺服器端時. 被序列化後的資料是標準格式, 可以被幾乎所有的而伺服器端支援. 為了儘可能正常工作, 要求被序列化的表單欄位都有name屬性, 只有一個eid是無法工作的.

像這樣寫name屬性:

講解:

serialize()函數將要發送給伺服器的form中的表單對象拼接成一個字串. 便於我們使用Ajax發送時擷取表單資料. 這和一個From按照Get方式提交時, 自動將表單對象的名/值放到url上提交差不多.
比如這樣一個表單:

產生的字串為:single=Single¶m=Multiple¶m=Multiple3&check=check2&radio=radio1

3. serializeArray( )

Returns: Array

說明:

序列化表格元素 (類似 ‘.serialize()’ 方法) 返回 JSON 資料結構資料。 注意，此方法返回的是JSON對象而非JSON字串。需要使用外掛程式或者第三方庫進行字串化操作。

講解:

看說明文檔讓我有所失望, 使用此函數擷取到的是JSON對象, 但是jQuery中沒有提供將JSON對象轉化為JSON字串的方法.
在JSON官網上沒有找到合適的JSON編譯器, 最後選用了jquery.json這個jQuery外掛程式:
http://code.google.com/p/jquery-json/

使用起來異常簡單:

var thing = {plugin: 'jquery-json', version: 1.3};var encoded = $.toJSON(thing);              //'{plugin: jquery-json, version: 1.3}'var name = $.evalJSON(encoded).plugin;      //jquery-jsonvar version = $.evalJSON(encoded).version;  // 1.3

使用serializeArray( ) 再配合 $.toJSON 方法, 我們可以很方便的擷取表單對象的JSON, 並且轉換為JSON字串:

$(#results).html( $.toJSON( $(form).serializeArray() ));

結果為:

[{name: single, value: Single}, {name: param, value: Multiple}, {name: param, value: Multiple3}, {name: check, value: check2}, {name: radio, value: radio1}]

6、全域Ajax事件

在jQuery.ajaxSetup( options ) 中的options參數屬性中, 有一個global屬性:global 實值型別:布爾值, 預設值: true,

說明:
是否觸發全域的Ajax事件.
這個屬性用來設定是否觸發全域的Ajax事件. 全域Ajax事件是一系列伴隨Ajax請求發生的事件.主要有如下事件:

第一列	第二列
ajaxComplete( callback )	AJAX 請求完成時執行函數
ajaxError( callback )	AJAX 請求發生錯誤時執行函數
ajaxSend( callback )	AJAX請求發送前執行函數
ajaxStart( callback )	AJAX請求開始時執行函數
ajaxStop( callback )	AJAX請求結束時執行函數
ajaxSuccess( callback )	AJAX 請求成功時執行函數

用一個樣本講解各個事件的觸發順序:

<script type=text/javascript src=../scripts/jquery-1.3.2.min.js></script><script type=text/javascript> $(document).ready(function() { $(#btnAjax).bind(click, function(event) { $.get(../data/AjaxGetMethod.aspx); }) $(#divResult).ajaxComplete(function(evt, request, settings) { $(this).append('ajaxComplete'); }) $(#divResult).ajaxError(function(evt, request, settings) { $(this).append('ajaxError'); }) $(#divResult).ajaxSend(function(evt, request, settings) { $(this).append('ajaxSend'); }) $(#divResult).ajaxStart(function() { $(this).append('ajaxStart'); }) $(#divResult).ajaxStop(function() { $(this).append('ajaxStop'); }) $(#divResult).ajaxSuccess(function(evt, request, settings) { $(this).append('ajaxSuccess'); }) }); </script>
發送Ajax請求
 

結果:

我們可以通過將預設options的global屬性設定為false來取消全域Ajax事件的觸發.

7. 注意事項如果在Get請求發送的url中有兩個同名參數, 比如兩個param參數:
http://localhost/AjaxGetMethod.aspx?param=Multiple¶m=Multiple3
使用伺服器端方法擷取param參數:

if (!String.IsNullOrEmpty(HttpContext.Current.Request[Param]))        {            param = HttpContext.Current.Request[Param];        }

此時擷取到得param是一個用”,”分隔多個值的字串:
Multiple,Multiple3

8. 總結

本文介紹如何使用jquery實現Ajax功能. 用於發送Ajax請求的相關函數如load, get, getJSON和post這些漸層Ajax方法, 對於核心的ajax 方法沒有過多介紹, 主要是通過配置複雜的參數實現完全控制Ajax請求. 另外講解了ajax的輔助函數比如用於序列化表單對象為字串的serialize()方法, 用於將表單對象序列化為JSON對象的serializeArray()方法. 這些在使用指令碼擷取資料實現與伺服器端互動是很有用, JSON格式的資料在處理大對象編程時將我們從混亂的屬性字串中解放出來.

jQuery還提供錄入全域ajax事件這一個特殊的事件, 並且可以在一個對象上設定這些事件, 在發送Ajax請求的各個生命週期上會調用這些事件, 可以通過修改預設的options對象的global屬性開啟或關閉全域事件.