用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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
数组Array的排序sort方法
Feb 17 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
JS数组的高级使用方法示例小结
Mar 14 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
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php取出数组单个值的方法
2018/03/12 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
js实现微博发布小功能
2017/01/12 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
Python isinstance函数介绍
2015/04/14 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
python 监控logcat关键字功能
2020/09/04 Python
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
大学生村官典型材料
2014/01/12 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
《三峡》教学反思
2014/03/01 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书