学步园

为了给初学者一个明确的思想,通过一个简单的实例来说明一下AJAX的处理过程![本人也是初学]

本示便引用了Ajax 2.0包: AjaxPro.2.dll    (ps:网上可以很容易找到下载地址)

首先建立测试库并建立用户表,表的字段有:ID  用户名 密码 ,插入一条测试数据。代码如下:
         

CREATE DATABASE TestLogin
GO
USE TestLogin
GO
CREATE TABLE TestUser
(
  Us_ID INT IDENTITY(1,1) PRIMARY KEY,
  Us_Uid VARCHAR(20),
  US_Pwd VARCHAR(20)
)
GO
INSERT INTO TestUser (Us_Uid,Us_Pwd) VALUES ('admin','admin')
GO

接下来建立登录验证的存储过程，代码如下：

CREATE PROCEDURE LoginCheck (@userName VARCHAR(20),@userPass VARCHAR(20))
 
AS

SELECT Us_Uid FROM TestUser WHERE Us_Uid=@userName AND Us_Pwd=@userPass

新建一个WEB项目,一个主页我取名 Default.aspx  ,添加bin应用程序文件夹,将AjaxPro.2.dll 复制到bin目录下,对它添加引用! 并在web.config 中的 <system.web>节中加入对包的描述，代码如下：

    <httpHandlers>
      <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
    </httpHandlers>

写一个功能类，用来接收UI传来的用户名密码并调用存储过程进行验证，代码如下：

public class Login
{
    public Login()
    {
        //
        // TODO: 在此处添加构造函数逻辑
        //
    }

    //下面登录功能类
    public string LoginCheck(string sUid, string sPwd)
    {
        SqlConnection conn = 数据库连接！
        SqlCommand cmd = new SqlCommand("Chuncu", conn);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.Add("@userName", sUid);
        cmd.Parameters.Add("@userPass", sPwd);
        cmd.Connection.Open();
        string Str = Convert.ToString(cmd.ExecuteScalar());
        cmd.Connection.Close();
        return Str;
    }
}

下面是 Default.aspx 页面的后置Default.aspx.cs代码：

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //添加对AJAX包的注册
        AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
    }

    [AjaxPro.AjaxMethod]
    public string SetTb(string name,string pass)
    {   //AJAX调用此方法来实例化登录验证类，并用AJAX传过来的值为参调用登录验证方法，返回查询的用户名，为空代表登录失败！
        Login ln = new Login();
        string str = ln.LoginCheck(name, pass);
        return str;
    }

下面是Default.aspx 页面的代码：

    <script language="javascript" type="text/javascript">
    //<!CDATA[
    
    function comit_onclick()
    {
    //取得用户输入的用户名和密码！
    var name=document.getElementById("tb1").value;
    var pass=document.getElementById("tb").value;
    if(name=="")
    {
       //对用户名输入框进行非空验证
       alert("用户名不能为空！");
       document.getElementById("tb1").focus();
       return false;
    }
    if(pass=="")
    {
       //对密码输入框进行非空验证
       alert("密码不能为空！");
       document.getElementById("tb").focus();
       return false;
    }
      //以用户名和密码为参调用后台CS里面的登录验证方法，返回所查询的用户名！ 
    _Default.SetTb(name,pass,callback);
    }
    function callback(res)
    {
      //取得所查询的用户名，如果为空提示登录失败，还则提示登录成功，转到登录成功页面！
      if(res.value=="")
      {
         alert("用户名或密码错误，登录失败！");
         document.getElementById("tb1").value="";
         document.getElementById("tb").value="";
         document.getElementById("tb1").focus();
      }
      else
      {
      alert("登录成功！");
      location.href="index.htm";
      }
    }
    
    //]]>
    </script>

本人昨天才开始看看了AJAX内容，如有不对的地方请各位牛人指证，写这篇文章的目的就是为了给初学者开一盏明灯！

欢迎QQ讨论：75256996