一款经典的ajax登录页面后台asp.net


答案：下面实现一个经典的登录页面，有保存密码功能，页面上所有的控件都是html控件，没有服务器控件


1，新建一名为login.htm的静态网页文件，作为登录页面，如图



body标签代码



复制代码 代码如下:

<body onkeydown ="enterLogin()"> <!--添加按下键盘事件--> 

<div style="text-align: center"> 
<table border="1" cellpadding="1"> 
<tr> 
<td align="center" style="width: 100px; height: 20px; background-color: #99cccc" 
valign="middle"> 
用户名：</td> 
<td align="center" style="width: 74px; height: 20px; background-color: #99cccc" valign="middle"> 
<input id="txtusername" style="width: 111px; height: 19px" type="text" onblur ="checkuser()" /></td> 
<td align="center" style="width: 199px; height: 20px; background-color: #99cccc" 
valign="middle"><img src="" id ="imgCheck" style = "visibility :hidden; "/ ><span id ="unMessage"> 
</span></td> 
</tr> 
<tr> 
<td align="center" style="width: 100px; height: 29px; background-color: #99cccc" 
valign="middle"> 
密码：</td> 
<td align="center" style="width: 74px; height: 29px; background-color: #99cccc" valign="middle"> 
<input id="txtpwd" style="width: 107px; height: 17px" type="password" /></td> 
<td align="center" style="width: 199px; height: 29px; background-color: #99cccc" 
valign="middle"><span id ="pwdMessage"></span> 
</td> 
</tr> 
<tr> 
<td align="center" colspan="3" style="background-color: #99cccc" valign="middle"> 
<input id="cbRememberPwd" type="checkbox" />记住密码一个月</td> 
</tr> 
<tr> 
<td align="center" colspan="3" style="background-color: #99cccc" valign="middle"> 
<input id="btnOK" type="button" value="登录" onclick ="login()" /> 
<input id="btnReset" type="button" value="重置" onclick ="reset()" /></td> 
</tr> 
</table> 
</div> 

</body>



2，在login.htm中引入外部js代码



<script type ="text/javascript" src ="aj.js" ></script>
<script type ="text/javascript" src ="loginCookies.js" ></script>


其中aj.js为ajax封装的类，loginCookie.js为对Cookie操作的代码


aj.js代码如下



//JScript文件

//ajax请求功能函数
//作者：吴宝佑
//get调用方式：(1)实例化 var aj=new ajax(); (2)调用get函数 aj.get(url,callback) (3)写回调函数 function callback(xhr){xhr.responsetext}
//post调用方式：(1)实例化 var aj=new ajax(); (2)调用post函数 aj.post(url,content,callback) (3)写回调函数 function callback(xhr){xhr.responsetext}

//构造ajax对象

function ajax() 
{
    function getXHR()//获取xmlhttprequest
    {
        var request=false;
        try 
        {
            request = new XMLHttpRequest();
        } 
        catch (trymicrosoft) 
        {
              try 
              {
                request = new ActiveXObject("Msxml2.XMLHTTP");
              } 
              catch (othermicrosoft) 
              {
                try 
                {
                      request = new ActiveXObject("Microsoft.XMLHTTP");
                } 
                catch (failed) 
                {
                      request = false;
                }
              }
        }
        return request;
上一个：ajax 同步和异步XMLHTTP代码分析
下一个：ajax+php 谷歌搜索框自动填充功能实例代码
更多图片编程知识:
一款经典的ajax登录页面 后台asp.net

一款经典的ajax登录页面后台asp.net
