• ·申请链接
  • ·站点地图
  • ·用户注册
  • ·用户登录
  • ·收藏本站
  • ·联系我们
  • λ我爱Aspx >> Asp.Net >> AJAX编写用户注册实例及技术小结

    • AJAX编写用户注册实例及技术小结

  • :未知  Դ:internet  :2007-5-20 16:49:29  ؼ:ajax
  • 【导读】本文介绍如何用AJAX编写用户注册的实例，给出完整代码并对AJAX技术小结。
    我所举的这个例子是一个企业用户注册时的一个应用，当用户注册时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。 如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息，用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进行。当服务器信息返回的时候，会自动在面页相应位置显示返回信息，不必刷新页面，相当于局部刷新的效果。 下面我们来看代码吧。HTML页面的完整代码如下：
    1＜%@page language="java" contentType="text/html;charset=GBK"%＞2＜script language="javascript" type="text/javascript"＞3＜!--4/**//**Ajax 开始 by Alpha 2005-12-31*/56 var http = getHTTPObject();78 function handleHttpResponse(){9 if(http.readyState == 4){10 if(http.status == 200){11 var xmlDocument = http.responseXML;12 if(http.responseText!=""){13 document.getElementById("showStr").style.display = "";14 document.getElementById("userName").style.background= "#FF0000";15 document.getElementById("showStr").innerText = http.responseText;16 }else{17 document.getElementById("userName").style.background= "#FFFFFF";18 document.getElementById("showStr").style.display = "none";19 }20 21 }22 else{23 alert("你所请求的页面发生异常，可能会影响你浏览该页的信息！");24 alert(http.status);25 }26 }27 }2829 function handleHttpResponse1(){30 if(http.readyState == 4){31 if(http.status == 200){32 var xmlDocument = http.responseXML;33 if(http.responseText!=""){34 document.getElementById("comNmStr").style.display = "";35 document.getElementById("comNm").style.background= "#FF0000";36 document.getElementById("comNmStr").innerText = http.responseText;37 }else{38 document.getElementById("comNm").style.background= "#FFFFFF";39 document.getElementById("comNmStr").style.display = "none";40 }41 42 }43 else{44 alert("你所请求的页面发生异常，可能会影响你浏览该页的信息！");45 alert(http.status);46 }47 }48 }4950 function chkUser(){51 var url = "/chkUserAndCom";52 var name = document.getElementById("userName").value;53 url += ("&userName="+name+"&oprate=chkUser");54 http.open("GET",url,true);55 http.onreadystatechange = handleHttpResponse;56 http.send(null);57 return ;58 }59 function chkComNm(){60 var url = "/chkUserAndCom";61 var name = document.getElementById("comNm").value;62 url += ("&comName="+name+"&oprate=chkCom");63 http.open("GET",url,true);64 http.onreadystatechange = handleHttpResponse1;65 http.send(null);66 return ;67 }68 69 //该函数可以创建我们需要的XMLHttpRequest对象70 function getHTTPObject(){71 var xmlhttp = false;72 if(window.XMLHttpRequest){73 xmlhttp = new XMLHttpRequest();74 if(xmlhttp.overrideMimeType){75 xmlhttp.overrideMimeType('text/xml');76 }77 }78 else{79 try{80 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");81 }catch(e){82 try{83 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");84 }catch(E){85 xmlhttp = false;86 }87 }88 }89 return xmlhttp;90 }91/**//**Ajax 结束*/9293//检测表单94function chkpassword()95{96 var m=document.form1;97 if(len(m.password.value) ＞ 20 || len(m.password.value) ＜ 5 || !isStr(m.password.value))98 {99 document.getElementById("passwordStr").style.display = "";100 document.getElementById("password").style.background= "#FF0000";101 document.getElementById("passwordStr").innerText = "对不起,密码必须为英文字母、数字或下划线，长度为5~20!";102 }103 else104 {105 document.getElementById("password").style.background= "#FFFFFF";106 document.getElementById("passwordStr").style.display = "none";107 }108}109110function chkconfirmPassword()111{112 var m=document.form1;113 if (m.password.value != m.confirmPassword.value)114 {115 document.getElementById("confirmPasswordStr").style.display = "";116 document.getElementById("confirmPassword").style.background= "#FF0000";117 document.getElementById("confirmPasswordStr").innerText = "对不起,密码与重复密码不一致!";118 }119 else120 {121 document.getElementById("confirmPassword").style.background= "#FFFFFF";122 document.getElementById("confirmPasswordStr").style.display = "none";123 }124}125126function checkfield()127{128 var m=document.form1; 129 if(m.userName.value.length==0)130 {131 alert("对不起,用户名必须为英文字母、数字或下划线，长度为5~20。");132 m.userName.focus();133 return false;134 }135 if(m.password.value.length==0)136 {137 alert("对不起,密码必须为英文字母、数字或下划线，长度为5~20。");138 m.password.focus();139 return false;140 }141 if (m.password.value != m.confirmPassword.value)142 {143 alert("对不起,密码与重复密码不一致!");144 m.confirmPassword.focus();145 return false;146 } 147 if(m.comNm.value.length==0)148 {149 alert("对不起,企业名称不能为空！！");150 m.comNm.focus();151 return false; 152 }153 m.submit();154}155156//--＞ 157＜/script＞158＜body topmargin="0"＞159＜form name="form1" method="post" action="/Control?act=Register"＞160＜table width="100%"＞161 ＜tr＞＜td align="center"＞ ＜H2＞Ajax 演示程序＜/H1＞＜/td＞＜/tr＞162 ＜tr＞＜td align="center"＞    ------ 企业注册 By Alpha＜/td＞＜/tr＞163＜/table＞164165＜HR＞166 ＜table width="400" border="0" cellpadding="1" cellspacing="1" align="center" ＞167 ＜tr＞168 ＜td＞＜font color="red"＞*＜/font＞＜/td＞169 ＜td＞用户帐号:＜/td＞170 ＜td＞171 ＜input type="text" name="userName" maxlength="20" style="background:#FFFFFF" onBlur="chkUser()" value=""/＞172 ＜div id="showStr" style="background-color:#FF9900;display:none"＞＜/div＞173 ＜/td＞ 174 ＜/tr＞175 ＜tr＞176 ＜td＞＜font color="red"＞*＜/font＞＜/td＞177 ＜td＞企业名称:＜/td＞178 ＜td＞179 ＜input type="text" name="comNm" maxlength="100" style="background:#FFFFFF" onBlur="chkComNm()" value=""/＞180 ＜div id="comNmStr" style="background-color:#FF9900;display:none"＞＜/div＞181 182 ＜/td＞ 183 ＜/tr＞ 184 ＜tr＞185 ＜td＞＜font color="red"＞*＜/font＞＜/td＞186 ＜td＞用户密码:＜/td＞187 ＜td＞＜input type="password" name="password" maxlength="20" style="background:#FFFFFF" onBlur="chkpassword()"/＞188 ＜div id="passwordStr" style="background-color:#FF9900;display:none"＞＜/div＞189 ＜/td＞190 ＜/tr＞191 ＜tr＞192 ＜td＞＜font color="red"＞*＜/font＞＜/td＞193 ＜td＞确认密码:＜/td＞194 ＜td＞＜input type="password" name="confirmPassword" maxlength="20" style="background:#FFFFFF" onBlur="chkconfirmPassword()"/＞195 ＜div id="confirmPasswordStr" style="background-color:#FF9900;display:none"＞＜/div＞196 ＜/td＞ 197 ＜/tr＞198 ＜/table＞ 199200 ＜div align="center"＞ 201 ＜input type="button" name="ok" value=" 确 定 " onclick="checkfield()"＞202   203 ＜input type="reset" name="reset" value=" 取 消 "＞204 ＜/div＞205206＜/form＞207＜/body＞208＜/html＞
    Ҷƪл˵?
    第一页上一页123下一页尾页
  • һƪAjax设计模式之Lightbox
    һƪXMLHTTP无刷新自动实时更新数据
    • CuteEditor5.0与Ajax.net配合无刷..[05-20]
    • 跳出ajax的思维定式[05-20]
    • Ajax.Net快速入门[05-20]
    • 在AJAX开发中集成数据库技术[05-20]
    • AJAX技术开发“Back”按钮问题的..[05-20]
    • AJAX处理书签和翻页按扭的方法[05-20]
    • XMLHttpRequest和AJAX入主Web开发[05-20]
    • 用AJAX开发智能Web应用程序之基础..[05-20]
    • AJAX+ASP.NET解决网页打开等待问..[05-20]
    • 用AJAX开发智能Web应用程序之高级..[05-20]
    • XMLHTTP无刷新自动实时更新数据[05-20]
    • CuteEditor5.0与Ajax.net配合无刷..[05-20]
    • 跳出ajax的思维定式[05-20]
    • Ajax.Net快速入门[05-20]
    • 在AJAX开发中集成数据库技术[05-20]
    • AJAX技术开发“Back”按钮问题的..[05-20]
    • AJAX处理书签和翻页按扭的方法[05-20]
    • XMLHttpRequest和AJAX入主Web开发[05-20]
    • 用AJAX开发智能Web应用程序之基础..[05-20]
    • AJAX+ASP.NET解决网页打开等待问..[05-20]
    • 赞助广告
    • 热门Top20
    • ·[Asp.Net] 南洋理工 校花 下载 南洋..
    • ·[Asp.Net] 南洋理工校花录像
    • ·[书籍] Visual C# 2005程序开发..
    • ·[Asp.Net] 从ASP过渡到ASP.net遗留..
    • ·[.NET专题] Microsoft .Net Remotin..
    • ·[Asp.Net] 通常C#面试题
    • ·[综合资讯] 如何看k线图-K线图三十个..
    • ·[综合资讯] 百度国庆徽标漏绘南海诸..
    • ·[Asp.Net] 江塘集中营剧情分集介绍
    • ·[综合资讯] 火影忍者234话在线观看
    • ·[Asp.Net] C#打造天气预报的WebSer..
    • ·[Asp.Net] ASP.Net 2.0的Web.confi..
    • ·[Asp.Net] 火影忍者在线观看及下载
    • ·[Asp.Net] 精妙SQL语句，基础，提升..
    • ·[Asp.Net] 海军副司令情妇图片
    • ·[Asp.Net] 用Visual C#实现文件下载
    • ·[Asp.Net] 刘亦菲全档案
    • ·[Asp.Net] 性爱录音(木子美)碎语
    • ·[开源] 图书馆管理系统Asp.net2..
    • ·[Asp.Net] JavaScript表单验证集锦
    • 推荐文章
    • ·从ASP过渡到ASP.net遗留的二十大..
    • ·百度称维基百科指责无道理
    • ·百度语音搜索今日上线
    • ·百度PKGoogle人机交互
    • ·酷6股权换百度流量
    • ·百度贴吧增加投票功能
    • ·腾讯QQ也做见不得人的事:带流氓软..
    • ·Programming ASP.NET中文版(第3版..
    • ·google生活搜索上线啦
    • ·2007a*star百度之星程序设计大赛..
    • ·百度电影视频搜索证明百度更加懂..
    • ·百度主题推广和Google Adsense
    • ·百度真的很麻烦
    • ·百度七大罪
    • ·了解WEB页面工具语言XML(五)好处
    • 最新文章
    • ·XMLHTTP无刷新自动实时更新数据
    • ·CuteEditor5.0与Ajax.net配合无刷..
    • ·跳出ajax的思维定式
    • ·Ajax.Net快速入门
    • ·在AJAX开发中集成数据库技术
    • ·AJAX技术开发“Back”按钮问题的..
    • ·AJAX处理书签和翻页按扭的方法
    • ·XMLHttpRequest和AJAX入主Web开发
    • ·用AJAX开发智能Web应用程序之基础..
    • ·AJAX+ASP.NET解决网页打开等待问..
    • ·用AJAX开发智能Web应用程序之高级..
    • ·基于Ajax的应用程序架构汇总
    • ·AJAX技术汇总
    • ·驳“AJAX 的七宗罪”
    • ·AJAX的七宗罪
    • ·循序渐进学习 Ajax 的途径
    • ·XMLHTTP组件相关技术资料
    • ·.NET环境下基于Ajax的MVC方案
    • ·用AJAX跟踪Google Adsense广告点..
    • ·AJAX与微软的新方案
    • 关于我们 | 广告服务 | 网站建设 | 版权申明 | 申请链接 | 联系我们
    • Copyright © 2007 5iaspx.COM. All Right Reserved.
    • 本站内容仅供学习,研究,探讨,个人收藏,如有侵权,敬请联系我们,我们尽快解决!