ASP.Net中实现Ajax的几种实现方法之AjaxPro的使用(一)

原创 2012年03月21日 10:35:55
 

1、什么是Ajax

 

Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写。"Ajax"这个名词的发明人是Jesse James Garrett,而大力推广并且使Ajax技术炙手可热的是Google。Ajax的核心理念在于使用XMLHttpRequest对象发送异步请求。

2、为什么使用Ajax

  • 减轻服务器的负担。Ajax的原则是"按需取数据",可以最大程序地减少冗余请求,减轻服务器的负担。
  • 无需刷新页面,减少用户心理和实际的等待时间。特别是在读取大量数据时,不会像刷新页面那样出现白屏的情况,Ajax使用XMLHttpRequest对象发送请求并且得到服务器响应,在不重新载入整个页面的情况下,用Javascript操作DOM更新页面。因此在读取数据的过程中,用户所面对的不是白屏,是原来的页面内容(也可以加入一个"loading"的提示框让用户知道目前正在读取的数据),只有在数据接收完毕之后才更新社会相应部分的内容。这种更新是瞬间的,用户几乎感觉不到。
  • 带来更好的用户体验
  • 可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器负担,充分利用带宽资源,节约空间和宽带租用成本。
  • 可以调用外部数据
  • 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
  • 进一步促进页面呈现与数据的分离

3、Ajax应用场景

场景1:数据验证

场景2:按需取数据

场景3:自动更新页面

4、Ajax的实现

1、AjaxPro

AjaxPro是首家支持以各种方式通过javascript访问服务端.net的免费库。它能把Javascript请求发送到.NET方法,服务端传回给Javascript,甚至包括串行化自定义类。

2、AjaxPro 的实例说明

①添加添加AjaxPro.dll应用

我这里用到的是ajaxpro.2.dll,ajaxpro就是ajax.net的类库(一个dll文件),是.net1.0的ajaxpro.2是.net2.0的, 大家可以到这里http://www.ajaxpro.info/进行下载。

②配置we.config

这一步的作用是保证客户端向"ajaxpro/*.ashx"的请求(POST和GET)都被AjaxPro.AjaxHandlerFactory拦截。

打开web.config文件,在<configuration><system.web>后添加以下代码,

 

<HttpHandlers>

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

</HttpHandlers>


 

或者用下面的配置

<httpHandlers> 

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

</httpHandlers


③添加服务端方法

打开后台代码,在Page_Load方法体内加上如下代码,

 

AjaxPro.Utility.RegisterTypeForAjax(typeof(所在类的类名));

 

如图所示。

其作用是向客户端输出下面的代码:语句的作用:页面注册方法的作用。

<script type="text/javascript" src="/ch33/ajaxpro/core.ashx"></script> 

<script type="text/javascript" src="/ch33/ajaxpro/ch33.Verify,ch33.ashx"></script>


③添加数字加一的方法,首先在方法前加 [AjaxPro.AjaxMethod],然后像写C#方法一样写方法,如图

注意:需要加上[Ajax.AjaxMethod]标识,这样才能够被客户端访问

④添加前台代码

⑤运行监测通过

⑥进阶代码

后台代码

下面的的代码是创建一个可序列化的类

 [Serializable]
    public class CSubStation
    {
        public string Code;
        public string Name;
        public string Longitude;
        public string Latitude;
    }
    


 

 [AjaxPro.AjaxMethod]
    public CSubStation[] GetSubStation()
    {
      
        CSubStation[] cs = null;
        int i = 0;
        int j = 0;
        try
        {
           
            DataTable dt = SqlHelper.CaceExcutQeueryString(sqll, "qybjdtkey", DateTime.Now.AddDays(30));
           


            if (dt.Rows.Count > 0)
            {
                cs = new CSubStation[dt.Rows.Count];

                for (i = 0; i < dt.Rows.Count; i++)
                {
                    CSubStation c = new CSubStation();
                    c.Code = dt.Rows[i]["SubStCode"].ToString();
                    c.Name = dt.Rows[i]["SubStName"].ToString();
                    c.Latitude = "";
                    c.Longitude = "";

                    if (dt.Rows[i]["Longitude"] != null)
                    {
                        double lon = 0;
                        string[] longitude = dt.Rows[i]["Longitude"].ToString().Split('*');
                        for (j = 0; j <= longitude.GetUpperBound(0); j++)
                        {
                            if (longitude[j] != "")
                            {
                                if (j == 0)
                                    lon += double.Parse(longitude[j]);
                                if (j == 1)
                                    lon += double.Parse(longitude[j]) / 60;
                                if (j == 2)
                                    lon += double.Parse(longitude[j]) / 3600;
                            }

                        }

                        if (lon > 0)
                            c.Longitude = lon.ToString();
                        else
                            c.Longitude = "";
                    }

                    if (dt.Rows[i]["Latitude"] != null)
                    {
                        double lat = 0;
                        string[] latitude = dt.Rows[i]["Latitude"].ToString().Split('*');
                        for (j = 0; j <= latitude.GetUpperBound(0); j++)
                        {
                            if (latitude[j] != "")
                            {
                                if (j == 0)
                                    lat += double.Parse(latitude[j]);
                                if (j == 1)
                                    lat += double.Parse(latitude[j]) / 60;
                                if (j == 2)
                                    lat += double.Parse(latitude[j]) / 3600;
                            }
                        }

                        if (lat > 0)
                            c.Latitude = lat.ToString();
                        else
                            c.Latitude = "";
                    }
                    cs[i] = c;
                }
            }

            dt.Dispose();
        }
        catch (Exception ex)
        {
            string s = ex.ToString();
        }

        return cs;
    }


客户端代码:

function GetStationData(e){
    var result = null;
    var table = null
    var i = 0;
    var x,y,s,t;
    if(AddJpg == 0){
        AddJpg = 1;
        result = rightbody_bjdt.GetSubStation();
        table = result.value;
        if(typeof(table) == "object" && table != null){
            for (i = 0;i < table.length;i++){
                var x = table[i].Longitude;
                var y = table[i].Latitude;
                var s = table[i].Code;
                var ss = table[i].Name;
                var t = "<img src='images/0.jpg' width='15' height='15' style='cursor:default' onmouseover=yincang(); onclick=ShowData('" + s + "'); id = '" + s + "' title='" + ss + "'>";
                
                if (x != null && y != null){
                    if(x.search("^-?\\d+(\\.\\d+)?$") ==0 && y.search("^-?\\d+(\\.\\d+)?$") ==0){
                        var scode = "s" + s;
                        MapControl1.CustomLayer.InsertMark(scode,x,y,10,10,t);
                    }
                }
            }
        }
    }
    setInterval(GetStatus,1000);
}


 

注意进阶代码中用到的对象序列化,注意千万别忘记在web.config中的配置。

webapi ajax post .netcore 正确写法, 解决对象为空

//类定义     public class Users     {         public int UserID;         public string UserName...
  • yingwang9
  • yingwang9
  • 2016年09月10日 11:10
  • 1166

MVC学习笔记之使用JQuery方式发送Ajax请求调用后台Controller

通常情况下在MVC模式中我们会采用使用controller获取业务数据(model)并将业务数据提交给view,或者由view传递数据给controller,再由controller更新model。在...
  • huangyezi
  • huangyezi
  • 2015年04月25日 22:53
  • 53788

.NET CORE 前端后台数据传递

.net core的数据提交有很多种方式。 (1)可以用form,Ajax提交到后台,Ajax还可以将数据返回前台。 例如 return Json(new { success = false, mes...
  • u012601647
  • u012601647
  • 2017年03月30日 23:04
  • 1043

【ASP.NET】利用jQuery与.ashx完成简单的Ajax

在ASP.NET同样可以与其它编程语言一样,利用前台的Ajax技术,只是需要注意的是,后台的处理程序不再是一个aspx页面中的Page_Load,而且ASP.NET独有的“一般处理程序”.ashx,下...
  • yongh701
  • yongh701
  • 2016年01月08日 10:42
  • 3070

自己封装ajax

/** 全局ajax对象 */ var ajax = new Object(); var ajaxCore = null;/** * @see 创建ajax核心对象,兼容浏览器有:IE6,7,8,9...
  • birdflyto206
  • birdflyto206
  • 2016年06月07日 20:48
  • 1205

asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

Jquery+Ajax分页测试 $(function () { InitPage(1, 10); $(".nextP...
  • smartsmile2012
  • smartsmile2012
  • 2015年01月21日 18:03
  • 1915

asp.net Mvc4 使用ajax结合分页插件实现无刷新分页

本文为在mvc4中使用ajax实现无刷新分页demo,记录一下。 解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用ajax技术发送当前页码到后端控制器...
  • u013924731
  • u013924731
  • 2016年10月25日 17:02
  • 1594

AjaxPro2完整入门教程

一、目录 简单类型数据传送(介绍缓存,访问Session等) 表类型数据传送 数组类型数据传送(包含自定义类型数据)   二、环境搭建 1.这里本人用的是VS2012。 2.新建一个空的...
  • binyao02123202
  • binyao02123202
  • 2013年12月18日 18:16
  • 1659

Ajax发送json格式数据到Asp.net MVC服务端的一些代码片段

最近一直做些asp.net mvc的页面,每次前端与后端交互,都要baidu查下代码怎么写,也不去思考为什么这么写,导致每每写这代码,都需要下search下代码。 正好现在有点空闲时间,我就把我写的代...
  • qq_26054303
  • qq_26054303
  • 2016年05月17日 17:29
  • 776

ASP.NET C#+Ajax+json无刷新分页参考

先html代码 ...
  • bianjing40
  • bianjing40
  • 2015年12月15日 21:51
  • 1399
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.Net中实现Ajax的几种实现方法之AjaxPro的使用(一)
举报原因:
原因补充:

(最多只允许输入30个字)