`
balan326
  • 浏览: 16008 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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 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>
分享到:
评论

相关推荐

    ajax 学习笔记源代码

    ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习...

    ajax学习很好的学习文档

    ajax学习很好的学习文档ajax学习很好的学习文档

    ajax ajax原理 ajax代码 ajax编程 ajax学习

    ajax ajax原理 ajax代码 ajax编程 ajax学习

    ajax 学习word文件版

    ajax学习 ajax 教学 学习 java 教程ajax 教学 学习 java 教程ajax 教学 学习 java 教程

    掌握Ajax 学习资料pdf

    掌握 Ajax第 1 部分-Ajax 简介 掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求 掌握 Ajax第 3 部分-Ajax 中的高级请求和响应 掌握 Ajax第 4 部分-利用 DOM 进行 Web 响应 掌握 Ajax第 5 部分-操纵 DOM ...

    Ajax学习资料+实例

    我总结的Ajax学习资料,希望对大家有所帮助!

    Ajax全套学习教程

    Ajax全套学习教程 Ajax全套学习教程 Ajax全套学习教程 Ajax全套学习教程

    AJAX入门学习——ajax4jsf

    ajax学习材料之后台交互应用。ajax学习材料之后台交互应用。

    Ajax学习全攻略,很好很全面的学习资料

    Ajax学习全攻略,很好很全面的学习资料,能够使你很快的学习到当前流行的Ajax技术,一定会受益匪浅。

    AJAX 学习资料最新

    AJAX 的学习资料,全部手写,以及 用 JQREY调用等 。。 大量实例,如 无分页刷新,评论,等 。。值得学习。。

    .net中ajax学习解决方案

    .net中ajax学习解决方案,很好地代码程序,供大家参考

    ajax学习教程.rar

    ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax学习教程 ajax...

    ajax学习用的ppt课件

    ajax学习用的ppt课件;主要教你ajax实现原理,并且配备了实例说明。是一个不错学习课件。

    dwr ajax 学习框架

    Ajax 学习Ajax 学习Ajax 学习Ajax 学习Ajax 学习Ajax 学习Ajax 学习Ajax 学习Ajax 学习Ajax 学习

    学习Ajax需要.txt

    学习Ajax需要.txt学习Ajax需要.txt学习Ajax需要.txt学习Ajax需要.txt学习Ajax需要.txt学习Ajax需要.txt学习Ajax需要.txt学习Ajax需要.txt学习Ajax需要.txt学习Ajax需要.txt学习Ajax需要.txt学习Ajax需要.txt学习Ajax...

    AJAX学习笔记(内含实例)

    AJAX学习笔记。内含Java调用的两个实例,及JavaScript的ajax工具函数,可快速入门,也可当手册使用。个人精心整理,值得收藏。 更多:http://download.csdn.net/user/daillo/all

    AJAX 学习文档AJAX 学习文档

    AJAX.docAJAX.docAJAX.doc AJAX.docAJAX.docAJAX.doc AJAX 学习文档

    javascript和ajax学习指南 Learn_JavaScript_and_Ajax_with_w3Schools.zip

    javascript和ajax学习指南 Learn_JavaScript_and_Ajax_with_w3Schools.zip

    Ajax学习资料 Ajax

    Ajax的学习资料,包含老师的上课代码。互相学习,希望对你有用

    Ajax学习笔记个人总结

    根据个人学习Ajax的过程总结,整理了Ajax相关基础知识点,对Ajax的使用有较详细的介绍,通过个别举例,可以快速了解Ajax的功能,比较适合初学者入门。

Global site tag (gtag.js) - Google Analytics