第六章 jQuery中的Ajax應用
1.Ajax:客戶端javascript所發起的http請求的代號,無刷新的數據更新.
2.編程模型:
(1).同步代碼:按鈕按下 執行耗時操作 等待執行返回 (多線程)
(2).異步代碼:按鈕按下 執行耗時操作 不會等待返回 直到完成才通知調用函數
3.Ajax的優點:
(1).不需要任何瀏覽器插件,在任何支持javascript的瀏覽器上運行.
(2).優秀的用戶體驗.
(3).提高web程序的性能.
(4).減輕服務器和寬帶的負擔.
4.Ajax的缺點:
(1).可能破換瀏覽器後退按鈕的正常行爲.
(2).對搜索引擎的支持不足.
(3).開發和調試工具的不足.
(4).手持設備支持性差.
5.XMLHttpRequest對象屬性:
(1).readyState:http請求的狀態.當一個XMLHttpRequest初次創建時,這個屬性的值從0開始,直到接收到完整的HTTP響應,這個值增加到4.
{0:Uninitialized 初始狀態
1:Open open方法已調用.但是send()還未調用,請求還未發送
2:Sent send()已調用,http請求發送到web服務器,未接受到響應(已發送,未接收)
3:Receiving 所有響應頭部已經接收到,響應體開始接收但未完成(開始接收)
4:Loaded http響應已經完全接收(接收完畢)
}
(2).responseText:從服務器接收到的響應體(不包括頭部),或者如果還沒有接收到數據的話,(readyState<3)就是空字符串.
(3).responseXML:對請求的響應,解析爲xml並作爲Document對象返回.
(4)statusText:表狀態
status=200 表示OK
status=404 表示Not Found
6.XMLHttpRequest方法
(1)abort() 取消當前響應,關閉鏈接並且結束任何未決的網絡活動
(2)getAllResponseHeaders()
把http響應頭部作爲未解析的字符串返回.
(3)getResponseHeaders()
返回指定的http響應頭部的值
(4)Open() 初始化http的請求參數,但是不發送請求
語法:
open(method,url,async,username,password)
method:用於請求的http的方法,(值包括get,post,head)
url:參數時請求的主體.
async:參數指示請求使用應該異步的執行.
(5)send()
發送http請求,使用傳遞給open()方法的參數,以及傳遞給該方法的可選請求體.
語法:send(body)
(6)setRequesHeader() 向一個打開但未發送的請求設置或添加一個http請求.
語法:
setRequesHeader(name,value)
name:參數是要設置的頭部的名稱.
value:參數時頭部的值
7.jQuery中的Ajax
(1)最底層:$.ajax()
第二層:load(),$.get()和$.post()
第三層:$.getscript()和$getJson()
(2)load()方法
語法:
load(url[,data][,callback])
url:表示請求的html頁面的url;
data(可選):發送到服務器端的key/value數據(一般用json格式),爲object類型;
callback(可選):請求完成任務(無論成功或失敗)時的回調函數;
(3)$.get()方法
語法:
$.get(url[,data][,type])
url:待載入頁面的url地址;
data(可選):待發送key/value參數;
callback:(可選)載入成功時回調函數;
type:(可選)返回內容格式,xml,html,script,json,text,_default;
(4)$.post()方法
語法:
$.post(url[,data][,type])
url:待載入頁面的url地址;
data(可選):待發送key/value參數;
callback:(可選)載入成功時回調函數;
type:(可選)返回內容格式,xml,html,script,json,text,_default;
(5)$.getScript()方法
語法:
$.getScript(url,callback)
url:待載入的JS文件的地址;
callback:(可選)成功載入後回調的函數;
(6)$.getJson()方法
語法:
$.getJson(url,callback)
url:待載入的Json文件的地址;
callback:(可選)成功載入後回調的函數;
(7)$.ajax()方法
結構爲:
$.ajax(options) 所有參數都是可選的
8.序列化元素
(1)seralize()方法 序列表表格內容爲字符串(用於Ajax請求)
(2)serializeArray()方法
將DOM元素序列化後,返回json對象格式的數據,需要使用插件或者第三方庫進行字符串化操作.
(3)$.param()方法
$.param()是serialize()方法的核心,用來對一個數組或對象按照key/value進行序列化.