通过XMLHttpRequest对象，AJAX可以只同服务器进行数据层面的交换，而不用每次都刷新页面。下面就简单介绍一下XMLHttpRequest对象的使用。
一、XMLHttpRequest对象的五步使用法
1、建立XMLHttpRequest对象
3、使用open方法设置和服务器端交互的基本信息
4、设置发送的数据，开始和服务器端交互
5、在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面内容。
二、知识详解
1、在使用XMLHttpRequest对象发送请求和处理响应之前，首先需要初始化该对象，由于XMLHttpRequest不是一个W3C标准，所以对于不同的浏览器，初始化方法也不同。如此所示。
function submit(){
//alert("test");
//1、创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
//用于IE7，IE8，FireFox，Mozilla，Safari，Opera浏览器
alert("IE7，IE8，FireFox，Mozilla，Safari，Opera");
var xmlhttp=new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
}else if (window.ActiveXObject) {
//用于IE6，IE5，IE5.5浏览器
alert("IE6，IE5，IE5.5");
//定义一个包含所有可以用于创建XMLHttpRequest对象的ActiveX控件的名称的数组
var activexName=["MSXML2.CMLHTTP.6.0","MSXML2.CMLHTTP.5.0","MSXML2.CMLHTTP.4.0","MSXML2.CMLHTTP.3.0","MSXML2.XMLHTTP","Misorosoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
var xmlhttp=new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
if (xmlhttp==undefind || xmlhttp==null) {
alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
return;
}
//alert(xmlhttp);执行效果如下：
2、XMLHttpRequest对象的常用方法
3、XMLHttpRequest对象的常用属性
三、代码实现
<script type="text/javascript">
function submit(){
//alert("test");
//1、创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
//用于IE7，IE8，FireFox，Mozilla，Safari，Opera浏览器
//alert("IE7，IE8，FireFox，Mozilla，Safari，Opera");
var xmlhttp=new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
}else if (window.ActiveXObject) {
//用于IE6，IE5，IE5.5浏览器
// alert("IE6，IE5，IE5.5");
//定义一个包含所有可以用于创建XMLHttpRequest对象的ActiveX控件的名称的数组
var activexName=["MSXML2.CMLHTTP.6.0","Misorosoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
var xmlhttp=new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
if (xmlhttp==undefind || xmlhttp==null) {
alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
return;
}
//alert(xmlhttp);
//2、注册回调方法：
//目的：服务器端的数据返回给XMLHttpRequest对象，可以执行回调方法，并取到相应数据，并更新页面
xmlhttp.onreadystatechange=callback;//调用callback方法
//错误的写法：
//xmlhttp.onreadystatechange=callback();//调用callback方法将最后的结果返回值赋值给onreadystatechange
//获取文本框中用户输入的内容
var userName=document.getElementById("UserName").value;
//用GET方式
//3、设置和服务器端交互的相应参数
//open的参数介绍①第一个参数：与服务器交互的方式
//②所请求的服务器的地址③表示XMLHttpRequest对象是采用异步交互还是同步交互
xmlhttp.open("GET","AJAX?name="+userName,true);
//4、设置向服务器端发送的数据，启动和服务器端的交互
xmlhttp.send(null);
//以上为用GET方式交互
//用POST方式
//3、设置和服务器端交互的相应参数
//open的参数介绍①第一个参数：与服务器交互的方式
//②所请求的服务器的地址③表示XMLHttpRequest对象是采用异步交互还是同步交互
xmlhttp.open("POST","AJAX",true);
//POST方式交互所需要增加的代码
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4、设置向服务器端发送的数据，启动和服务器端的交互
xmlhttp.send("name="+ userName);
//以上为用POST方式交互
}
function callback(){
//5、判断和服务器端的交互是否完成，还要 判断服务器端是否正确返回了数据
if (xmlhttp.readyState==4) {
//表示和服务器端的交互已经完成
if (xmlhttp.status==200) {
//表示服务器的响应代码是200，正确返回了数据
//纯文本数据的接收方法
var message=xmlhttp.responseText;
//XML数据对应的DOM对象的接受方法
//使用的前提是，服务器端需要设置xontenttype为text/xml
//var domXml=xmlhttp.responseXML;
//向div标签中填充文本内容的方法
var div=document.getElementById("message");
div.innerHTML=message;
}
}
}
</script>