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>