用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方法和技巧大全
Dec 27 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
vue开发拖拽进度条滑动组件
Sep 21 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
php设计模式之观察者模式的应用详解
2013/05/21 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
JS 控件事件小结
2012/10/31 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
JS hashMap实例详解
2016/05/26 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
python3.x实现发送邮件功能
2018/05/22 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
公交公司毕业生求职信
2014/02/15 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python