用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动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
ztree实现权限横向显示功能
May 20 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
vue内置指令详解
Apr 03 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 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和ACCESS写聊天室(五)
2006/10/09 PHP
php header()函数使用说明
2008/07/10 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
Smarty模板配置实例简析
2019/07/20 PHP
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
python中pygame模块用法实例
2014/10/09 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
雨花台导游词
2015/02/06 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
基于Golang 高并发问题的解决方案
2021/05/08 Golang
python执行js代码的方法
2021/05/13 Python
mysql联合索引的使用规则
2021/06/23 MySQL
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android