网络编程
位置:首页>> 网络编程>> JavaScript>> 用javascript实现页面无刷新更新数据

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

  发布时间:2011-08-14 07:54:08 

标签:无刷新,ajax,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> 

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

0
投稿

猜你喜欢

  • 经常看见有人问,MSSQL占用了太多的内存,而且还不断的增长;或者说已经设置了使用内存,可是它没有用到那么多,这是怎么一回事儿呢? 首先,我
  • 百度了一下,找了点别人的方法改进了一下。 获取天气网址:http://www.weather.com.cn/html/weather/101
  • 淘宝招聘的一个css题目:css样式控制div水平垂直居中方法;<!DOCTYPE html PUBLIC "-//W3C/
  • PyTorch nn.Module类的简介torch.nn.Module类是所有神经网络模块(modules)的基类,它的实现在torch/
  • 今天遇到了这样一个问题,使用matplotlib绘制热图数组中横纵坐标自然是图片的像素排列顺序,但是这样带来的问题就是画出来的x,y轴中坐标
  • 今天设计models时,用到了choice这个属性,用来限制用户做出选择的范围。比如说性别的选择(男或女)。class User(Abstr
  • 非常抱歉,今天早上 6:37~8:15 期间,由于获取网站首页博文列表的 SQL 语句出现突发的查询超时问题,造成访问网站首页时出现 500
  • asp中fso怎样判断一个盘上是否有文件,实例代码,需要的朋友可以试试:<% dim objfolder dim 
  • 本文实例为大家分享了python图片插入文字的具体代码,供大家参考,具体内容如下问题如何在图片中插入大量文字并且自动换行效果原始图效果图注明
  • CSS布局中可以用javascript判断浏览器版本看如下的javascript脚本: if (window.XMLHt
  • 转自微信公众号:机器学习社区,经作者授权转载时间序列分析是数据科学中一个非常重要的领域,它主要包含统计分析、检测变化点、异常检测和预测未来趋
  • 摘要:如果你学过 C 语言,那么当你初见 Python 时可能会觉得 Python 的赋值方式略有诡异:好像差不多,但又好像哪里有点不太对劲
  • IE6这个东东在前端开发者的眼中恐怕都是一个恶梦之地,我说它万恶想来没人反对吧。依据现在卡当网的访问统计数据来看,从IE6来的访问量还是占到
  • 工欲善其事,必先利其器。作为更专业的前端工程师,我们需要强劲的IDE协助我们写出规范、美观、漂亮的JavaScript代码,首先要作的就是对
  • 在面向对象的编程中,很多语言都支持函数重载,能根据函数传递的不同个数、类型的参数来做不同的操作,JS对它却不支持,需要我们额外做些小动作。在
  • 我就废话不多说了,大家还是直接看代码吧~#zmail库:可以用几行代码帮我们收取一封邮件import zmail#输入账号和密码server
  • 本文实例为大家分享了Python Opencv基于透视变换的图像矫正,供大家参考,具体内容如下一、自动获取图像顶点变换(获取图像轮廓顶点矫正
  • 为什么使用虚拟环境因为直接在真实环境进行安装python的包会造成环境之间的污染,因此需要创建虚拟环境,原则上每一个项目都需要有一个独属于自
  • 一、了解Variable顾名思义,Variable就是 变量 的意思。实质上也就是可以变化的量,区别于int变量,它是一种可以变化的变量,这
  • 我们将研究一种判别式分类方法,其中直接学习评估 g(x)所需的 w 参数。我们将使用感知器学习算法。感知器学习算法很容易实现,但为了节省时间
手机版 网络编程 asp之家 www.aspxhome.com