ajax技术核心

/**
*AJAX技术核心
*
*<inputname="name".../>提交name
*
*1.创建XMLHTTPRequest
*2.设置回调函数
*3.使用open方法与服务器建立连接
*4.send,向服务器数据发送
*5.在回调函数针对不同响应状态进行处理
*/
varxmlhttp;
//用户名校验
//使用XMLHTTPrequest对象进行AJAX对象交互
functionverify(){
varname=document.getElementById("name").value;

//创建XMLHTTPrequest对象
//需要针对IE和其它类型的浏览器建立这个对象的不同方式写不同的代码
if(window.XMLHttpRequest){
//针对主流浏览器
xmlhttp=newXMLHttpRequest();
//针对某些版本的浏览器进行BUG修正
if(xmlhttp.overrideMomeType){
xmlhttp.overrideMimdeType("text/xml");
}
}elseif(window.ActiveXObjext){
//IE6,IE6-
//两个可以用于创建XMLHttpRequest对象的控件名称保存在js数组中
varactiveName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(vari=0;i<activeName.length;i++){
try{
xmlhttp=newActiveXObject(activeName[i]);
break;
}catch(e){
//
}
}
}
//确认XMLHTTPrequest对象创建成功
if(!xmlhttp){
alert("XMLHttpRequest对象创建失败");
}else{
//alert(xmlhttp);
}

//注册回调函数(函数名,不需要加括号)
//如果加上括号,就会把函数的返回值注册上,error
xmlhttp.onreadystatechange=callback;

//设置连接信息
//第三个参数表示采用异步还是同步方式交互,true为异步
xmlhttp.open("GET","ajaxServlet?name="+name,true);

//xmlhttp.open("POST","ajaxServer",true);
//POST需要自己设置http的请求头
//xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

//发送数据,和服务器端进行交互
//get方式的数据全部在url里面,所以为null
xmlhttp.send(null);

//POST方式发送数据
//xmlhttp.send("name="+name);
}
//回调函数
functioncallback(){
//判断对象的状态是否交互完成
if(xmlhttp.readyState==4){
//判断http的交互是否成功
if(xmlhttp.status==200){
//使用responseXML的方式来接受xml数据对象
vardomObj=xmlhttp.responseXML;
//利用getElementByTagName根据标签前面来获取元素
varmessageNode=domObj.getElementsByTagName("message");
if(messageNode.length>0){
//varresponseMessage=messageNode[0].innerHTML;
vartextNode=messageNode[0].firstChild;
//nodeValue返回文本节点的文本内容
varresponseMessage=textNode.nodeValue;

//将数据显示在页面上
vardivNode=document.getElementById("result");
divNode.innerHTML=responseMessage;
}else{
alert("xml数据出错:"+xmlhttp.responseText);
}
}
}
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!