第6章，jQuery與Ajax的應用 Ajax的優勢和不足 Ajax的優勢 1、不需要插件支持 2、優秀的用戶體驗 3、提高Web程式的性能 4、減輕伺服器和帶寬的負擔 Ajax的不足 1、瀏覽器對XMLHttpRequest對象的支持度不足 2、破壞瀏覽器前進、後退按鈕的正常功能 3、對搜索引擎的 ...
第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 | 請求完成時的回調函數，無論請求成功或失敗 |
$('#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 |
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/ValidatioinjQuery表單插件----Form
核心方法：ajaxForm()和ajaxSubmit() 下載地址： http://jquery.malsup.com/form/#download ajaxForm()和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-cookiejQuery UI插件
下載地址： http://ui.jquery.com/download http://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來表示，避免衝突，當然，也可以使用閉包來迴避這種問題
