用httpHandler实现简易ajax框架

前言：

　　工作中常常用到以前同事写的一个ajax框架，偶尔抽空看看，感觉恩是复杂，于是自己花心思研究了一个比较简单的，使用httpHandler和反射实现的简易ajax框架。帖出此文，以此铭记，好好学习，天天向上……

步骤一：

　　首先需要一个接受客户端请求的httpHandler服务，我定义为"AjaxHandler",实现接口"IHttpHandler"和"IRequiresSessionState"，有关这两个接口，在此不赘述，有兴趣请翻阅MSDN。

　　实现一个属性"IsReusable" ，代码如下

　　

        public bool IsReusable
        {
            get { return false; }
        }

　　和一个方法"ProcessRequest"，用以接受请求。 在这个方法内，我对请求参数头作了如下规定（即Request.Headers）：

　　　　键　　　　　值 　　　　含义

　　InvokeType 　Ajax   表示请求方式 为 Ajax 请求 目前只支持该请求，有兴趣的朋友可以实现其他的方式

　　assembly 　　字符串 表示要请求的服务器方法所在类所在的程序集完全限定名(如：AjaxTest)

　　space 　　　  字符串 表示要请求的服务器方法所在类所在的命名空间(如：Dxy.AjaxTest)

　　className　  字符串 表示要请求的服务器方法所在类的类名称(如：OrderHelper)

　　methodName 字符串 表示要请求的服务器方法名称(如：GetOrders)

　　代码如下：

　　

string assembly = request.Headers["assembly"]??"";
            string space = request.Headers["space"] ?? "";
            string className = request.Headers["className"] ?? "";
            string methodName = request.Headers["methodName"] ?? "";
            //if (assembly == "") throw new Exception("assembly can not be empty.");
            if (space == "") throw new Exception("namespace can not be empty.");
            if (className == "") throw new Exception("type can not be empty.");
            if (methodName == "") throw new Exception("method can not be empty.");
            Type type = Type.GetType(space + "." + className + "," + assembly);
            if (type != null)
            {
                MethodInfo method = type.GetMethod(methodName);
                if (method != null)
                {
                    object[] arguments = null;
                    ParameterInfo[] parms = method.GetParameters();
                    if (parms.Length>0)
                    {
                        arguments = new object[parms.Length];
                        for (int i = 0; i < parms.Length; i++)
                        {
                            arguments[i] = Convert.ChangeType(request.Form[i], parms[i].ParameterType);
                        }
                    }
                    /* 判断调用的方法是否静态方法。
					 * 如果是静态方法，则方法调用不需创建类实例。*/
                    object inst = method.IsStatic ? null : Activator.CreateInstance(type, true);
                    if (method.ReturnType.Name == "Void")
                    {
                        method.Invoke(inst, arguments);
                        return "";
                    }
                    else
                    {
                        return System.Web.HttpUtility.UrlEncode(method.Invoke(inst, arguments).ToString());
                    }
                }
                else
                {
                    throw new Exception("method invoke failed.");
                }
            }
            else
            {
                throw new Exception("type invoke failed.");
            }

　　整体代码如下：

　　

using System;
using System.Web;
using System.Web.SessionState;
using System.Reflection;

namespace AjaxFramework
{
    public class AjaxHandler : IHttpHandler, IRequiresSessionState
    {
        #region IHttpHandler 成员

        public bool IsReusable
        {
            get { return false; }
        }

        public void ProcessRequest(HttpContext context)
        {
            try
            {
                if (context.Request.Headers["InvokeType"] == "Ajax")
                {
                    context.Response.Write(InvokeMethod(context.Request));
                }
            }
            catch (Exception ex)
            {
                context.Response.Write(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ex));
            }
            finally
            {
                try
                {
                    context.Response.End();
                }
                catch { }
            }
        }

        #endregion
        /// <summary>
        /// 处理ajax请求
        /// </summary>
        /// <param name="request"></param>
        /// <returns></returns>
        private string InvokeMethod(HttpRequest request)
        {
            string assembly = request.Headers["assembly"]??"";
            string space = request.Headers["space"] ?? "";
            string className = request.Headers["className"] ?? "";
            string methodName = request.Headers["methodName"] ?? "";
            //if (assembly == "") throw new Exception("assembly can not be empty.");
            if (space == "") throw new Exception("namespace can not be empty.");
            if (className == "") throw new Exception("type can not be empty.");
            if (methodName == "") throw new Exception("method can not be empty.");
            Type type = Type.GetType(space + "." + className + "," + assembly);
            if (type != null)
            {
                MethodInfo method = type.GetMethod(methodName);
                if (method != null)
                {
                    object[] arguments = null;
                    ParameterInfo[] parms = method.GetParameters();
                    if (parms.Length>0)
                    {
                        arguments = new object[parms.Length];
                        for (int i = 0; i < parms.Length; i++)
                        {
                            arguments[i] = Convert.ChangeType(request.Form[i], parms[i].ParameterType);
                        }
                    }
                    /* 判断调用的方法是否静态方法。
					 * 如果是静态方法，则方法调用不需创建类实例。*/
                    object inst = method.IsStatic ? null : Activator.CreateInstance(type, true);
                    if (method.ReturnType.Name == "Void")
                    {
                        method.Invoke(inst, arguments);
                        return "";
                    }
                    else
                    {
                        return System.Web.HttpUtility.UrlEncode(method.Invoke(inst, arguments).ToString());
                    }
                }
                else
                {
                    throw new Exception("method invoke failed.");
                }
            }
            else
            {
                throw new Exception("type invoke failed.");
            }
        }
    }
}

步骤二：

　　将配置文件添加节点，用以指向前面定义的"AjaxHandler"

　　代码如下：

<httpHandlers>
			<remove verb="*" path="*.asmx"/>
			<add verb="*" path="*.dxy" validate="false" type="AjaxFramework.AjaxHandler"/>
</httpHandlers>

　　在这里我规定，凡是后缀为".dxy"的请求都指向"AjaxHandler"时间处理程序。

步骤三：

　　客户端请求脚本。 ajax核心XMLHttpRequest的创建与请求发送脚本。

　　代码如下：

//XMLHttpRequest
///<summary>创建XMLHttpRequest实例</summary>
function CreateAjax() {
    var xmlHttp;
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        try {
            xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
            } catch (e) {

            }
        }
    }
    return xmlHttp;
}
var onInitf; //开始发送请求事件
var onCompletef; //请求完成事件
var onErrorf; //请求失败事件
///<summary>向服务器请求数据</summary>
///<param name="assembly">程序集</param>
///<param name="space">命名空间</param>
///<param name="className">类</param>
function AjaxRequest(assembly, space, className) {
    var xmlHttp = CreateAjax();
    ///<param name="methodName">方法</param>
    ///<param name="args">参数数组</param>
    ///<param name="onInit">开始发送请求事件</param>
    ///<param name="onComplete">请求完成事件</param>
    ///<param name="onError">请求失败事件</param>
    this.sendRequest = function(methodName, args, onInit, onComplete, onError) {
        onInitf = onInit;
        onCompletef = onComplete;
        onErrorf = onError;
        xmlHttp.open("POST", "a.dxy"); //以POST方法请求服务器
        xmlHttp.setRequestHeader("InvokeType", "Ajax");
        xmlHttp.setRequestHeader("assembly", assembly);
        xmlHttp.setRequestHeader("space", space);
        xmlHttp.setRequestHeader("className", className);
        xmlHttp.setRequestHeader("methodName", methodName);
        xmlHttp.onreadystatechange = function() {
            switch (xmlHttp.readyState) {
                case 0:
                    //此处可添加对用户提示的等待信息（如进度条）
                    if (typeof (onInit) == "function") {
                        onInitf();
                    }
                    break;
                case 4:
                    //状态==200表示成功
                    if (xmlHttp.status == 200) {
                        try {
                            onCompletef(parseJson(xmlHttp.responseText));
                        } catch (e) {
                            onErrorf(e);
                        }
                    } else {
                        var e = parseJson(xmlHttp.responseText);
                        if (e == null) {
//                            e = "{\"Message\":\"服务未找到。\"}";
                            e = parseJson("{\"Message\":\"服务未找到。\"}");
                        }
                        onErrorf(e);
                    }
                    break;
            }
        }
        xmlHttp.send(args);

        this.sendRequest.assembly = assembly;
        this.sendRequest.space = space;
        this.sendRequest.className = className;
        this.sendRequest.methodName = methodName;
    }
}
function parseJson(str) {
    if (typeof (str) == 'string' && str != null) {
        str = decodeURIComponent(str);
        try { return eval('(' + str.replace(/\r/g, '\\r').replace(/\n/g, '\\n') + ')'); }
        catch (e) { return null; }
    }
    return null;
}

　　我在其中公开了一个类型AjaxRequest，该类型包含一个实例函数sendRequest，外部调用只需要new一个AjaxRequest对象，然后调用方法传入相应的参数即可。 调用代码如下：

<script language="javascript" type="text/javascript">
        function GetOrders() {
            var ajax = new AjaxRequest("AjaxTest", "Dxy.AjaxTest", "OrderHelper");
            var methodName = "GetOrders";

            ajax.sendRequest(methodName, null, null, function(data) {
                var tab = document.createElement("table");
                tab.style.width = "400px";
                tab.style.height = "300px";
                //创建table头部
                var hr = tab.insertRow(0);
                var htd0 = hr.insertCell(0);
                htd0.innerHTML = "订单编号";
                var htd1 = hr.insertCell(1);
                htd1.innerHTML = "订单日期";
                var htd2 = hr.insertCell(2);
                htd2.innerHTML = "代理商";
                var htd3 = hr.insertCell(3);
                htd3.innerHTML = "金额";
                //填充table内容
                for (var i = 0; i < data.length; i++) {
                    var row = tab.insertRow(i + 1);
                    var td0 = row.insertCell(0);
                    td0.innerHTML = data[i].OrderID;
                    var td1 = row.insertCell(1);
                    td1.innerHTML = data[i].OrderTime;
                    var td2 = row.insertCell(2);
                    td2.innerHTML = data[i].Proxy;
                    var td3 = row.insertCell(3);
                    td3.innerHTML = data[i].Amount;
                }
                document.getElementById("divTest").appendChild(tab);
            }, function(e) {
                alert("Ajax错误：" + e.Message);
            });
        }
    </script>

步骤四：

　　最后，我写了一个用来测试这个简易ajax框架的服务器后台类和页面。

　　后台测试类代码如下：

using System;
using System.Collections.Generic;

namespace Dxy.AjaxTest
{
    public class Order
    {
        public string OrderID;
        public string OrderTime;
        public string Proxy;
        public double Amount;
    }
    public class OrderHelper
    {
        public string GetOrders()
        {
            List<Order> list = new List<Order>();
            list.Add(new Order()
            {
                OrderID=Guid.NewGuid().ToString(),
                Amount=1111,
                OrderTime = DateTime.Now.ToString("yyyy-MM-dd"),
                Proxy="神经病1号"
            });
            list.Add(new Order()
            {
                OrderID = Guid.NewGuid().ToString(),
                Amount = 2222,
                OrderTime = DateTime.Now.ToString("yyyy-MM-dd"),
                Proxy = "神经病2号"
            });
            list.Add(new Order()
            {
                OrderID = Guid.NewGuid().ToString(),
                Amount = 3333,
                OrderTime = DateTime.Now.ToString("yyyy-MM-dd"),
                Proxy = "神经病3号"
            });
            return new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(list);
        }
    }
}

　　页面前台代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxFramework._Default" %>

<!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 runat="server">
    <title></title>
<style type="text/css">
    table 
    {
        border-top:solid 1px gray;
        border-left:solid 1px gray;
        padding:0px;
        margin:0px;
    }
    table td
    {
        border-right:solid 1px gray;
        border-bottom:solid 1px gray;
    }
</style>
    <script src="JavaScript/Ajax.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
        function GetOrders() {
            var ajax = new AjaxRequest("AjaxTest", "Dxy.AjaxTest", "OrderHelper");
            var methodName = "GetOrders";

            ajax.sendRequest(methodName, null, null, function(data) {
                var tab = document.createElement("table");
                tab.style.width = "400px";
                tab.style.height = "300px";
                //创建table头部
                var hr = tab.insertRow(0);
                var htd0 = hr.insertCell(0);
                htd0.innerHTML = "订单编号";
                var htd1 = hr.insertCell(1);
                htd1.innerHTML = "订单日期";
                var htd2 = hr.insertCell(2);
                htd2.innerHTML = "代理商";
                var htd3 = hr.insertCell(3);
                htd3.innerHTML = "金额";
                //填充table内容
                for (var i = 0; i < data.length; i++) {
                    var row = tab.insertRow(i + 1);
                    var td0 = row.insertCell(0);
                    td0.innerHTML = data[i].OrderID;
                    var td1 = row.insertCell(1);
                    td1.innerHTML = data[i].OrderTime;
                    var td2 = row.insertCell(2);
                    td2.innerHTML = data[i].Proxy;
                    var td3 = row.insertCell(3);
                    td3.innerHTML = data[i].Amount;
                }
                document.getElementById("divTest").appendChild(tab);
            }, function(e) {
                alert("Ajax错误：" + e.Message);
            });
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="divTest">
        <input type="button" id="btnTest" value="Ajax获取服务器数据" onclick="GetOrders();" />
    </div>
    </form>
</body>
</html>

　　页面效果图一：

 

　　页面效果图二：

 

不足之处，请指正。旨在学习。