第六章 jQuery中的Ajax應用

               第六章 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進行序列化.