用Javascript实现无刷新更新数据

专属你的圈0

专属你的圈0

2016-02-19 22:17

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐用Javascript实现无刷新更新数据,赶紧看过来吧!

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  下面我们就以一个验证用户是否被注册的情况来演示这种技术。

  '程序设计:环球万维,专业域名注册,虚拟主机服务商

  '网址: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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  二、HTML表单设计:

以下是引用片段:
form name=form1 action="XXXX.asp" method="post"
input type=text name=u_namespan id="checkInfo"/spaninput type=button name=checkuser value="检测用户是否存在" onClick="check_user_exists(this.form);"
/form

  经过以上三步,一个不需要页面刷新的数据更新程序就完成了(演示地址:http://www.web9898.cn/reg),按此方法,可以实现很多会很酷的应用:)

展开更多 50%)
分享

猜你喜欢

用Javascript实现无刷新更新数据

Web开发
用Javascript实现无刷新更新数据

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

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

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

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

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

AJAX无刷新更新数据

Web开发
AJAX无刷新更新数据

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

XMLHTTP无刷新自动实时更新数据

Web开发
XMLHTTP无刷新自动实时更新数据

利用XMLHTTP无刷新自动实时更新数据

Web开发
利用XMLHTTP无刷新自动实时更新数据

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

一种JavaScript的设计模式

一种JavaScript的设计模式

Win10 Build 10130有哪些变化?

Win10 Build 10130有哪些变化?
下拉加载更多内容 ↓