用javascript实现无刷新更新数据的详细步骤 asp


Posted in Javascript onDecember 26, 2006

程序设计中会经常碰到一种情况,就是事先无法得知用户会需要哪些数据,必须根据用户选择后再从服务器重新提取数据后反馈给用户。比如一简单的情况,用户选择省份以后,我们立即会在市里边将这个省的所有市重新显示出来。这种情况一般需要将整个页面刷新后才可以重新读取,但这样不仅效率不高外,也显得不太优雅。其实用javascript结合微软件的XMLHTTP对象,我们可以不用刷新,“稍稍”的就可以将数据从服务器上读取出来,显得既专业,又高效。
下面我们就以一个验证用户是否被注册的情况来演示这种技术。 
'程序设计:环球万维,专业虚拟主机、域名注册服务商 
'网址:http://www.netInter.cn
'此程序为环球万维原创程序,所以如果您需转载,请注明出处,谢谢。
'以上信息与文章正文是不可分割的一部分,所以如果您要转载本文章,您必须保留以上信息.

1.首先在服务器上建立一个CheckUser.asp文件,用来检测用户是否存在,根据用户是否存在分别反馈0和1
u_name=Request.QueryString("u_name")
if u_name 存在 then
Response.write "0"
else
Response.write "1"
end if
2.客户端HTML设计:
一、JavaScript代码
<script language=javascript>
function check_user_exists(form){
u_name=form.u_name.value;
if (u_name==null||u_name==''){
alert("请您输入用户名");
return false;
}
infoBoard=document.getElementById("checkInfo");
infoBoard.innerText='查询中...';
myurl=location.protocol+"//"+location.hostname+"/CheckUser.asp?u_name="+u_name;
retCode=openUrl(myurl);
switch(retCode){
case "-2":
infoBoard.innerHTML='<font color=red>抱歉</font>,查询失败';break;
case "1":
infoBoard.innerHTML='<font color=red>恭喜</font>,'+u_name+'可以使用';break;
case "0":
infoBoard.innerHTML='<font color=red>抱歉</font>,用户名'+u_name+'已经被使用';
}
return;
}

function openurl(/url){
var objxml=new ActiveXObject("Microsoft.XMLHttp")
objxml.open("GET",url,false);
objxml.send();
retInfo=objxml.responseText;
if (objxml.status=="200"){
return retInfo;
}
else{
return "-2";
}
}
</script>
二、HTML表单设计:
<form name=form1 action="XXXX.asp" method="post">
<input type=text name=u_name><span id="checkInfo"></span><input type=button name=checkuser value="检测用户是否存在" onClick="check_user_exists(this.form);">
</form>

经过以上三步,一个不需要页面刷新的数据更新程序就完成了(演示地址:http://www.web9898.cn/reg),按此方法,可以实现很多会很酷的应用:)

Javascript 相关文章推荐
javascript数组输出的两种方式
Jan 13 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
提高 DHTML 页面性能
Dec 25 #Javascript
js中几种去掉字串左右空格的方法
Dec 25 #Javascript
js静态作用域的功能。
Dec 25 #Javascript
js不是基础的基础
Dec 24 #Javascript
静态的动态续篇之来点XML
Dec 23 #Javascript
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 #Javascript
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 #Javascript
You might like
PHP禁止页面缓存的代码
2011/10/23 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
村级换届选举方案
2014/05/10 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
高中生旷课检讨书
2014/10/08 职场文书
工程催款通知书
2015/04/17 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
大学军训口号大全
2015/12/24 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android