用httpHandler实现简易ajax框架

前言：

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

 

步骤一：

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

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

　　

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

　　　　键　　　　　值 　　　　含义

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

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

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

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

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

　　代码如下：

　　

　　整体代码如下：

　　

 

步骤二：

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

　　代码如下：

?
1
2
3
4
<httpHandlers>
            <remove verb="*" path="*.asmx"/>
            <add verb="*" path="*.dxy" validate="false" type="AjaxFramework.AjaxHandler"/>
</httpHandlers>

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

 

步骤三：

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

　　代码如下：

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

 

步骤四：

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

　　后台测试类代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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);
        }
    }
}

　　页面前台代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<%@ 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>

　　页面效果图一：

 

　　页面效果图二：

 

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

posted @   dongger  阅读(4693)  评论(22)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示