用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的函数重名看其初始化方式
Mar 08 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
单元选择合并变色示例代码
May 26 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
javaScript中的空值和假值
Dec 18 Javascript
Vue组件中slot的用法
Jan 30 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
提高 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
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
简单JS代码压缩器
2006/10/12 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
python中dict使用方法详解
2019/07/17 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
Python中实现输入一个整数的案例
2020/05/03 Python
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
五年级英语教学反思
2014/01/31 职场文书
共产党员公开承诺书
2014/03/25 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
南京导游词
2015/02/03 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
《比的意义》教学反思
2016/02/18 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书