Ajax的关键在于XMLHttpRequest对象，如下基本用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<button>Apples</button>
<button>Cherries</button>
<button>Bananas</button>
</div>
<div id="target">
press a button
</div>
<script type="text/javascript">
var buttons=document.getElementsByTagName("button")
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=handleButtonPress;
}
function handleButtonPress(e){
var httpRequest=new XMLHttpRequest();
httpRequest.onreadystatechange=handleResponse;
httpRequest.open("GET",e.target.innehttpRequest=new XMLHttpRequest();rHTML+".html")
httpRequest.send()
}
function handleResponse(e){
if(e.target.readyState==XMLHttpRequest.DONE&&e.target.status==200){
document.getElementById("target").innerHTML=e.target.responseText;
}
}
</script>
</body>
</html>
第一步是创建一个新的XMLHttpRequest对象。与之前在DOM中见过的大多数对象不同，你并非通过浏览器定义的某个全局变量来访问这类对象，而是使用关键词new如：var httpRequest=new XMLHttpRequest();
下一步是给readystatechange事件设置一个事件处理器。这个事件会在请求过程中被多次触发，向你提供事情的进展情况。将onreadystatechange属性的值设为handleResponse;httpRequest.onreadystatechange=handleResponse;可以告诉XMLHttpRequest对象你想要做什么，使用open方法来指定HTTP方法（在这里是GET）和需要请求的URL:httpRequest.open("GET",e.target.innerHTML+".html")注：