一、Ajax的基礎：
1、使用步驟
1.1、步驟：
- 創建一個異步對象
- 設置請求方式和請求地址
- 發送請求
- 監聽狀態的變化
- 處理返回的結果
1.2、示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax使用</title>
<script>
window.onload = function (ev) {
var btn = document.querySelector("button");
btn.onclick = function (ev1) {
//創建一個異步對象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//設置請求方式和請求地址
/*
method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）
*/
/*注意：在IE瀏覽器中，如果通過Ajax發送GET請求，那么IE瀏覽器認為同一個URL只有一個結果
可以通過時間戳或者隨機數來給請求地址添加一個參數，這樣就可以實現每次的請求地址都不一樣，
而且服務器還可以接收到這個請求，只是對添加的這個參數不作處理即可
*/
var timeStamp = new Date().getTime();
xmlhttp.open("GET", "http://{ip地址}/ajax_index.php?"+ timeStamp, true);
//發送請求
xmlhttp.send();
//監聽狀態的變化
xmlhttp.onreadystatechange = function () {
//處理返回的結果
if (xmlhttp.readyState===4) { //請求已完成
console.log("完成請求");
//判斷是否請求成功
if (xmlhttp.status>=200 <=300 ||
xmlhttp.status===304) {
console.log("接受到服務器返回的數據");
} else {
console.log("沒有接受到服務器返回的數據");
}
}
};
};
}
</script>
</head>
<body>
<button>發送請求</button>
</body>
</html>
