xmlHttpRequest实践之无刷新验证用户名_[AJAX教程]
现在好多网站上的注册都用了无刷新验证用户名,这种效果咋看感觉很复杂很难实现,其实它里面用到了Ajax中的核心xmlHttpRequest这个类,如果只是单单想实现这个效果,压根就不用引用Ajax.Net中的组件,因为感觉有点大材小用,下面是具体实现这种效果的方法,希望能给初学Ajax的朋友带来一点帮助.
首先建立一个注册与验证的页面xmlHttpRequest.aspx与Validate.aspx,因为仅仅是实现无刷新验证用户名,所以我们可以把其它项都撇开,Register.aspx中摆好div跟控件,具体如下:
Code
然后我们可以写两个样式用于用户名通过验证或未通过验证的显示样式,未加入图片.
Css
.Error{ border:1px solid #A2553B;background-color:#FEF1E1;width:140px;float:left;height:18px;line-height:18px;margin-left:24px;color:#4F4F4F;text-indent:12px;}
.Right{ border:1px solid #419041;background-color:#EDFCE7;width:140px;float:left;height:18px;line-height:18px;margin-left:24px;color:#4F4F4F;text-indent:12px;}
这两个样式你可以把它放到样式表中也可以将它放到当中.
接下来只需敲一段脚本到注册的xmlHttpRequest.aspx页面去.
脚本
核心代码:
http_request.ResponseText这句是用于获取验证用户名页面中异步传输过来的值..
上面的代码做了详细的注释,这里就不多做解释了..
接下来验证用户名的页面中接收传过来的值进行判断了...
Code
1 public partial class Validate : System.Web.UI.Page
2 {
3 //获取url传过来的值
4 private string UserName
5 {
6 get { return Request.QueryString["UserName"].ToString(); }
7 }
8 protected void Page_Load(object sender, EventArgs e)
9 {
10 //这里你可以连至用户表检查是否存在这个用户名,当然如果你用membership中的验证方法会更简洁.
11 if (Server.HtmlEncode(UserName) =="123456")
12 //还记得脚本中的if(sta.indexOf("regok")!=-1)这句吗,regok就是这里的啦..
13 Response.Write("regok");
14 else
15 Response.Write("error");
16 }
17 }
就这样一个简单的无刷新验证用户就完成啦...本机测试已通过.呵呵刚好最近一直在学习控件开发,下篇就将其封装成一个控件.
源码下载
来源：http://www.cnblogs.com/JustDI
