Ajax (Asynchronous JavaScript and XML)
??即用JavaScript執行異步網絡請求，可以在無需加載整個頁面的情況下能夠更新部分網頁的技術
?
?
-
XMLHttpRequest對象
?用于在后臺與服務器交換數據
- 創建對象
var xmlHttp;
//大部分瀏覽器能夠支持XMLHttpRequest
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
//舊版本IE使用ActiveXObject
else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
- 向服務器發送請求
方法：
- open(method,url,async)：規定請求的類型、URL 以及是否異步處理請求。
method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步） - send(string) ：將請求發送到服務器。
string：僅用于 POST 請求
??
必須使用POST情況：
- 無法使用緩存文件（更新服務器上的文件或數據庫）
- 向服務器發送大量數據（POST 沒有數據量限制）
- 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
??
- 獲取服務器響應
responseText 獲得字符串形式的響應數據。
responseXML 獲得 XML 形式的響應數據。
- onreadystatechange事件
XMLHttpRequest對象三個屬性
<div id="name"><p>今天是個好日子阿</p></div>
<button id="btn">點擊改變網頁信息</button>
<script>
document.getElementById("btn").onclick = ()=>{
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState ===4 && xmlHttp.status === 200){
document.getElementById("name").innerHTML = xmlHttp.responseText;
}
};
xmlHttp.open("GET","/code/project/ajax/test/aaa.txt",true);
xmlHttp.send();
};
</script>
