最近學習了如何實現(xiàn)無刷新登錄,大體的效果如下(界面比較丑,請自行忽略....):

點擊登錄按鈕時彈出登錄窗口,輸入正確的用戶名密碼后點擊登錄則登錄窗口關閉,狀態(tài)改為當前用戶名.

第一步:

首先彈出窗口使用的是jquery-ui中的控件,第一步要學會如何使用.

打開解壓后的jquery-UI下的development-bundle->demos,找到index.html,選擇dialog下的model dialog,右鍵查看源碼,觀察如何使用該控件,找到一句關鍵代碼:$("#dialog-modal").dialog({height: 140,modal: true});這是用于顯示的,打開model message中的源碼,找到關閉的關鍵代碼:$(this).dialog('close');有了這兩句代碼,可以控制窗口的顯示與關閉,可以進行下一步了.使用時需復制jquery-ui開發(fā)包的css文件夾,js文件夾到項目中.

第二步:

在這里先貼出處理AJAX請求的一般處理程序的代碼,雖然正真寫的時候都是用到再寫,但這里不可能一步一步詳細列出,為了便于理解,先將一般處理程序代碼貼出來:

1.IsLogin.ashx,用于判斷用戶是否登錄,登錄則返回用戶名.這里注意,在一般處理程序中要使用session,必須引入using System.Web.SessionState且要實現(xiàn)IRequiresSessionState接口

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.SessionState;namespace AJAX無刷新登錄.AJAX{ /// <summary> /// IsLogin 的摘要說明 /// </summary> public class IsLogin : IHttpHandler,IRequiresSessionState {  public void ProcessRequest(HttpContext context)  {   context.Response.ContentType = "text/plain";   if (context.Session["userName"] != null)   {    string userName = context.Session["userName"].ToString();    context.Response.Write("yes|"+userName);   }   else   {    context.Response.Write("no");   }  }  public bool IsReusable  {   get   {    return false;   }  } }}

2.CheckLogin.ashx,用于檢測用戶輸入用戶名密碼是否匹配,正確則返回yes,錯誤返回no,這里為了簡便沒有連接數(shù)據(jù)庫.

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.SessionState;namespace AJAX無刷新登錄.AJAX{ /// <summary> /// CheckLogin 的摘要說明 /// </summary> public class CheckLogin : IHttpHandler,IRequiresSessionState {  public void ProcessRequest(HttpContext context)  {   context.Response.ContentType = "text/plain";   string userName = context.Request["userName"];   string password=context.Request["password"];   if (userName=="admin"&&password=="admin")   {    context.Session["userName"] = "admin";    context.Response.Write("ok");   }   else   {    context.Response.Write("no");   }  }  public bool IsReusable  {   get   {    return false;   }  } }}