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

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

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

 程序设计中会经常碰到一种情况,就是事先无法得知用户会需要哪些数据,必须根据用户选择后再从服务器重新提取数据后反馈给用户。比如一简单的情况,用户选择省份以后,我们立即会在市里边将这个省的所有市重新显示...
  • cqscdys
  • cqscdys
  • 2010年05月06日 11:29
  • 123

ajax无刷新加载数据

最近做了一个手机端的需求,里面有一个需要使用到ajax无刷新加载数据这样的功能 老样子先展示所需要实现的功能, 里面的数据是我的测试数据,随意了一点,但是能解决问题就行了,不要在意 正题...
  • hpu_yly_bj
  • hpu_yly_bj
  • 2017年05月16日 15:15
  • 462

jquery ajax无刷新更新页面

1.首先我们得区分一下ajax的异步和同步: 异步是:ajax没有完全执行完,就可以执行后面的代码, 同步是:ajax必须执行完后才可以执行后面的代码..2.好了,既然要ajax不...
  • ha6pp6y
  • ha6pp6y
  • 2016年04月08日 01:01
  • 565

使用Jquery的Ajax实现无刷新更新,修改,删除页面

本文将向大家讲述一下最近工作的一些总结,主要包括了以下内容,注册界面以及详细信息界面的编辑。主要是介绍了AJAX技术,因为我觉得其他方面没什么好介绍的。首先是跟大家说一下Ajax的优点,假如你删除了一...
  • boringY
  • boringY
  • 2014年11月21日 15:19
  • 1622

MVC3 用Ajax删除数据和无刷新更新数据

MVC+Ajax实现异步无刷新更新页面
  • John_zifeng
  • John_zifeng
  • 2016年01月29日 20:17
  • 1287

JavaScript实现页面无刷新让时间走动

Show Time //javascript实现页面无刷新让时间走动  function showTime() {  var date = new Date(...
  • sinat_26342009
  • sinat_26342009
  • 2015年08月10日 15:12
  • 1569

使用ajax技术无刷新页面

一:       首先看个小例子(通过GET方式进行无刷新获取服务端的响应数据) script type="text/javascript" language="javascript">   ...
  • civilized
  • civilized
  • 2012年12月03日 22:53
  • 2104

ASP.NET—015:ASP.NET中无刷新页面实现

前面也说过在asp.net中前后前交互的问题。使用了ajax.js的方法:$.post和$.ajax。http://blog.csdn.net/yysyangyangyangshan/article/...
  • yysyangyangyangshan
  • yysyangyangyangshan
  • 2014年09月30日 00:18
  • 7203

无刷新更新listview

闲来无事,写点水文吧!有用得着的可以参考下,无刷新更新listview是什么意思呢?举个例子,在订单类listview列表中,常常会有各种订单状态,拿商城类app来说,会有待付款,待收货,确认收货等等...
  • baiyuliang2013
  • baiyuliang2013
  • 2016年04月11日 09:14
  • 809

PHP + JavaScript + Ajax 实现无刷新页面加载效果

数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 点击按钮之后 总结今天这个实验的思路就是实现一个无刷新的页面加载效果。具体的思路是使用PHP开...
  • Marksinoberg
  • Marksinoberg
  • 2016年08月15日 17:18
  • 8298
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用javascript实现页面无刷新更新数据
举报原因:
原因补充:

(最多只允许输入30个字)