一嗤朴、同步交互與異步交互
客戶端想服務(wù)器端發(fā)送請求错维，直到服務(wù)器端進(jìn)行響應(yīng)，這個過程中任内，用戶是不能做任何其他事情的(等)
客戶端想服務(wù)端發(fā)送請求赎瞎，直到服務(wù)端進(jìn)行響應(yīng)牌里，這個過程中，用戶是可以做其他事情的(不用等)
二务甥、AJAX
asynchronous javascript and xml,直譯中文-javascript和xml的異步
AJAX是一種用來改善用戶體驗(yàn)的技術(shù)牡辽，其實(shí)質(zhì)是喳篇，使用XMLHttpRequest對象異步地向服務(wù)器發(fā)請求
服務(wù)器返回部分?jǐn)?shù)據(jù)，而不是一個完整的頁面态辛，以頁面無刷新的效果更改頁面中的局部內(nèi)容
-
Ajax的核心對象
XMLHttpRequest對象
-
獲取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事件
三铣耘、實(shí)現(xiàn)ajax的異步交互步驟
創(chuàng)建XMLHttpRequest核心對象
固定寫法-獨(dú)立編寫與服務(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請求方式
必須要在send()方法調(diào)用之前炉媒，使用setRequestHeader()方法設(shè)置請求頭，參數(shù)為key-value
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
異步交互基本步驟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>異步交互基本步驟</title>
</head>
<body>
用戶名：<input type="text" name="user" id="user" /><br />
<button id="btn">提交</button>
<div id="content" style="width: 100px;height: 100px;border: 1px solid black;">
</div>
</body>
<script type="text/javascript">
/*
*將input中的內(nèi)容異步提交到服務(wù)器昆烁，然后將服務(wù)器響應(yīng)回來的內(nèi)容吊骤，放到div里面
*/
document.getElementById("btn").onclick = function () {
//1.創(chuàng)建ajax對象
var xhr = getXhr();
//2.跟服務(wù)器建立連接,open第三個布爾參數(shù)可以設(shè)置同步交互還是異步交互，默認(rèn)為true静尼，為異步交互白粉，現(xiàn)在ajax已經(jīng)慢慢的棄用同步交互
/*
*使用get方式提交數(shù)據(jù)，要將參數(shù)提交到url的后面,并且發(fā)送時(shí)設(shè)置發(fā)送內(nèi)容為空
*/
var input = document.getElementById("user");
xhr.open("GET","myphp01.php?user="+input.value);
//3.發(fā)送數(shù)據(jù),格式為key=value鼠渺，多個參數(shù)用&隔開
xhr.send(null);
//4.監(jiān)聽服務(wù)器的響應(yīng)
xhr.onreadystatechange = function () {
//當(dāng)數(shù)據(jù)接收完畢鸭巴，以及請求成功時(shí)，做處理（多出來的兩步）
if(xhr.readyState == 4 && xhr.status == 200){
//將響應(yīng)的內(nèi)容放到div里
document.getElementById("content").innerHTML = xhr.responseText;
}
}
function getXhr () {
//設(shè)置一個空變量
var xhr = null;
//判斷是否支持XMLHttpRequest
if(window.XMLHttpRequest){//支持拦盹，非IE的方式
xhr = new XMLHttpRequest();
}else{//不支持鹃祖，IE的方式
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
}
</script>
</html>