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

以下正文： 
程序设计中会经常碰到一种情况，就是事先无法得知用户会需要哪些数据，必须根据用户选择后再从服务

器重新提取数据后反馈给用户。比如一简单的情况，用户选择省份以后，我们立即会在市里边将这个省的

所有市重新显示出来。这种情况一般需要将整个页面刷新后才可以重新读取，但这样不仅效率不高外，也

显得不太优雅。其实用javascript结合微软件的XMLHTTP对象，我们可以不用刷新，“稍稍”的就可以将

数据从服务器上读取出来，显得既专业，又高效。
下面我们就以一个验证用户是否被注册的情况来演示这种技术。

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实现无刷新更新数据的详细步骤 asp

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

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

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

  • 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

  • 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

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

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

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

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

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

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

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

    以下正文:  程序设计中会经常碰到一种情况,就是事先无法得知用户会需要哪些数据,必须根据用户选择后再从服务 器重新提取数据后反馈给用户.比如一简单的情况,用户选择省份以后,我们立即会在市里边将这个省的 所有市重新显示出来.这种情况一般需要将整个页面刷新后才可以重新读取,但这样不仅效率不高外,也 显得不太优雅.其实用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页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题

    在做ajax页面无刷新添加的时候,IE下遭遇Ajax缓存,因为刚开始并不知道IE有这个坏毛病,折腾好久,终于解决问题. 总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题]而FF下不会出现这种情况.为了不受缓存影响,可以这样做: IE访问策略: Internet选项--浏览历史记录--设置-- Int

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

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

  • 浅谈Ajax技术实现页面无刷新

    ajax (ajax开发) AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新

  • 使用laravel和ajax实现整个页面无刷新的操作方法

    1.数据库文件 CREATE TABLE IF NOT EXISTS mr_key ( id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT '键id', project_id int(11) NOT NULL COMMENT '外键项目id', name varchar(100) NOT NULL COMMENT '键名', structure enum('string', 'hash', 'list', 'set', 'zset') C

  • jQuery的ajax中使用FormData实现页面无刷新上传功能

    jQuery的ajax中使用FormData实现页面无刷新上传功能

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

  • PHP Ajax实现页面无刷新发表评论

    PHP Ajax实现页面无刷新发表评论

    大家都有在网站发表评论的经历,传统的发表过程无非是:发表->提交页面表单->等待刷新页面,这样在网络比较拥挤的时候,往往需要漫长的等待,今天介绍用PHP+Ajax实现页面无刷新发表评论,希望对初学ajax的PHPer有所帮助. 那么首先,我们需要一个基本的ajax开发框架,文件ajax.js就包含了这个框架,代码如下: var http_request=false;  function send_request(url){//初始化,指定处理函数,发送请求的函数    http_request

  • Ajax实现页面无刷新留言效果

    Ajax实现页面无刷新留言效果

    利用Ajax实现页面无刷新留言效果 实现效果 前言:在百度贴吧,以及一些论坛中,当你回复或者评论完毕之后,从来没有见过页面重新刷新加载的效果,那么这个究竟是怎么做成的呢,也就是利用Ajax技术,页面无刷新效果,废话不多说,直接上代码. 实现效果 html部分: <div class="container"> <h1 class="display-1">留言板</h1> <hr> <div id="loa

随机推荐