AJAX 可以在不重新加載整個頁面的情況下，與服務器交換數據並更新部分網頁內容（默認是異步）
（1）使用ajax會用到XMLHttpRequest()對象
（2）然后使用open方法定義請求方法和請求地址，參數格式open（‘請求方法’，‘請求地址’），請求方法有兩種，get和post
（3）然后使用send方法定義傳輸數據，參數格式send（傳輸數據）
其中請求后台后會得到響應結果，可以通過onreadystatechange狀態事件來監測，其中readyState屬性一共有四個狀態碼：
readyState==1【服務器連接已建立】
readyState==2【請求已接收】
readyState==3【請求處理中】
readyState==4【請求已完成，且響應已就緒】
下面是ajax用get的簡單例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax-get</title>
<script>
function checkname() {
var name=document.getElementById('username').value;
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function () {
if (xhr.readyState==4){
alert(xhr.responseText);
}
};
xhr.open('get','get.php?name='+name);
xhr.send(null);
}
</script>
</head>
<body>
<div style="width: 400px;margin: 0 auto">
<h1>輸入內容后離開鼠標</h1>
<p>用戶名：<input type="text" id="username" onblur="checkname()"></p>
</div>
</body>
</html>
這是get.php代碼
print_r($_GET);
下面是ajax使用post的簡單例子，這里需要另外加上setRequestHeader("content-type","application/x-www-form-urlencoded")，用來設置請求頭信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax-post</title>
<script>
function checkname() {
var nam=document.getElementById('username').value;
var info="name="+nam;
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function () { //四個請求返回狀態
if (xhr.readyState==1){
console.log(1);
}
if (xhr.readyState==2){
console.log(2);
}
if (xhr.readyState==3){
console.log(3);
}
if (xhr.readyState==4){
console.log(4);
alert(xhr.responseText);
}
};
xhr.open('post','post.php');
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(info);
}
</script>
</head>
<body>
<div style="width: 400px;margin: 0 auto">
<h1>輸入內容后離開鼠標</h1>
<p>用戶名：<input type="text" id="username" onblur="checkname()"></p>
</div>
</body>
</html>
這是post.php代碼
print_r($_POST);
常說的ajax輪詢
就是通過setInterval定時器每段時間執行一次，一直循環，函數使用例子為：
setInterval(執行函數,每次執行間隔時間)
而settimeout是在指定的時間后執行，但只執行一次，函數使用例子為：
settimeout(執行函數,距離執行間隔時間)