jQuery中的Ajax應用

Ajax介紹

1.什麼是Ajax

　　Ajax全稱爲"Asynchronous JavaScript and XML",是由客戶端js所發起的http請求代號.

　　實現無刷新的數據更新界面效果.

2.Ajax原理

　　運用XHTML+CSS來表達信息;

　　運用JavaScript操做DOM(Document Object Model)運行動態效果;

　　運用XML和XSLT進行數據交換及操做;

　　運用XMLHttpRequest爲Agent與網頁服務器進行異步數據交換;

　　運用JavaScript技術實現

3.Ajax的優勢

　　1.不須要任何瀏覽器插件,在任何支持JavaScript的瀏覽器上運行

　　2.優秀的用戶體驗

　　3.提升Web程序的性能

　　4.減輕服務器和帶寬的負擔

 4.Ajax的缺點

　　1.它可能破壞瀏覽器後退按鈕的正常行爲

　　2.對搜索引擎的支持的不足

　　3.開發和調試工具的缺少

　　4.手持設備支持性差

5.XMLHttpRequest對象

　　XMLHttpRequest對象的屬性:

　　　　1.readyState:HTTP請求的狀態,這個狀態的屬性值從0增長到4.

狀態,名稱和含義

狀態	名稱	描述
0	Uninitialized	初始化狀態.XMLHttpRequest對象已建立或被abort()方法重置.
1	Open	open()方法已調用,可是send()方法未調用.請求尚未被髮送.
2	Sent	Send()方法已調用,HTTP請求已發送到Web服務器.未接受到響應.
3	Receiving	全部響應頭部都已經接收到.響應體開始接收但未完成.
4	Loaded	HTTP響應已經徹底接收.

　　　　2.responseText:目前爲止從服務器接收到的響應體(不包括頭部),或者若是尚未接收到數據的話,就是空字符串.

　　　　3.responseXML:對請求的響應,解析爲XML並做爲Document對象返回.

　　　　4.status:由服務器返回的HTTP狀態代碼.

　　　　5.statusText:對應status狀態的狀態名稱.

　　XMLHttpRequest對象的方法:

　　　　1.abort():取消當前響應,關閉鏈接而且結束任何未決的網絡活動.把XMLHttpRequest對象的readyState屬性重置爲0的狀態,而且取消全部未決的網絡活動.

　　　　2.getAllResponseHeaders():把HTTP響應頭部做爲未解析的字符串返回.若是readyState小於3,這個方法返回null.

　　　　3.getResponseHeader():返回指定的HTTP響應頭部的值.

　　　　4.open():初始化HTTP請求參數,例如URL和HTTP方法,可是並不發送請求.

　　　　　　語法:

open(method,url,async,username,password)

　　　　　　參數說明:

　　　　　　　　method:是用於請求的HTTP方法.

　　　　　　　　url:參數是請求的主體.

　　　　　　　　Async:參數指示請求使用應該異步地執行.若是這個參數是false,請求是同步的.

　　　　　　　　username和password參數是可選的,爲url所需的受權提供認證資格.

　　　　5.send():發送HTTP請求,使用傳遞給open()方法的參數,以及傳遞給該方法的可選請求體.

　　　　6.setRequestHeader():向一個打開但未發送的請求設置或添加一個HTTP請求.

jQuery中的Ajax

1.load()方法

　　load()方法是jQuery中最爲簡單和經常使用的Ajax方法,一般用來載入遠程HTML代碼並將加載的HTML代碼插入DOM中.

　　語法:

load(url[, data][, callback]);

　　參數說明:

　　　　url:表示請求的HTML頁面的URL

　　　　data(可選):發送到服務器端的key/value數據(通常用json格式),爲object類型

　　　　callback(可選):請求完成(不管成功或失敗)時的回調函數

　　1)load()加載指定的HTML文件

　　2)load()可篩選載入的HTML文檔,用法是:load(url selector).

　　3)傳遞方式.load()方法的傳遞方式根據參數data來自動指定.若是沒有參數傳遞,則採用GET方式傳遞,反之,則會自動轉換爲POST方式.

　　4)回調參數.對於必須在加載完成後才能繼續的操做,load()方法提供了回調函數(callback),該函數有3個參數,分別表明請求返回的內容,請求狀態和XMLHttpRequest對象.

　　　　　　load()方法中.不管Ajax請求是否成功,只要當請求完成(complete)後,回調函數(callback)就被觸發.

 2.jQuery.get()方法與jQuery.post()方法

　　1.jQuery.get()方法

　　　　$.get()方法使用GET方式來進行異步請求.

　　　　　　語法:

$.get(url[, data][, callback][, type])

 

　　　　　　參數說明:

　　　　　　　　url:待載入頁面的URL地址;

　　　　　　　　data:(可選)待發送Key/value參數;

　　　　　　　　callback:(可選)載入成功時回調函數.

　　　　　　　　type:(可選)返回內容格式, xml,html,script,json,text,_default.

　　　　$.get()方法的回調函數:

//回調函數
function(data, textStatus{
        //代碼       
}

　　　　　　參數說明:

　　　　　　　　data:參數表明請求返回的內容,

　　　　　　　　textStatus:參數表明請求狀態,對應有success,error,notmodified,timeout等四種狀態.

　　2.jQuery.post()方法

　　　　$.post()方法經過遠程HTTP POST請求載入信息.

　　　　　　語法:

$.post(url[, data][, callback][, type])

　　　　　　參數說明:

　　　　　　　　url:待載入頁面的URL地址;

　　　　　　　　data:(可選)待發送Key/value參數;

　　　　　　　　callback:(可選)載入成功時回調函數.

　　　　　　　　type:(可選)返回內容格式,xml,html,script,json,text,_default.

　　　　　　

　　　　　　GET提交方法與POST提交方法存在以下的區別:

　　　　　　　　GET請求會將參數跟在URL後進行傳遞,而POST請求則是做爲HTTP消息的實體內容發送給Web服務器.

　　　　　　　　GET方式對傳輸的數據有大小限制(一般不能大於2KB),而使用POST方式傳遞的數據量要比GET方式大得多(理論上不受限制).

　　　　　　　　GET方式請求的數據會被瀏覽器緩存起來,所以其餘人就能夠從瀏覽器的歷史記錄中讀取到這些數據,例如帳號和密碼.在某種狀況下,GET方式會帶來嚴重的安全性問題,而POST方式相對來講安全性要高.

　　　　　　　　GET方式和POST方式傳遞的數據在服務器端的獲取也不相同.在ASP.NET中,GET方式的數據能夠用Request.QueryString獲取,而POST方式能夠用Request.Form獲取,兩種方式也均可以用Request.Params來獲取.

　　3.jQuery.getScript()方法

　　　　經過HTTP GET請求載入並執行一個JavaScript文件.

　　　　　　語法:

$.getScript(url,callback)

　　　　　　參數說明:

　　　　　　　　url:待載入JS文件地址.

　　　　　　　　callback(可選):成功載入後回調的函數.

　　4.jQuery.getJSON()方法

　　　　$.getJSON()方法用於加載JSON文件,參數和使用方法與$.getScript()方法的用法相同.

3.jQuery.ajax()方法　

 　　$.ajax()方法是jQuery底層AJAX實現.簡單易用的高層實現是$.get(),$.post()等.

　　　　結構:

$.ajax(options)

　　　　該方法只有一個參數,參數以key/value的形式存在,全部參數都是可選的,經常使用參數見表:

經常使用參數

參數名稱	參數類型	參數說明
url	string	(默認:當前頁地址)發送請求的地址
type	string	(默認:"GET") 請求方式 ("POST"或"GET"),默認爲"GET".注意:其它HTTP請求方法,如PUT和DELETE也可使用,但僅部分瀏覽器支持.
timeout	number	設置請求超時時間(毫秒).此設置將覆蓋全局設置.
data	object,string	發送到服務器的數據.將自動轉換爲請求字符串格式.GET請求中將附加在URL後.查看processData選項說明以禁止此自動轉換. 必須爲key/value格式.若是爲數組,jQuery將自動爲不一樣值對應同一個名稱.
datatype	string	預期服務器返回的數據類型.若是不指定,jQuery將自動根據HTTP包MIME信息來智能判斷,好比XML MIME類型就被識別爲XML.在1.4中,JSON就會生成一 個JavaScript對象,而script則會執行這個腳本.隨後服務器端返回的數據會根據這個值解析後,傳遞給回調函數.
beforeSend(XHR)	function	發送請求前可修改XMLhttpRequest對象的函數,如添加自定義HTTP頭.XMLHttpRequest對象是惟一的參數. 這是一個Ajax事件.若是返回false能夠取消本次ajax請求.
success	function	請求成功後的回調函數,參數:由服務器端返回,並根據dataType參數進行處理後的數據;描述狀態的字符串,Ajax事件.
error	function	(默認:自動判斷(xml或html))請求失敗時調用此函數.有如下三個參數:XMLHttpRequest對象,錯誤信息,(可選)捕獲的一場對象
complete(XHR, TS)	function	請求完成後回調函數(請求成功或失敗以後均調用).參數XMLHttpRequest對象和一個描述成功請求類型的字符串.
async	boolean	(默認:true)默認設置下,全部請求均爲異步請求.若是須要發送同步請求,請將此選項設置爲false. 注意,同步請求將鎖住瀏覽器,用戶其它操做必須等待請求完成才能夠執行.
cache	boolean	(默認:true,dataType爲script和jsonp時默認爲false) jQuery1.2新功能,設置爲false將不緩存此頁面.

4.序列化元素

　　1.serialize()方法:序列表表格內容爲字符串. 可以將DOM元素內容序列化爲字符串,用於Ajax請求.

　　2.serializeArray()方法:將DOM元素序列化後,返回JSON對象格式的數據,須要使用插件或者第三方庫進行字符串化操做.

　　3.$.param()方法:serialize()方法的核心,用來對一個數組或對象按照key/value進行序列化.

5.jQuery中的Ajax全局事件

Ajax全局事件中的方法

方法名稱	方法說明
ajaxStart(callback)	AJAX請求開始的時候
ajaxStop(callback)	AJAX請求結束後
ajaxSend(callback)	AJAX請求發送前執行的函數
ajaxError(callback)	AJAX請求發生錯誤時執行的函數
ajaxSuccess(callback)	AJAX請求成功時執行的函數
ajaxComplete(callback)	AJAX請求完成時執行的函數