用javascript实现无刷新更新数据的详细步骤 asp

程序设计中会经常碰到一种情况，就是事先无法得知用户会需要哪些数据，必须根据用户选择后再从服务器重新提取数据后反馈给用户。比如一简单的情况，用户选择省份以后，我们立即会在市里边将这个省的所有市重新显示出来。这种情况一般需要将整个页面刷新后才可以重新读取，但这样不仅效率不高外，也显得不太优雅。其实用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)，按此方法，可以实现很多会很酷的应用：）

赞 (0)

相关推荐

  • 用javascript实现页面无刷新更新数据

    以下正文:  程序设计中会经常碰到一种情况,就是事先无法得知用户会需要哪些数据,必须根据用户选择后再从服务 器重新提取数据后反馈给用户.比如一简单的情况,用户选择省份以后,我们立即会在市里边将这个省的 所有市重新显示出来.这种情况一般需要将整个页面刷新后才可以重新读取,但这样不仅效率不高外,也 显得不太优雅.其实用javascript结合微软件的XMLHTTP对象,我们可以不用刷新,"稍稍"的就可以将 数据从服务器上读取出来,显得既专业,又高效. 下面我们就以一个验证用户是否被注册的情

  • javascript实现TreeView 无刷新展开的实例代码

    复制代码 代码如下: function public_GetParentByTagName(element, tagName)  {     var parent = element.parentNode;     var upperTagName = tagName.toUpperCase();     //如果这个元素还不是想要的tag就继续上溯     while (parent && (parent.tagName.toUpperCase() != upperTagName)) 

  • javascript无刷新评论实现方法

    本文实例讲述了javascript无刷新评论实现方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无刷新评论</title> <s

  • javascript+iframe 实现无刷新载入整页的代码

    jquery有一个load()方法,使用方法如:$("#div").load("/index.html");这样就可以将index.html加载到ID为div的容器中, 用iframe也可以实现,但没有上述做法完美,参见discuz那些网站,如登陆弹出一个层,也是载入的一个页面,但我发现状态栏左边出现的是 正在打开about:blank,不知道是不是将iframe的src设为about:blank,然后在编辑iframe呢?但注意了,查看源代码的时候却看不到载入页面

  • javascript 新闻标题静态分页代码 (无刷新)

    javascript 新闻标题静态分页代码 (无刷新)

       一个模板,从数据库取n条记录,生成静态. 做单页面的静态化,索引页面是用JS对数组进行组合的. 因为记录只是一个标题,一个链接,字节数不会太大, 那么用js去用这个大数组进行分页,貌似不错,很节约带宽! 还是很棒的,简单,实用,值得推荐! JS代码: 复制代码 代码如下: function title_array(title, link_add, store_time) { this.title = title; this.link_add = link_add; this.store_t

  • asp.net javascript 文件无刷新上传实例代码第1/2页

    在新增数据项的时候,用ajax实现无刷新提交,但上传文件的时候,由于数据类型原因,不能将页面的<asp:FileUpload>中以字符串值的方式传到js里调用.我一共找到了两个方法予以解决,实现无刷新上传. 第一种方法:利用js的ADODB.Stream,将文件先转换成流,再通过js上传到服务器,这样有个好处就是可以上传超大文件,并且由于是数据流,可以支持断点续传.方便显示上传进度等人性化功能.唯一的缺点是要客户端浏览器需要设置安全级别,或者安装相关ActiveX控件(这个控件自己做的,加载到

  • Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据

    复制代码 代码如下: /**//// <summary> /// 生成带CDATA的节点 /// </summary> /// <param name="xDocument">XmlDocument</param> /// <param name="elementName">元素名称</param> /// <param name="cdataValue">CDA

  • 用javascript实现无刷新更新数据的详细步骤 asp

    程序设计中会经常碰到一种情况,就是事先无法得知用户会需要哪些数据,必须根据用户选择后再从服务器重新提取数据后反馈给用户.比如一简单的情况,用户选择省份以后,我们立即会在市里边将这个省的所有市重新显示出来.这种情况一般需要将整个页面刷新后才可以重新读取,但这样不仅效率不高外,也显得不太优雅.其实用javascript结合微软件的XMLHTTP对象,我们可以不用刷新,"稍稍"的就可以将数据从服务器上读取出来,显得既专业,又高效. 下面我们就以一个验证用户是否被注册的情况来演示这种技术. 

  • jquery ajax 局部无刷新更新数据的实现案例

    要更新的页面 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>&l

  • Ajax技术(WEB无刷新提交数据)-

    Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的. 二.引用 Ajax这个概念的最早提出者Jesse James Garrett认为: Ajax是Asynchronous JavaScript and XML的缩写. Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发

  • Ajax+FormData+javascript实现无刷新表单信息提交

    原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息. var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单信息 1.静态显示页面代码 <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="t

  • 基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据

    废话不多说,直接给大家贴代码了,代码附有注释,相信大家都能看懂的,有不明白的地方欢迎给我留言. 前端HTML+JQuery  备注Jquery需要1.x版本,不能用2.x版本 1.引入必要文件及上传input <load file="__PUBLIC__/js/jquery-1.11.3.min.js" /> <load file="__PUBLIC__/uploadify/jquery.uploadify.min.js" /> <lo

  • JavaScript实现无刷新上传预览图片功能

    无刷新上传功能如何实现?手写无刷新上传要用到两个东西,FormData和FileReader. FileReader 用于图片浏览. FormData 用于ajax请求. html代码 先创建表单跟图片的容器 <form enctype="multipart/form-data" id="oForm"> <input type="file" name="file" id="file" on

  • Java解析照片拿到GPS位置数据的详细步骤

    Java解析照片拿到GPS位置数据的详细步骤

    目录 1.前提条件 2.代码环境 Java代码逐步解析照片拿到GPS位置数据,附上步骤讲解,附上源代码和jar包依赖 1.前提条件 第一,检查你图片是否是高清原图:第二,检查你的图片是否来自IPhone设备;第三,检查你拍照片时,是否打开了GPS:三者缺一不可 2.代码环境 A:需要的Jar包: <dependency> <groupId>com.drewnoakes</groupId> <artifactId>metadata-extractor</

  • asp.net AJAX实现无刷新获得数据

    register.aspx页面代码: <script type="text/javascript"> function checkuser() { var option={ parameters:"userid="+$("userid").value, method:"post", onSuccess:function(transport){ var rp=transport.responseText; if(rp

随机推荐