ajax入门,jQuery+ashx （二）

上节说到一般处理程序，由于时间关系就晚上继续了。下面按照一个实例项目来具体说明一下。

首先新建一个空白解决方案"AjaxPj"

添加一个新的项目（asp.net web application）"Ajax.Website"

修改配置文件，如下图所示

新建文件MyHandler.ashx,代码如下

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
namespace Ajax.Website
{
    /// <summary>
    /// Summary description for $codebehindclassname$
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class MyHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string action = context.Request["action"].ToString();
            string text = "";
            switch (action.ToUpper())
            {
                case "GETALLUSER":
                    text = new UserService().GetAllUser();
                    break;
                case "OTHERACTION":
                    text = "";
                    break;
                default:
                    break;
            }
            context.Response.ContentType = "text/plain";
            context.Response.Write(text);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

新建User.cs,代码如下

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace Ajax.Website
{
    public class User
    {
        private string _id = string.Empty;
        public string Id
        {
            get { return _id; }
            set { _id = value; }
        }
        private string _name = string.Empty;
        public string Name
        {
            get { return _name; }
            set { _name = value; }
        }
        private string _password = string.Empty;
        public string Password
        {
            get { return _password; }
            set { _password = value; }
        }
        private int _age = 0;
        public int Age
        {
            get { return _age; }
            set 
            { _age = value; }
        }
        public User(string id, string name, string password, int age)
        {
            this.Id = id;
            this.Name = name;
            this.Password = password;
            this.Age = age;
        }
    }
}

新建文件Result.cs,代码如下

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace Ajax.Website
{
    /// <summary>
    /// 返回结果对象
    /// </summary>
    public class Result
    {
        //错误信息
        public string Error = string.Empty;
        //返回的Json
        public string Json = string.Empty;
        public Result()
        { }
    }
}

新建文件UserService.cs，代码如下

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;
using Newtonsoft.Json;
namespace Ajax.Website
{
    public class UserService
    {
        public string GetAllUser()
        {
            IList<User> users = new List<User>();
            User user1 = new User("1","user1","pwd1",21);
            User user2 = new User("2", "user2", "pwd2", 22);
            User user3 = new User("3", "user3", "pwd3", 23);
            User user4 = new User("4", "user4", "pwd4", 24);
            users.Add(user1);
            users.Add(user2);
            users.Add(user3);
            users.Add(user4);
            Result result = new Result();
            string error = "";
            string json = "";
            result.Error = error;
            result.Json = Newtonsoft.Json.JavaScriptConvert.SerializeObject(users);
            return Newtonsoft.Json.JavaScriptConvert.SerializeObject(result);
        }
    }
}

新建文件defaul.js，代码如下

$(document).ready(function(){
    $.post("getUser.test",{action:"GETALLUSER"},function(data){showUser(data);});
});
function showUser(data)
{
debugger;
    var obj=$.parseJSON(data);
    var error=obj.Error;
    var json=obj.Json;
    
    var div=$("#content");
    
    var html="";
    html+="<table border=/"1px/"><tr><td>ID</td><td>NAME</td><td>PASSWORD</td><td>AGE</td></tr>";
    
    var users=$.parseJSON(json);
    
    $.each(users,function(n,user){
        html+="<tr><td>"+user.Id+"</td><td>"+user.Name+"</td><td>"+user.Password+"</td><td>"+user.Age+"岁</td></tr>";
    });
    html+="</table>";
    
    div.append(html);
}

新建文件Index.htm，代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <mce:script src="js/jquery-1.4.2.js" mce_src="js/jquery-1.4.2.js" type="text/javascript"></mce:script>
    <mce:script src="js/default.js" mce_src="js/default.js" type="text/javascript" ></mce:script>
</head>
<body>
    <div id="content">
        
    </div>
</body>
</html>

到此代码基本上就写完了，全部的目录结构如下

下面配置IIS，相信细心的你一定发现了default.js中用jQuery的ajax函数$.post中的URL为"getUser.test",".test"是什么文件？为什么能够作为URL来进行请求，这就是在web.config中配置的处理Myhandler,但是想要浏览器识别".test"，就必须在IIS中进行配置，过程如下：

好了，现在IIS也配置好了。执行浏览Index.htm,你将在你的浏览器中看到如下结果

手酸了，写好了，老婆在催了，完了

2010-12-12 21：17：30 写于重庆市渝北区大竹林银竹苑（家中）