一、同步交互與異步交互
客戶端想服務(wù)器端發(fā)送請求，直到服務(wù)器端進行響應(yīng)，這個過程中，用戶是不能做任何其他事情的(等)
客戶端想服務(wù)端發(fā)送請求，直到服務(wù)端進行響應(yīng)，這個過程中，用戶是可以做其他事情的(不用等)
二、AJAX
asynchronous javascript and xml,直譯中文-javascript和xml的異步
AJAX是一種用來改善用戶體驗的技術(shù)，其實質(zhì)是，使用XMLHttpRequest對象異步地向服務(wù)器發(fā)請求
服務(wù)器返回部分數(shù)據(jù)，而不是一個完整的頁面，以頁面無刷新的效果更改頁面中的局部內(nèi)容
-
Ajax的核心對象
XMLHttpRequerst對象 -
獲取XMLHttpRequest對象
function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ //除IE外的其他瀏覽器 xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; } -
屬性
-
readyState 請求狀態(tài)
0 尚未初始化 1 正在發(fā)送請求 2 請求完成 3 請求成功，正在接受數(shù)據(jù) 4 數(shù)據(jù)接收成功 -
status 請求響應(yīng)值
200 表示請求成功 202 請求被接受但處理未完成 400 錯誤的請求 404 資源未找到 500 內(nèi)部服務(wù)器錯誤，如asp代碼錯誤等
responseText 服務(wù)器返回的文本
responseXML 服務(wù)器返回的xml，可以當(dāng)做DOM處理
-
-
方法
open(method,url) - 與服務(wù)端建立連接
send() - 向服務(wù)器端發(fā)送請求
abort() - 取消請求
getAllResponseHeaders() - 得到響應(yīng)的所有http頭
getResponseHeader() - 獲取指定的http頭
setRequestHeader() - 指定請求的Http頭
-
事件
onreadystatechange事件作用 - 監(jiān)聽服務(wù)端的通信狀態(tài)改變
當(dāng)Ajax對象的readyState的值發(fā)生了改變，比如，從0變成了1，就會產(chǎn)生readystatechange事件
三、實現(xiàn)ajax的異步交互步驟
- 創(chuàng)建XMLHttpRequest核心對象
getXhr()
-
與服務(wù)區(qū)建立連接
使用XMLHttpRequest對象的open(method,url)
-
向服務(wù)器發(fā)送請求
使用XMLRequest對象的send()方法
請求參數(shù)的格式 - key=value -
接受服務(wù)器響應(yīng)的數(shù)據(jù)
使用XMLHttpRequest對象的readystatechange事件監(jiān)聽服務(wù)器端的通信狀態(tài)
使用XMLHttpRequest對象的readyState屬性，判斷服務(wù)器端當(dāng)前狀態(tài)(0-4)
使用XMLHttpRequest對象的statue屬性，判斷服務(wù)器端的狀態(tài)碼(200)
使用XMLHttp對象的responseText屬性，接受服務(wù)器端的響應(yīng)數(shù)據(jù)
注意：get與post方式
* get請求方式
send()方法不起作用，但是不能被省略
xhr.send(null) 請求參數(shù)，添加到url?key=value
* post請求方式
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
必須要在send()方法調(diào)用之前，使用setRequestHeader()方法設(shè)置請求頭，參數(shù)為key-value
application/x-www-form-urlencoded 將字符串的鍵值對轉(zhuǎn)換成數(shù)組，能夠通過key獲取到里面的值