前面做项目的时候老师也跟我们提过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>
<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>
分享到:
- 2007-12-13 14:56
- 浏览 917
- 评论(0)
- 论坛回复 / 浏览 (0 / 2044)
- 查看更多
相关推荐
2. 发表说说:用户可以分享个人的学习动态,包括学习心得、日常感想等,并允许其他用户进行点赞和评论。 3. 用户讨论区:用户可以浏览其他用户发起的话题讨论,参与讨论并发表自己的意见。这一模块有助于构建学习...
jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互,使得前端开发变得更加高效和便捷。在这个特定的项目中,我们将利用jQuery的特性来实现一个动态滚动或轮播式的客户评价展示,提升...
对业界权威性能测试工具LoadRunner的学习心得。如: 1)对于浏览器应用程序,使用基于HTML的级别录制脚本 2)非浏览器,使用基于URL级别 3)如果是使用javascript进行交互的ajax,也是应该用url级别
自从AJAX开始流行后,人们发现利用JavaScript可以给用户带来更好的体验,甚至利用这一优点开发了大型网页游戏,于是这门小语言被重视了起来。现在,很多公司会招专门的JavaScript工程师,通常JavaScript是WEB前端...
"master"通常指的是GitHub上的主分支,暗示这是一个开源项目,可能包含了一组JavaScript开发者或社区成员的感言,或者是教学材料的一部分,用于展示JavaScript的应用经验和学习心得。 在JavaScript的学习和实践中,...
jQuery是一种广泛应用于网页开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。在这个“jQuery客户感言展示特效特效代码”中,我们主要探讨的是如何利用jQuery来创建一个动态...
提供了一个互动平台,学生可以向教师提问或者发表学习感想,教师则能回应。这可能涉及到消息队列(如RabbitMQ或Kafka)来处理并发的留言提交,保证系统的高可用性。 7. **学生在线学习模块**: 学生在线学习模块...
3. **个人能力评估与提升**:员工对自己的技能进行反思,指出技术上的不足,比如在Ajax技术的掌握上,表示会继续学习以提升自己。 4. **未来规划与努力方向**:提出个人的提升计划,包括持续学习新知识、提高工作...
报告采用JSP技术进行编写,旨在提供一个实践性的学习案例,帮助理解Web应用程序的开发流程。 一、需求分析: 1. 功能性需求: - 用户注册与登录:用户可以创建账户并登录,以便发布、编辑和删除自己的博客文章。 ...
【幸福墙】是一种在线互动平台,用户可以发布和浏览他人的心愿、祝福或者感言,形成一种情感交流的“墙”。源代码则是实现这一功能的程序基础,它包含了实现幸福墙功能的所有编程语言代码和相关资源。对于IT专业人士...
4. **前端技术**:他对AJax和JQuery有深入理解和应用,能够使用JavaScript和正则表达式进行客户端脚本验证,确保用户输入的安全性和合法性。此外,他还熟悉HTML和XML,能用DIV+CSS编写响应式页面,提升用户体验。 5...
这可能通过JavaScript或Ajax实现,使得无需刷新页面即可发送和接收消息。 3. **books.htm**:可能是个人阅读推荐或者书籍分享的部分,展示个人的兴趣和阅读喜好。可以包括书名、作者、简介和读者评论。 4. **my...
数据库设计通常会采用关系型数据库,如MySQL,存储每个同学的详细信息,并通过AJAX技术实现异步更新,提高用户体验。 除了核心功能,同学录网页还可能包含其他特色模块,如照片墙、留言簿、论坛等。照片墙用于展示...
【标题解析】 ...综上所述,这个基于Django的音乐网站项目涉及了Web开发的多个方面,包括前后端交互、数据库设计、用户认证、动态内容生成等,对于学习和实践Django框架来说是一个很好的实战项目。
1. **计算机实习报告的基本结构和内容**:通常,一份计算机毕业实习报告应当包含标题、描述、封面、目录、正文(包括实习单位介绍、实习内容、实习收获、实习总结和感想等)、参考文献(如果有的话)以及附录部分。...