用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禁用右键示例
Apr 28 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
BootStrap 导航条实例代码
May 18 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 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中,文件上传
2006/12/06 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
给ECShop添加最新评论
2015/01/07 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP最常用的正则表达式
2017/02/13 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
python保存字符串到文件的方法
2015/07/01 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
python语言是免费还是收费的?
2020/06/15 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
戴森英国官网:Dyson英国
2019/05/07 全球购物
副主任竞聘演讲稿
2014/08/18 职场文书
初中差生评语
2014/12/29 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
质量整改通知单
2015/04/21 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
python OpenCV学习笔记
2021/03/31 Python
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
《废话连篇——致新手》——chinapizza
2022/04/05 无线电