用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 相关文章推荐
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
js序列化和反序列化的使用讲解
Jan 19 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
js 实现碰撞检测的示例
Oct 28 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实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
node.js通过url读取文件
2020/10/16 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
python简单的函数定义和用法实例
2015/05/07 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
使用Python函数进行模块化的实现
2019/11/15 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
前台接待员岗位职责
2014/01/02 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
财务负责人岗位职责
2015/02/03 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python