1.建立XMLHttpRequest对象。
建立XMLHttpRequest对象时,要根据浏览器的不同版本去建立,因为IE5.0和iE6.0,开发人员就可以在WEB页面内部使用XMLHTTP ActiveX组件扩展自身的功能;而从IE7版本以上以及其他厂商的浏览器,开始创建继承XML的代理类XMLHttpRequest,所以创建上会有不同。
var xmlhttp;//定义全局变量
<span style="white-space:pre"> </span>//1.创建xmlhttprequest对象
if (window.XMLHttpRequest) {
//firefox等其他浏览器、ie7、8及以上版本适用
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
} else if (window.ActiveXObject) {
//ie5、6版本版本适用
var activexName = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.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==undefined || xmlhttp==null) {
alert("当前浏览器不支持创建xmlhttprequest对象");
return;
}
2.注册回调函数
//2.注册一个回调方法
xmlhttp.onreadystatechange = callback;
3.使用open方法设置和服务器交互的信息,并设置发送的数据,
open方法中的也有get和post的提交方式。post的方式时,要设置它的头文件,并且需要发送时需要将参数写的send中
//GET方式交互
//3.设置和服务器交互的相应参数
xmlhttp.open("GET","HtmlPage1.ashx?username=" + userName,true);
////设置服务器端发送的数据。启动和服务器的交互
xmlhttp.send(null);
//POST方式交互
//3.利用open,设置和服务器交互的相应参数
xmlhttp.open("POST","HtmlPage1.ashx",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //POST方式所需要增加的代码,头文件
//设置服务器端发送的数据。启动和服务器的交互,以及传递参数
xmlhttp.send("username=" + userName);
4.在回调函数中判断交互是否完成,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容。
//回调函数
function callback()
{
//5.判断和服务器器的交互是否完成,服务器端是否正确返回了数据
if (xmlhttp.readyState == 4) {//表示服务器端的交互已经完成
if (xmlhttp.status == 200) {//表示正确的返回了数据
//纯文本的方法接受方法
var message = xmlhttp.responseText;
//xml数据对应的dom对象的接受方法
//使用的前提是,服务器端需要设置
//记忆向div标签中添加文本内容
var div1 = document.getElementById("message");
div1.innerHTML = message;
}
}
}