论坛首页 Web前端技术论坛

AJAX学习感想

浏览 2009 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-12-13  
前面做项目的时候老师也跟我们提过AJAX,是一个可以实现局部刷新的技术,现在很流行.今天老师给我们具体的讲了一下,用一句话说so easy!呵呵!今天做了个例子,是实现了一个简单的数据校验,就是验证用户名和密码的.不用刷新页面就可以提交的.真的是so easy!
下面是JS代码:
<script type="text/javascript">
var abc;
function sendData(){
var name = document.getElementById("userName");
  var pwd = document.getElementById("pwd");
  var nameValue =name.value;
  var pwdValue = pwd.value;
  var serverUrl = "servlet/AjaxServlet";
  abc = getAjaxObject();
  abc.onreadystatechange = showAbc;
  abc.open("get",serverUrl+"?a="+nameValue+"&b="+pwdValue,true);
  abc.send();
  var buttonObj = document.getElementById("buttonId");
buttonObj.disabled = true;
var msgObj = document.getElementById("msg");
msgObj.innerHTML = "数据正在处理中,请稍侯...";
}

function showAbc(){
//当服务器将数据返回给客户端时,readyState状态值为4
  if(abc.readyState==4){ 
   //当服务器返回的数据是正常的数据时,status状态值为200
  if(abc.status==200){
  var buttonObj = document.getElementById("buttonId");
buttonObj.disabled = false;
var msgObj = document.getElementById("msg");
msgObj.innerHTML = "";
    //通过XMLHttpRequest对象的responseText属性获取
    //服务器返回的文本信息
       var returnMsg = abc.responseText;
       msgObj.innerHTML = returnMsg;
       //showMessage(returnMsg);
  }
  }
}

function getAjaxObject(){
   var xmlHttpRequest;
   if(window.XMLHttpRequest){//Mozilla,IE7.0
  xmlHttpRequest = new XMLHttpRequest();
  if(xmlHttpRequest.overrideMimeType){
   xmlHttpRequest.overrideMimeType("text/xml");
  }
   }else if(window.ActiveXObject){//IE
  try{
    xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
    try{
   xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
     }catch(e){}
  }
   }
   return xmlHttpRequest;
}


</script>


这里是HTML代码
<div id="msg"></div>
<form method="get">
<p>
&nbsp;
<input type="text" id="userName" name="userName">
</p>
<br>
<p>
<input type="password" id="pwd" name="pwd">
</p>
<p>
<input id="buttonId" type="button" value="登陆" name="button1" onclick="sendData();">
<br>
</p>
</form>
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics