從零開始學習jQuery (六) AJAX快餐
Code示例中我返回的餓是一個數組, 使用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 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步執行腳本。如果通過 getScript 加入腳本，請加入延時函數。講解:以前我使用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 loadingif ( !jsonp ) {var done = false;// Attach handlers for all browsersscript.onload = script.onreadystatechange = function(){if ( !done && (!this.readyState ||this.readyState == "loaded" || this.readyState == "complete") ) {done = true;success();complete();// Handle memory leak in IEscript.onload = script.onreadystatechange = null;head.removeChild( script );}};}我主要測試了此函數的跨域訪問和多瀏覽器支持.下面是結果:IE6FireFox注意事項非跨域引用js通過通過回調函數中的data和textStatus均可用跨域引用js通過通過回調函數中的data和textStatus均為undifined下面是我關鍵的測試語句, 也用來演示如何使用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 對象，包含各配置及回調函數信息。詳細參數選項見下。注意：如果你指定了 dataType 選項，請確保伺服器返回正確的 MIME 信息，(如 xml 返回 "text/xml")。錯誤的 MIME 類型可能導致不可預知的錯誤。見Specifying the Data Type for AJAX Requests。注意：如果dataType設置為"script"，那麼所有的遠程(不在同一域名下)的POST請求都將轉化為GET請求。(因為將使用DOM的script標籤來載入)jQuery 1.2 中，您可以跨域載入 JSON 數據，使用時需將數據類型設置為JSONP。使用JSONP形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。數據類型設置為 "jsonp" 時，jQuery 將自動調用回調函數。講解:這是jQuery中Ajax的核心函數, 上面所有的發送Ajax請求的函數內部最後都會調用此函數.options參數支持很多參數, 使用這些參數可以完全控制ajax請求. 在Ajax回調函數中的this對象也是options對象.因為平時使用最多的還是簡化了的get和post函數, 所以在此不對options參數做詳細講解了. options參數文檔請見:http://docs.jquery.com/Ajax/jQuery.ajax#options五.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屬性:<input id="email" name="email" type="text" />講解:serialize()函數將要發送給伺服器的form中的表單對象拼接成一個字元串. 便於我們使用Ajax發送時獲取表單數據. 這和一個From按照Get方式提交時, 自動將表單對象的名/值放到url上提交差不多.比如這樣一個表單:
生成的字元串為:single=Single¶m=Multiple¶m=Multiple3&check=check2&radio=radio1提示:代碼見 chapter6serialize.htm3.serializeArray( )Returns:Array<Object>說明:序列化表格元素 (類似 ".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-json"var 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"}]六.全局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 請求成功時執行函數用一個示例講解各個事件的觸發順序:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jQuery Ajax - AjaxEvent</title><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("<div>ajaxComplete</div>"); })$("#divResult").ajaxError(function(evt, request, settings) { $(this).append("<div>ajaxError</div>"); })$("#divResult").ajaxSend(function(evt, request, settings) { $(this).append("<div>ajaxSend</div>"); })$("#divResult").ajaxStart(function() { $(this).append("<div>ajaxStart</div>"); })$("#divResult").ajaxStop(function() { $(this).append("<div>ajaxStop</div>"); })$("#divResult").ajaxSuccess(function(evt, request, settings) { $(this).append("<div>ajaxSuccess</div>"); })});</script></head><body><br /><button id="btnAjax">發送Ajax請求</button><br/><div id="divResult"></div></body></html>結果如圖:
我們可以通過將默認options的global屬性設置為false來取消全局Ajax事件的觸發.七.注意事項1. 如果在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八.總結本文介紹如何使用jquery實現Ajax功能. 用於發送Ajax請求的相關函數如load, get, getJSON和post這些漸變Ajax方法, 對於核心的ajax 方法沒有過多介紹, 主要是通過配置複雜的參數實現完全控制Ajax請求. 另外講解了ajax的輔助函數比如用於序列化表單對象為字元串的serialize()方法, 用於將表單對象序列化為JSON對象的serializeArray()方法. 這些在使用腳本獲取數據實現與伺服器端交互是很有用, JSON格式的數據在處理大對象編程時將我們從混亂的屬性字元串中解放出來.jQuery還提供錄入全局ajax事件這一個特殊的事件, 並且可以在一個對象上設置這些事件, 在發送Ajax請求的各個生命周期上會調用這些事件, 可以通過修改默認的options對象的global屬性打開或關閉全局事件.目前本系列文章在加緊創作階段. 所以代碼和文章示例都沒有來得及重新整理. 下面是本章的代碼下載, 但是含有所有以前未整理的示例,請大家下載後看chapter6文件夾, 裡面是本章的所有示例:
推薦閱讀：