用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 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
提高 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的引用原因分析
2012/09/06 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
超清晰的document对象详解
2007/02/27 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
Vue响应式原理详解
2017/04/18 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python随机数random模块使用指南
2016/09/09 Python
django 自定义过滤器的实现
2019/02/26 Python
django如何自己创建一个中间件
2019/07/24 Python
使用Python实现画一个中国地图
2019/11/23 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
会计专业自我鉴定范文
2013/10/06 职场文书
写好自荐信要注意的问题
2013/11/10 职场文书
安全月宣传标语
2014/10/07 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
写给导师的自荐信
2015/03/06 职场文书
校园运动会广播稿
2015/08/19 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers