(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象;
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息;
xmlhttp.open("GET","ajax_info.txt",true);
(3) 设置响应HTTP请求状态变化的函数;
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){//状态码
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//回调函数
}
}
(4) 发送HTTP请求;
xmlhttp.send();
(5) 获取异步调用返回的数据;
xmlhttp.responseText
(6) 使用JavaScript和DOM实现局部刷新。
完整的实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" οnclick="loadXMLDoc()">修改内容</button>
</body>
</html>