ajax技术核心

最新推荐文章于 2025-08-16 17:02:07 发布

weixin_34306446

最新推荐文章于 2025-08-16 17:02:07 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/chinamummy29/blog/285370

2019独角兽企业重金招聘Python工程师标准>>>

/**
 * AJAX技术核心
 * 
 * <input name="name" .../> 提交name
 * 
 * 1.创建XMLHTTPRequest
 * 2.设置回调函数
 * 3.使用open方法与服务器建立连接
 * 4.send,向服务器数据发送
 * 5.在回调函数针对不同响应状态进行处理
 */
var xmlhttp;
//用户名校验
//使用XMLHTTPrequest对象进行AJAX对象交互
function verify(){
 var name = document.getElementById("name").value;
 
 //创建XMLHTTPrequest对象
 //需要针对IE和其它类型的浏览器建立这个对象的不同方式写不同的代码
 if(window.XMLHttpRequest){
  //针对主流浏览器
  xmlhttp = new XMLHttpRequest();
  //针对某些版本的浏览器进行BUG修正
  if(xmlhttp.overrideMomeType){
   xmlhttp.overrideMimdeType("text/xml");
  }
 }else if(window.ActiveXObjext){
  //IE6,IE6-
  //两个可以用于创建XMLHttpRequest对象的控件名称保存在js数组中
  var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
  for(var i=0;i<activeName.length;i++){
   try {
    xmlhttp = new ActiveXObject(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);
}
//回调函数
function callback(){
 //判断对象的状态是否交互完成
 if(xmlhttp.readyState == 4){
  //判断http的交互是否成功
  if(xmlhttp.status == 200){
   //使用responseXML的方式来接受xml数据对象
   var domObj = xmlhttp.responseXML;
   //利用getElementByTagName根据标签前面来获取元素
   var messageNode = domObj.getElementsByTagName("message");
   if(messageNode.length > 0){
    //var responseMessage = messageNode[0].innerHTML;
    var textNode = messageNode[0].firstChild;
    //nodeValue返回文本节点的文本内容
    var responseMessage = textNode.nodeValue;
    
    //将数据显示在页面上
    var divNode = document.getElementById("result");
    divNode.innerHTML = responseMessage;
   }else{
    alert("xml数据出错:"+xmlhttp.responseText);
   }
  }
 }
}

转载于:https://my.oschina.net/chinamummy29/blog/285370