鋒利的jQuery第2版學習筆記6、7章


第6章,jQuery與Ajax的應用

Ajax的優勢和不足

Ajax的優勢

1、不需要插件支持 2、優秀的用戶體驗 3、提高Web程序的性能 4、減輕服務器和帶寬的負擔

Ajax的不足

1、瀏覽器對XMLHttpRequest對象的支持度不足 2、破壞瀏覽器前進、后退按鈕的正常功能 3、對搜索引擎的支持的不足 4、開發和調試工具的缺乏

Ajax的XMLHttpRequest對象

Ajax的核心是XMLHttpRequest對象,它是Ajax實現的關鍵----發送異步請求、接收響應及執行回調都是通過它來完成的。 IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest對象的,而其他瀏覽器的XMLHttpRequest對象是window的子對象

jQuery中的Ajax

1、load()方法

語法結構:load(url [,data] [,callback]) load()方法參數解釋
參數 類型 說明
url String 請求HTML頁面的url地址
data(可選) Object 發送至服務器的key/value數據
callback(可選) Function 請求完成時的回調函數,無論請求成功或失敗
篩選載入的HTML文檔
$('#resText').load("test.html .para");     // 載入test.html頁面中class為“para”的內容
傳遞方式load()方法會根據參數data來自動指定,有參數傳遞為POST方式,無參數則為GET方式回調函數有3個參數:1、請求返回的內容;2、請求的狀態;3、XMLHttpRequest對象注:通常用於從Web服務器獲取靜態文件

2、$.get()與$.post()方法

(1)$.get()使用GET方式來進行異步請求語法結構:$.get(url [,data] [,callback] [,type]);
$.get()方法參數解釋
參數 類型 說明
url String 請求的HTML頁面的url地址
data(可選) Object 發送至服務器的key/value數據會附加在請求URL中
callback(可選) Function 載入成功時回調函數,自動將請求結果和狀態傳遞給該方法
type(可選) String 服務器返回內容的格式,xml,html,script,json,text,_default
回調函數只有兩個參數:1、data,返回的內容,xml文檔,json文件等;2、請求狀態:success、error、notmodified、timeout注:只有當數據成功返回(success)才被調用(2)$.post()使用POST方式進行異步請求GET與POST的區別<1>GET請求會將參數跟在URL后進行傳遞,POST則是作為HTTP實體內容發送個Web服務器。<2>GET對傳輸數據有大小限制(通常不大於2kb),而POST則要比GET多的多(理論上不限制)<3>GET請求會被瀏覽器緩存下來,在某種情況下會有嚴重的安全性問題,而POST則可避免<4>GET與POST傳遞的數據在服務器端獲取方式也不相同

3、$.getScript()方法和$.getJson()方法

(1)$.getScript()使用$.getScript()方法加載一個js文件就跟加載一個HTML頁面一樣簡單,而且不需要對js文件進行處理,js文件會自動執行回調函數會在js加載成功后執行(2)$.getJson()$.getJson()用於加載json文件$.each()方法,jQuery中用於遍歷對象和數組,接受兩個參數:1、數組或對象;2、回調函數(接受兩個參數:1、對象成員或數組索引;2、對應變量或內容)

4、$.ajax()方法

語法結構:$.ajax(options)options對象中,參數以key/value形式存在,所有參數都是可選$.ajax()方法有大量的參數,需要另查資料,之后再補充

序列化元素

1、serialize()方法作用於一個jQuery對象,能夠將DOM元素內容序列化為字符串,用於Ajax請求注:參數傳遞時要注意將參數進行編碼,即使用URI編碼,若不希望編碼帶來麻煩,可以使用serialize()方法,它會自動編碼2、serializeArray()方法將DOM序列化后,返回json格式數據3、$.param()方法serialize()方法核心,用以對一個對象按照key/value進行序列化

jQuery中的Ajax全局事件

當Ajax請求開始時,觸發ajaxStart()方法的回調函數;當Ajax請求結束時,觸發ajaxStop()方法的回調函數其他的全局方法
方法名稱 說明
ajaxComplete(callback) Ajax請求完成時執行函數
ajaxError(callback) Ajax請求發生錯誤時執行函數,捕捉到的錯誤可以作為最后一個參數傳遞
ajaxSend(callback) Ajax請求發送前執行的函數
ajaxSuccess(callback) Ajax請求成功時執行函數

第7章,jQuery插件的使用和寫法

jQuery表單驗證插件----Validation

下載地址:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/API:http://docs.jquery.com/Plugins/Validatioin

jQuery表單插件----Form

核心方法:ajaxForm()和ajaxSubmit()下載地址:http://jquery.malsup.com/form/#downloadajaxForm()和ajaxSubmit()都可以接受0或1個參數,當為單個參數時,既可以是回調函數,也可以是options對象,通過傳遞options對象,使它們對表單擁有更多的控制權

模態窗口插件----SimpleModal

下載地址:http://www.ericmmartin.com/projects/simplemodal/SimpleModal提供了兩種方法調用模態窗口:1、作為鏈式jQuery函數:
$("#elementid").modal();
2、作為一個單獨的函數:
$.modal("<div><h1>SimpleModal</h1></div>");
兩種方法都可接收一個可選參數:options
$("#elementid").modal({options});
$.modal(
"<div><h1>SimpleModal</h1></div>",{options});
API:http://www.ericmmartin.com/projects/simplemodal/

管理Cookie的插件----Cookie

下載地址:http://github.com/carhartl/jquery-cookie

jQuery UI插件

下載地址:http://ui.jquery.com/downloadhttp://jqueryui.com/download

編寫jQuery插件

1、插件種類
(1)封裝對象方法的插件
(2)封裝全局函數的插件(3)選擇器插件2、插件基本要點(1)jQuery插件推薦命名jquery.[插件名].js(2)所有對象方法都應當附加到jQuery.fn對象上,所有全局函數都應當附加到jQuery對象本身上(3)在插件內部,this指向當前通過選擇器獲取的jQuery對象(4)可以通過this.each來遍歷所有元素(5)所有方法或函數插件都應當以分號結尾(6)插件應返回一個jQuery對象,以保證插件可鏈式操作(7)避免在插件內部使用$作為jQuery對象的別名,應使用完整的jQuery來表示,避免沖突,當然,也可以使用閉包來回避這種問題

jQuery插件機制

jQuery提供了兩個用於擴展jQuery功能的方法,即jQuery.fn.extend()和jQuery.extend()jQuery.fn.extend()用於擴展第一類插件,jQuery.extend()用於擴展后兩種插件

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com