使用AjaxPro实现无刷新更新数据

需求

在一个页面动态无刷新的更新后台得到的数据。要想无刷新的更新数据，需要使用javascript能够获取后台返回的数据，然后通过第三方Javascript库（JQuery等）动态更新web页面DOM对应的数值即可，而AjaxPro库恰恰具有使用Javascript语句获取后台方法返回的数据的功能，问题就这样迎刃而解，顿时感觉萌萌哒。

流程

整个过程如下图所示：

详细操作

首先下载AjaxPro库（点击此处下载AjaxPro库），下载后解压得到两个dll文件，如下所示：

其中AjaxPro.2.dll库是AjaxPro.dll库的升级版本，我们以最新版本AjaxPro.2.dll为例来一步步说明AjaxPro的使用。

接下来创建一个空的Web项目，添加AjaxPro.2.dll引用，新建一个aspx页面命名为AjaxPro2Test，添加jQuery库和样式文件，项目文件结构如下所示：（请无视其它的文件，这个跟我后台取的数据有关）

打开Web.config配置文件，在web下添加httpHandlers节点，如下所示：

<?xml version="1.0"?><configuration>  <system.web>    <compilation debug="true" targetFramework="4.0"/>    <httpRuntime/>    <httpHandlers>      <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>    </httpHandlers>  </system.web></configuration>

在AjaxPro2Test页面后台即AjaxPro2Test.aspx.cs文件中的Page_Load方法添加AjaxPro对AjaxPro2Test页面类的注册，为js需要调用的后台方法添加[AjaxPro.AjaxMethod]属性（此方法必须声明为public，否则会提示找不到），可以在页面类前面添加[AjaxPro.AjaxNamespace("AjaxTest")]属性（这样js调用时可以直接使用AjaxTest.方法(参数).value，否则需要使用命名空间.页面类.方法名(参数).value），页面后台代码如下所示：

using System;
using System.Linq;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using PILib;
namespace PiSdkAjaxPro2Test
{   [AjaxPro.AjaxNamespace("AjaxTest")]
    public partial class AjaxPro2Test : System.Web.UI.Page
    {
        private OSIPISDK _pisdk = new OSIPISDK("piserver", "pidemo", "");
        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof (AjaxPro2Test));
        }
    /// <summary>
    /// 获取实时数据
    /// </summary>
    /// <param name="tagName"></param>
    /// <returns></returns>
    [AjaxPro.AjaxMethod]
    public double[] GetRealValByTagName(string tagName)
    {
        var jTagsArray = (JArray)JsonConvert.DeserializeObject(tagName);
        var tagsNameList = jTagsArray.Select(x => x.ToString()).ToList();
        if (!_pisdk.Connected)
        {
            _pisdk.ConnectToServer();
        }
        double[] val;