Ajax使用概述
Ajax的优势在于不刷新页面的情况下，更新页面数据，提升用户体验。
1.核心对象
Ajax核心对象XMLHTTPRequest，创建该对象分IE浏览器和非IE：
IE:
var xhr = new ActiveXObject('Microsoft.XMLHTTP'); //最原始
var xhr = new ActiveXObject('Msxml2.XMLHTTP'); //升级
非IE：
var xhr = new XMLHttpRequest();2.核心属性
核心属性readyState，Ajax的整个过程有5个状态，对应readyState的0-4的值。
- 0：创建了ajax对象
- 1：已调用open方法
- 2：已调用send方法
- 3：服务器端返回部分数据
- 4：服务器数据返回完毕，ajax请求完毕
3.核心方法
（1）open：准备ajax请求
open(var1,var2,var3);
var1:请求方式 post/get
var2:请求的后台程序的地址
var3:同步方式（可选） 异步（true默认值）/同步（false）（2）send：发送ajax请求
send(var);
var:get方式，传入null即可
post方式，是一个XML对象4.其他属性和事件
（1） responseText：以字符串形式接收服务器端返回的数据
（2）responseXML：以xml格式接收服务器端返回的数据
（3）onreadystatechange事件：readyState的值每次发生变化都会触发该事件
5.简单实例
目标：前台HTML页面上设置一个按钮，获取后台程序的返回值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取</title>
</head>
<body>
<!-- 按钮上绑定点击事件 -->
<button onclick="getContent()">获取</button>
<div id="d"></div>
<script>
function getXmlHttp(){
var xhr = null;
try{
// 创建标准浏览器对象
xhr = new XMLHttpRequest();
}catch(e){
// 创建低版本ie浏览器对象
try{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}catch(ex){
xhr = new ActiveXObject('Msxml2.XMLHTTP');
}
}
return xhr;
}
function getContent(){
// 获取XMLHTTPRequest对象
var xhr = getXmlHttp();
// 调用open方法准备ajax请求
xhr.open('get','sim.html');
// 使用onreadystatechange方法检测readyState状态
xhr.onreadystatechange =function(){
// 判断已正常接收到后台返回数据后，显示到页面div中
if(xhr.readyState == 4){
document.getElementById('d').innerHTML = xhr.responseText;
}
}
// 调用send方法发送ajax请求
xhr.send(null);
}
</script>
</body>
</html>