踏进AJAX
本章目标
掌握AJAX的主要作用；
掌握XMLHttpRequest对象的创建及使用。
AJAX技术简介
AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML），AJAX并不是一项新的技术，它产生的主要目的是用于页面的局部刷新，从之前的代码开发来看，读者可以发现，每当用户向服务器端发出请求时，那怕需要的只是简单的更新一点点的局部内容，服务器端都会将一个整体的页面进行刷新，并重新生成代码，这样一来程序的性能肯定会有所降低的，而如果采用了AJAX技术之后，就可以实现局部的内容变更，而不用再进行整体的页面刷新，显然处理的性能要比前者高很多
XMLHttpRequest对象
在AJAX中主要是通过XMLHttpRequest对象处理发送异步请求和处理回应的，此对象最早是在IE 5中以ActiveX组件的形式出现的，一直到2005年之后才被广泛的使用，而如果要想创建一个XMLHttpRequest对象必须使用JavaScript。
创建XMLHttpRequest对象 —— create_ajax.htm
<script language="JavaScript">
var xmlHttp ; // AJAX核心对象名称
function createXMLHttp() { // 创建XMLHttpRequest核心对象
if (window.XMLHttpRequest) { // 判断当前使用的浏览器类型
xmlHttp = new XMLHttpRequest();// 表示使用的为FireFox内核的浏览器
} else { // 表示使用的是IE内核的浏览器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
本人进行了测试
xmlHttp=new XMLHttpRequest();//兼容IE9，最新的火狐，最新的谷歌
XMLHttpRequest对象的属性
readState取值
对readState一共有五种取值，分别是：
0：请求没有发出（在调用open()函数之前之前）。
1：请求已经建立但还没有发出（调用send()函数之前）。
2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
3：请求已经处理，正在接收服务器的信息，响应中通常有部分数据可用，但是服务器还没有完成响应。
4：响应已完成，可以访问服务器响应并使用它。
XMLHttpRequest对象的方法
在content.html写上
Hello world!!!
使用异步处理 —— ajax_receive_content.htm
<html>
<head>
<title>返回数据的页面</title>
</head>
<body>
<script type="text/javascript">
var xmlHttp; //Ajax 核心对象名称
function createXMLHttp(){//创建 XMLHttpRequest 核心对象
xmlHttp=new XMLHttpRequest();//兼容IE9，最新的火狐，最新的谷歌
}
function showMag(){
createXMLHttp(); //建立 XMLHttp 核心对象
xmlHttp.open("POST", "content.html");//设置一个请求
//设置请求完成之后处理的回调函数
xmlHttp.onreadystatechange=showMsgCallback;
xmlHttp.send(null);//发送请求，不传递任何参数
}
function showMsgCallback(){//定义回调函数
if(xmlHttp.readyState==4){//数据返回完毕
if(xmlHttp.status==200){//HTTP操作正常
var text = xmlHttp.responseText;//接收返回的内容
//设置要使用的CSS样式表
document.getElementById("msg").className="样式表名称";
//设置 msg 标签元素中要显示的内容为 Ajax 接收的返回值内容
document.getElementById("msg").innerHTML=text;
}
}
}
</script>
<input type="button" onclick="showMag()" value="调用 Ajax 显示内容" />
<span id="msg"></span>
</body>
</html>
效果图：
小结
使用AJAX可以完成局部刷新操作；
在AJAX中主要是通过XMLHttpRequest对象完成操作。