AJax技术

AJAX学习感想

字号+ 作者:H5之家 来源:H5之家 2015-11-01 10:02 我要评论( )

AJAX学习感想

前面做项目的时候老师也跟我们提过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></div>
<form method="get">
<p>
&nbsp;
<input type="text">
</p>
<br>
<p>
<input type="password">
</p>
<p>
<input type="button" value="登陆">
<br>
</p>
</form>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery实现Ajax加载图片的方法

    JQuery实现Ajax加载图片的方法

    2016-02-24 17:01

  • 判断用户是不是为ajax请求

    判断用户是不是为ajax请求

    2016-02-24 17:00

  • Ajax与WEB开发 by alixixi.com

    Ajax与WEB开发 by alixixi.com

    2016-02-11 11:02

  • jQuery.ajax()的相关参数及使用

    jQuery.ajax()的相关参数及使用

    2016-02-08 16:00

网友点评