1、建立XMLHttpRequest对象
2.注册回调函数
3.使用open方法设置和服务器端交互的基本信息
4.设置发送的数据,开始和服务器端交互
5.在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容
实例:
//1、创建XMLHttpEeauest对象
if (window.XMLHttpRequest) {
//IE7 IE8 FireFox Mozillar Safari Opera
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMineType){
xmlhttp.overrideMimeType("text/xml");
}else if(window.ActiveXObject){
//IE6 IE5 IE5
var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLTHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
for(var i=0;i< activexName.length;i++){
try{
xmlhttp=new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
if (xmlhttp === underfined|| xmlhttp === null) {
alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
return;
}
//2.注册回调方法
xmlhttp.onreadystatechange = callback;
var userName = document.getElementById("UserName").value ;
//3.设置和服务器端交互的相应参数
xmlhttp.open("GET","AJAX?name=" +userName,true);
//POST方式交互所需要增加的相应代码
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.设置服务器发送的数据,启动和服务器端的交互
xmlhttp.send("name =" +userName);
//5.判断和服务器端的交互是否完成,还要判断服务器端是否正确返回了数据
if(xmlhttp.readyState ===4){
//表示和服务器端的交互已经完成
if(xmlhttp.status === 200)
//表示服务器的响应代码是200,正确的返回了数据
//纯文本数据的接受方法
var message =xmlhttp.responseText;
//XML数据对应的DOM对象的接受方法
//使用前提,服务端需要设置content-type为text/xml
//var domXml =xmlhttp.resposeXML;
//记忆向div标签中填充文本内容的方法
var div = document.getElementById("message");
div.innerHTML = message;
}