快速学习AJAX之四 Ajax登陆改造

上节课程我们实现了 AJAX的一个简单的登陆，那么我们下面继续去完善这个登陆的界面，我们需要做一些什么的改造呢？好了,我先说一下自己的想法啊，大家可以在评论中去提要求，

我会尽量给大家完善好了。

首先，少不了的就是 “记住密码功能”

我们下面实现一下 .......

记住密码，我想应该就是AJAX操作COOKIES了。

先看一下效果图

好了，为了实现这个效果，我们继续我们的项目，其实我发现，这个实现 “记住密码”功能大概和AJAX联系不大，但是为了我们项目最后的完整性，我就添加上了。

首先先写一个 JS操作 cookie的函数

function setCookies(username, password,failuretime) {
   var timeNow = new Date();
   timeNow.setDate(timeNow.getDate() + failuretime);
   document.cookie = "username=" + username + "&password=" + password + "&;expires=" + timeNow.toGMTString();
 }

好了，简单的说明一下 username 用户名 password 密码，failuretime 这个是cookie的失效时间我想熟悉JS操作cookie的童鞋应该很简单就能

写出来了。

document.cookie 这个是设置 cookie到本地。

再写一个得到 cookie的函数

function getCookies() {
         var cookiestring = new String(document.cookie);
         if (cookiestring.indexOf("&") > 0) {
            var cstr = cookiestring.split(";");
            var querycookie = cstr[2].split("&");
            document.getElementById("name").value = querycookie[0].substring(querycookie[0].indexOf("=") + 1, querycookie[0].length);
            document.getElementById("pwd").value = querycookie[1].substring(querycookie[1].indexOf("=") + 1, querycookie[1].length);
         }
     }

好了，到此这两个重要的函数全部完成了。我对上面的代码，就不解释了，一些基本的操作。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        *
        {
            padding: 0px;
            margin: 0px;
            font-size: 12px;
        }
        table
        {
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript">
        var xmlHttp = false;
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
         } catch(e1) {
           try{
             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
           }
           catch(e2){
             xmlHttp = false;
           }
         }
       if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
           xmlHttp = new XMLHttpRequest();
        }
      function getAjax() {  
          var name = document.getElementById("name").value;
          var pwd = document.getElementById("pwd").value;
          if (document.getElementById('cookiebox').checked)
          setCookies(name, pwd, 365);
          xmlHttp.open("POST", "Login.ashx", true);
          xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
          xmlHttp.onreadystatechange = function () {
              if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                  document.getElementById("tableLogin").style.display = "none";
                  document.getElementById("returnLogin").innerHTML = xmlHttp.responseText; 
              }
          }
          xmlHttp.send("name="+name+"&pwd="+pwd);
      }
     function setCookies(username, password,failuretime) {
        var timeNow = new Date();
        timeNow.setDate(timeNow.getDate() + failuretime);
        document.cookie = "username=" + username + "&password=" + password + "&;expires=" + timeNow.toGMTString();
      }
      function getCookies() {
          var cookiestring = new String(document.cookie);
          if (cookiestring.indexOf("&") > 0) {
             var cstr = cookiestring.split(";");
             var querycookie = cstr[2].split("&");
             document.getElementById("name").value = querycookie[0].substring(querycookie[0].indexOf("=") + 1, querycookie[0].length);
             document.getElementById("pwd").value = querycookie[1].substring(querycookie[1].indexOf("=") + 1, querycookie[1].length);
          }
      }
      window.onload = function () {
          if (document.cookie != "") {
              getCookies();
          }
      }
    </script>
</head>
<body>
    <table id="tableLogin">
        <tr><th colspan="2"></th></tr>
        <tr><td>用户名</td><td><input type="text" id="name" /> </td> </tr>
        <tr><td>密码</td><td><input type="password" id="pwd" /></td></tr>
        <tr><td colspan="2" align="center"><input type="checkbox" name="cookiebox" id="cookiebox" />记住密码</td> </tr>
        <tr><td colspan="2" align="center"> <input type="button" value="登陆" onclick="getAjax();" /></td> </tr>
    </table>
    <div id="returnLogin">
    </div>
</body>
</html>

贴出登陆加上 “记住密码” 的功能，然后我们注意 getAjax() 这个方法里面新增见的一些代码，还有我们新增加的

window.onload = function ()

{

.................

}

大家看一下，上面的那个完整的效果。好了，到此，我们的记住密码功能已经完成了

下面我们实现这节课程的重点，就是我们的 “验证码”

首先我们需要创建一个验证码文件

这个验证码文件网络上面也有很多高手写出来过，在这里我写的是一个 .ashx 的验证码文件

首先创建一个文件

然后书写代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Drawing;
using System.IO;
using System.Drawing.Imaging;
//这个必须要引用，否则的情况下无法使用Session
using System.Web.SessionState;

namespace WebApplication1
{
    public class ValidateImg : IHttpHandler, IRequiresSessionState   //这里需要继承IRequiresSessionState接口，也是为了下面的Session做准备
    {
        
        public void ProcessRequest(HttpContext context)
        {
             context.Session["code"] = CreateCode();
             CreateImageCode(context.Session["code"].ToString(), context);
        }
        /// <summary>
        /// 创建一个4位数的验证码
        /// </summary>
        /// <returns>返回一个字符串</returns>
        public string CreateCode()
        {
            var code = "";
            Random r = new Random(DateTime.Now.Millisecond); //括号里面的是随机种子
            for (int i = 0; i < 4; i++)
            {
                code += r.Next(10);
            }
            return code;
        }
        /// <summary>
        /// 将验证码生成图片，用到的是GDI的简单操作，大家可以去网络上面找一些相关的资料即可
        /// </summary>
        /// <param name="code">文字验证码</param>
        /// <param name="context">封装 HTTP 请求的所有 HTTP 特定的信息</param>
        public void CreateImageCode(string code,HttpContext context)
        {
            int iWidth = (int)(code.Length * 12) + 10;
            Bitmap image = new Bitmap(iWidth, 20);
            Graphics g = Graphics.FromImage(image);  //在图片上面画图
            g.Clear(Color.White);   
            //声明颜色数组，为了以后实现验证码文字的变色。
            Color[] c = { Color.Black, Color.Red, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple };
            Random rand = new Random();
            //这个是增加噪点，干扰别人获取验证码
            for (int i = 0; i < 5; i++)
            {
                int x = rand.Next(image.Width);
                int y = rand.Next(image.Height);
                g.DrawRectangle(new Pen(Color.LightGray, 0), x, y, 1, 1);
            }
            //正式生成验证码
            for (int i = 0; i < code.Length; i++)
            {
                int cindex = rand.Next(7);
                Font f = new Font("Arial",12,FontStyle.Regular);
                Brush b = new SolidBrush(c[cindex]);
                int ii = 4;
                if ((i + 1) % 2 == 0) {
                    ii = 2;
                }
                g.DrawString(code.Substring(i,1),f,b,3+(i*12),ii);

            }
            g.DrawRectangle(new Pen(Color.Black, 0), 0, 0, image.Width - 1, image.Height - 1);

            MemoryStream ms = new MemoryStream();
            image.Save(ms,ImageFormat.Jpeg);
            context.Response.ClearContent();
            context.Response.ContentType = "image/Jpeg";
            context.Response.BinaryWrite(ms.ToArray());
            g.Dispose();
            image.Dispose();

        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

上面是一个简单的验证码生成的页面，互联网上面有很多牛人写的验证码文件，你可以自己去找。

具体的解释我已经写在上面的注释里面了，大家可以简单的看一下。好了，我们继续完善我们的登陆页面。

<body>
    <table id="tableLogin">
        <tr><th colspan="2"></th></tr>
        <tr><td>用户名</td><td><input type="text" id="name" /></td></tr>
        <tr><td>密码</td><td><input type="password" id="pwd" /></td></tr>
        <tr><td>验证码</td><td><input type="text" id="checkvalue" width="50"/><img src="##" onclick="getCode();" id="checkcode" height="20"
                    style=" cursor:pointer;" width="50" alt="验证码" /></td></tr>
        <tr><td colspan="2" align="center"><input type="checkbox" name="cookiebox" id="cookiebox" />记住密码</td></tr>
        <tr>
            <td colspan="2" align="center">
                <input type="button" value="登陆" onclick="getAjax();" />
            </td>
        </tr>
    </table>
    <div id="returnLogin" style=" text-align:center">
    </div>
</body>

我用黑框框的是我新增加的一些代码。

下面，我在JS里面新增加一个方法

function getCode() {
        var codeImage = document.getElementById("checkcode");
        codeImage.src = "ValidateImg.ashx?t="+Math.random();
    }

这个很简单的就不解释了，注意后面的那个随机数即可

修改 windows.onload方法。

window.onload = function () {
        getCode();
        if (document.cookie != "") {
            getCookies();
        }
    }

修改下面的方法

好了，这些都是一些细微的修改，给大家一个完整的代码

下面是完整的代码

    <script type="text/javascript">
        var xmlHttp = false;
        function createXmlHttpRequest() {
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e1) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e2) {
                    xmlHttp = false;
                }
            }
            if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
                xmlHttp = new XMLHttpRequest();
            } 
            return xmlHttp;
        }
        function getAjax() {
            createXmlHttpRequest();
            var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
            var code = document.getElementById("checkvalue").value;
            if (document.getElementById('cookiebox').checked)
                setCookies(name, pwd, 365);
            xmlHttp.open("POST", "Login.ashx", true);
            xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //document.getElementById("tableLogin").style.display = "none";
                    document.getElementById("returnLogin").innerHTML = xmlHttp.responseText;
                }
            }
            xmlHttp.send("name=" + name + "&pwd=" + pwd+"&code="+code);
        }
        function setCookies(username, password, failuretime) {
            var timeNow = new Date();
            timeNow.setDate(timeNow.getDate() + failuretime);
            document.cookie = "username=" + username + "&password=" + password + "&;expires=" + timeNow.toGMTString();
        }
        function getCookies() {
            var cookiestring = new String(document.cookie);
            if (cookiestring.indexOf("&") > 0) {
                var cstr = cookiestring.split(";");
                var querycookie = cstr[1].split("&");
                document.getElementById("name").value = querycookie[0].substring(querycookie[0].indexOf("=") + 1, querycookie[0].length);
                document.getElementById("pwd").value = querycookie[1].substring(querycookie[1].indexOf("=") + 1, querycookie[1].length);
            }
        }
        window.onload = function () {
            getCode();
            if (document.cookie != "") {
                getCookies();
            }
        }
        function getCode() {
            var codeImage = document.getElementById("checkcode");
            codeImage.src = "ValidateImg.ashx?t="+Math.random();
        }
     
    </script>
</head>

OK，页面写好了，在修改我们的

public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/html";
        var code = string.Empty;
        code = context.Request["code"].ToString();
        if (context.Session["code"] != null)
        {
            if (code.ToLower() == context.Session["code"].ToString().ToLower())
            {
                var name = context.Request["name"].ToString();
                var password = context.Request["pwd"].ToString();

                var sex = "男";
                var age = 16;
                var imageUrl = "Images/6.png";//不写代码寻找路径了，这里面的图片路径本来应该从数据库中读取出来。呵呵
                StringBuilder sb = new StringBuilder();
                if (name == "kingdz" && password == "kingdz")
                {
                    sb.Append("<table><tr><td rowspan='4'><img src='");
                    sb.Append(imageUrl);
                    sb.Append("'alt='mmpic' /></td><td align='left'>姓名：");
                    sb.Append(name);
                    sb.Append("</td></tr><tr><td align='left'>性别：");
                    sb.Append(sex);
                    sb.Append("</td></tr><tr><td align='left'>年龄：");
                    sb.Append(age);
                    sb.Append("</td></tr><tr><td align='left'>密码：");
                    sb.Append(password);
                    sb.Append("</td></tr></table>");

                    context.Response.Write(sb);
                }
                else
                context.Response.Write("登录失败");
            }
            else context.Response.Write("验证码错误");
            
        }
    }

好了到此文章就完成了。

截图看效果

谢谢大家，下节课，我们开始写注册了。

posted @ 2011-08-03 14:55 KingDZ 阅读(3175) 评论(11) 编辑收藏举报

刷新页面返回顶部

ASP.NET自学博客

体验编程的快乐，创造最有价值的网站

创意灵感经验 Money 俗

快速学习AJAX之四 Ajax登陆改造

公告

ASP.NET自学博客

体验编程的快乐，创造最有价值的网站 创意 灵感 经验 Money 俗

快速学习AJAX之四 Ajax登陆改造

公告

体验编程的快乐，创造最有价值的网站

创意灵感经验 Money 俗