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

转载 2006年06月22日 09:49: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>

  经过以上三步,一个不需要页面刷新的数据更新程序就完成了,按此方法,可以实现很多很酷的应用。

无刷新显示即时更新数据两例

无刷新显示即时更新数据两例     因最近做网站需要用到无刷新数据,所以在网上查了一些资料,无刷新数据的实现无外乎用javascript或xmlhttp或iframe来实现。在网上找到一代码不是不能用...
  • cui55
  • cui55
  • 2006年07月06日 12:16
  • 806

jquery ajax无刷新更新页面

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

AJAX页面无刷新实现数据更新

  • 2008年07月07日 15:41
  • 10KB
  • 下载

《JavaWeb---利用JQuery实现页面无刷新动态改变页面数据》

"> AJAX简单示例
  • w695050167
  • w695050167
  • 2012年10月03日 18:41
  • 6421

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

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

无刷新显示即时更新数据两例

因最近做网站需要用到无刷新数据,所以在网上查了一些资料,无刷新数据的实现无外乎用javascript或xmlhttp或iframe来实现。在网上找到一代码不是不能用就是效率太低,有的甚至使我的CPU达...
  • windok2004
  • windok2004
  • 2005年10月26日 23:51
  • 968

XMLHttpRequest 实现无刷新更新页面数据

XMLHttpRequest 实现无刷新更新页面数据
  • abccome
  • abccome
  • 2010年06月08日 11:01
  • 804

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

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

Ajax对表格中的信息不刷新页面进行更新数据

html: Title 1111 ...
  • Grit_ICPC
  • Grit_ICPC
  • 2016年11月05日 17:18
  • 3189

实现web页面无刷新操作的几种方法

第一种方法:如果要是使用的最基础的ajax调用方式,应该做这几个步骤:1)   在客户端使用XMLhttp,通过javascript类似的代码 objXMLHttp.onreadystatechang...
  • xumingxm
  • xumingxm
  • 2007年11月30日 22:57
  • 713
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用javascript实现页面无刷新更新数据
举报原因:
原因补充:

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