用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中parentNode,childNodes,children的应用详解
Dec 17 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
详解Vue中watch的高级用法
May 02 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 Javascript
vue 把二维或多维数组转一维数组
Apr 24 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/08/27 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
捐款感谢信
2015/01/20 职场文书
2015年调度员工作总结
2015/04/30 职场文书
写给老师的保证书
2015/05/09 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
Nginx的gzip相关介绍
2022/05/11 Servers