用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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
JavaScript 实现??打印?理
Apr 28 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
bootstrap轮播图示例代码分享
May 17 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 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
php 设计模式之 工厂模式
2008/12/19 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
php实现分页显示
2015/11/03 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
中学教师请假制度
2014/02/03 职场文书
教育技术职业规划范文
2014/03/04 职场文书
学生评语大全
2014/04/18 职场文书
学生检讨书
2015/01/27 职场文书
工资证明范本
2015/06/12 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
python中的装饰器该如何使用
2021/06/18 Python