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")
注：上述展示的是open方法最简单的形式。你还可以给浏览器提供向服务器发送请求使用的认证消息，就如：httpRequest.open("GET",e.target.innerHTML+''.html",true,"adam","secret")最后两个参数是应当发送给服务器的用户和密码。剩下的那个参数指定了该请求是否应当异步执行。它应该始终设置为true.
注：GET请求适用于安全的交互行为，就是那些你可以反复发起而不会带来副作用的请求。POS请求用于不安全的交互行为，意思是每一个请求都会导致服务器端发生某种变化，而重复的请求可能会带来问题。虽然还有些别的HTTP方法，但GET和POST是使用最为广泛的。
函数的最后一步是调用send()方法，如：httpRequest.send()；上述例子里没有向服务器发送任何数据，所以send方法无参数可用。