`
balan326
  • 浏览: 16602 次
  • 性别: 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>
分享到:
评论

相关推荐

    基于SpringBoot的高校学习社区的设计与实现

    2. 发表说说:用户可以分享个人的学习动态,包括学习心得、日常感想等,并允许其他用户进行点赞和评论。 3. 用户讨论区:用户可以浏览其他用户发起的话题讨论,参与讨论并发表自己的意见。这一模块有助于构建学习...

    jQuery客户感言展示特效.zip

    jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互,使得前端开发变得更加高效和便捷。在这个特定的项目中,我们将利用jQuery的特性来实现一个动态滚动或轮播式的客户评价展示,提升...

    LoadRunner学习心得.doc

    对业界权威性能测试工具LoadRunner的学习心得。如: 1)对于浏览器应用程序,使用基于HTML的级别录制脚本 2)非浏览器,使用基于URL级别 3)如果是使用javascript进行交互的ajax,也是应该用url级别

    JavaScript学习历程和心得小结

    自从AJAX开始流行后,人们发现利用JavaScript可以给用户带来更好的体验,甚至利用这一优点开发了大型网页游戏,于是这门小语言被重视了起来。现在,很多公司会招专门的JavaScript工程师,通常JavaScript是WEB前端...

    感言

    "master"通常指的是GitHub上的主分支,暗示这是一个开源项目,可能包含了一组JavaScript开发者或社区成员的感言,或者是教学材料的一部分,用于展示JavaScript的应用经验和学习心得。 在JavaScript的学习和实践中,...

    jQuery客户感言展示特效特效代码

    jQuery是一种广泛应用于网页开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。在这个“jQuery客户感言展示特效特效代码”中,我们主要探讨的是如何利用jQuery来创建一个动态...

    JAVA JSP+MYSQL在线教学系统 源代码 论文

    提供了一个互动平台,学生可以向教师提问或者发表学习感想,教师则能回应。这可能涉及到消息队列(如RabbitMQ或Kafka)来处理并发的留言提交,保证系统的高可用性。 7. **学生在线学习模块**: 学生在线学习模块...

    转正述职报告模板集锦9篇_3.docx

    3. **个人能力评估与提升**:员工对自己的技能进行反思,指出技术上的不足,比如在Ajax技术的掌握上,表示会继续学习以提升自己。 4. **未来规划与努力方向**:提出个人的提升计划,包括持续学习新知识、提高工作...

    个人博客系统实验报告

    报告采用JSP技术进行编写,旨在提供一个实践性的学习案例,帮助理解Web应用程序的开发流程。 一、需求分析: 1. 功能性需求: - 用户注册与登录:用户可以创建账户并登录,以便发布、编辑和删除自己的博客文章。 ...

    2008年幸福墙源代码

    【幸福墙】是一种在线互动平台,用户可以发布和浏览他人的心愿、祝福或者感言,形成一种情感交流的“墙”。源代码则是实现这一功能的程序基础,它包含了实现幸福墙功能的所有编程语言代码和相关资源。对于IT专业人士...

    PHP软件工程师简历.pdf

    4. **前端技术**:他对AJax和JQuery有深入理解和应用,能够使用JavaScript和正则表达式进行客户端脚本验证,确保用户输入的安全性和合法性。此外,他还熟悉HTML和XML,能用DIV+CSS编写响应式页面,提升用户体验。 5...

    简单个人主页

    这可能通过JavaScript或Ajax实现,使得无需刷新页面即可发送和接收消息。 3. **books.htm**:可能是个人阅读推荐或者书籍分享的部分,展示个人的兴趣和阅读喜好。可以包括书名、作者、简介和读者评论。 4. **my...

    tongxuelu.rar_同学录_班级网页

    数据库设计通常会采用关系型数据库,如MySQL,存储每个同学的详细信息,并通过AJAX技术实现异步更新,提高用户体验。 除了核心功能,同学录网页还可能包含其他特色模块,如照片墙、留言簿、论坛等。照片墙用于展示...

    这是一个基于django的小型的音乐网站,基本功能包括首页,播放,排行,下载,评论,用户中心,登录注册.zip

    【标题解析】 ...综上所述,这个基于Django的音乐网站项目涉及了Web开发的多个方面,包括前后端交互、数据库设计、用户认证、动态内容生成等,对于学习和实践Django框架来说是一个很好的实战项目。

    计算机毕业实习报告.pdf

    1. **计算机实习报告的基本结构和内容**:通常,一份计算机毕业实习报告应当包含标题、描述、封面、目录、正文(包括实习单位介绍、实习内容、实习收获、实习总结和感想等)、参考文献(如果有的话)以及附录部分。...

Global site tag (gtag.js) - Google Analytics