Ajax应用实例——登录

        前段时间一直在实习，忙着Planetarii的项目没有时间写点东西，现在因为毕业设计的事情回到学校可以抽点空写一下。项目一开始PM让我做个登录界面，要用ajax。虽然ajax出来很久了，但是自己一直懒得去学，现在没办法只好硬着头皮去找了点资料，下面是利用ajax做的一个简单的登录界面。

---

 

       Login.html：

       

登录

用户名:
密 码:

       

       login.js:

       /*---------------------------------------------------------------- // File Name:login.js // File Introduce // check and handler user input // // Create Mark // Create Date: 4/20/2011 11:15:19 PM // Create by Ben.Jiang //----------------------------------------------------------------*/ var email_str = /^(?:[a-z/d]+[_/-/+/.]?)*[a-z/d]+@(?:([a-z/d]+/-?)*[a-z/d]+/.)+([a-z]{2,})+$/i; //Email regular expression $(document).ready(function() { $("#btnLogin").click(function() { var username = $("#txtUser").val(); var password = $("#txtPassword").val(); if (username == "" || password == "") {//check if the input is legal alert("用户名和密码不可以为空!"); return false; } else if (!email_str.test(username)) {//check if email is legal alert("邮件地址格式不正确!"); return false; } else { $.ajax({ type: "POST", url: "/Ajax/LoginHandler.ashx", //event handler url data: "username=" + escape($('#txtUser').val()) + "&password=" + escape($('#txtPassword').val()),//发送ajax请求 beforeSend: function() { $("#loading").css("display", "block"); //show loading $("#btnLogin").css("display", "none"); //hide login button }, success: function(msg) { $("#loading").hide(); //hide loading if (msg == "unregistered") { alert("对不起，该用户未注册!");//user is unregistered } if (msg == "frozen") { alert("对不起，该用户已被冻结!");//user id frozen } if (msg == "fail") { alert("对不起，用户名或密码错误!"); //login failed } if (msg == "success") { parent.document.location.href = "manage.aspx"; //login successfully } }, complete: function(data) { $("#loading").css("display", "none"); //hide loading $("#btnLogin").css("display", "block"); //show login } }); } return false; //stop client continue submit } ); });

      

      ajax请求处理程序,LoginHandler.ashx：

      /*---------------------------------------------------------------- // File Name:LoginHandler.ashx.cs // File Introduce // handler user login // // Create Mark // Create Date: 4/20/2011 12:15:19 PM // Create by Ben.Jiang //----------------------------------------------------------------*/ using System; using System.Collections.Generic; using System.Web; using System.Web.Services; using System.Web.SessionState; using PLA.BLL; using PLA.Model; using Web.App_Code; namespace Web.Ajax { [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class LoginHandler : IHttpHandler,IRequiresSessionState { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string username = context.Request["username"]; string password = context.Request["password"]; UserBLL userBLL = new UserBLL(); //check if the user is registered if (!userBLL.GetUserRegister(username)) { context.Response.Write("unregistered"); }//check if the user is frozen else if (!userBLL.CheckUserBanStatusByEmail(username)) { context.Response.Write("frozen"); } else { LoginBLL loginBLL = new LoginBLL(); //check if the username and password is right bool flag = loginBLL.ValidateLogin(username, MD5Helper.getMd5Hash(password), null); if (flag) { UserInfo user = userBLL.GetUserInfoByEmail(username); context.Session["UID"] = user.U_ID; context.Session["Email"] = user.U_Email; context.Response.Write("success"); } else { context.Response.Write("fail"); } } } public bool IsReusable { get { return false; } } } }