用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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
提高 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中关于普通表单多文件上传的处理方法
2011/03/25 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
php数组查找函数总结
2014/11/18 PHP
JS数学函数Exp使用说明
2012/08/09 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
Vue.js用法详解
2017/11/13 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
python获取图片颜色信息的方法
2015/03/18 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python线程指南详细介绍
2017/01/05 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python实现图片九宫格分割
2021/03/07 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
日语专业毕业生求职信
2013/12/04 职场文书
老师自我鉴定范文
2013/12/25 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
大学生社团活动总结
2014/04/26 职场文书
保密工作目标责任书
2014/07/28 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
技术转让协议书
2016/03/19 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
只用Python就可以制作的简单词云
2021/06/07 Python
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL