var xmlHttpRequest;
//用户名校验
//这个方法将使用XMLHTTPRequest对象来进行AJax的异步数据交互
function veryfy(){
//1.使用dom的方式获取文本框的内容
//document.getElementById("userName").value是dom中获取元素节点的value的属性值
//var userName = document.getElementById("userName").value;
//2.创建XMLHttpRequest对象
//针对不同IE和其他浏览器这个对象的不同方式写不同的代码
if(window.XMLHttpRequest){
//针对Firefox、Mozillar、Opera、Safari、IE7、IE8.
xmlHttpRequest = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的bug进行修改
if(xmlHttpRequest.overrideMimeType){
xmlHttpRequest.overrideMimeType("text/html");
}
}else if(window.ActiveXObject){
//针对IE6,IE5.5,IE5
//两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js数组当中
//排在前面的版本较新
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activexName.length;i++){
try{
//取出一个控件名进行创建,如果创建成功就终止循环
//如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建
xmlHttpRequest = new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
//2.注册回调函数(只需函数名),而不是赋予函数的返回值
xmlHttpRequest.onreadystatechange = callback;
//3.设置连接信息
xmlHttpRequest.open("GET","AjaxServer?name="+userName,true);
//4.发送数据,开始和服务器端进行交互
xmlHttpRequest.send(null);
// 同步和异步的区别:
//同步方式下:send会在服务器端返回数据之后才会执行完
//异步方式下:send会立即执行
}
//回调函数
function callback(){
//判断对象的状态是否交互完成
if(xmlHttpRequest.readyState == 4){
//判断http的交互是否成功
if(xmlHttpRequest.status == 200){
//获取服务器返回的数据
var responseText = xmlHttpRequest.responseText;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的节点上
var divNode = document.getElementById("result");
divNode.innerHTML = responseText;
}
}
}
xmlhttprequest对象的创建
最新推荐文章于 2024-07-17 14:44:04 发布