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=" 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=" 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(执行函数,距离执行间隔时间)