需求

在一个页面动态无刷新的更新后台得到的数据。要想无刷新的更新数据,需要使用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;
        _pisdk.GetRealData(tagsNameList.ToArray(), out val);
        return val;
    }
    }
}

AjaxPro2Test页面前台代码如下所示,js代码部分有注释说明:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPro2Test.aspx.cs" Inherits="PiSdkAjaxPro2Test.AjaxPro2Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-1.8.3.min.js"></script>
    <link href="AjaxTest.css" rel="stylesheet" />
    <script type="text/javascript">
        var tags = new Array();
        var tagsObj = new Array();
        $(document).ready(function () {
            //遍历class为ai的元素,取得元素tagName数组和对应元素数组
            $(".ai").each(function (i) {
                var tag = $(this);
                var t = tag.attr("tag");
                if (t) {
                    tags[i] = t;
                    tagsObj[i] = { Obj: tag };
                }
            });
            UpdateImpData();
            //每隔3秒更新一下数据
            window.setInterval();
        });
        //获取后台数据
        function UpdateImpData() {
            //得到后台返回的数据
            var result = AjaxTest.GetRealValByTagName(tags).value;
            if (!result) return;
            //更新DOM对应的Text值
            ; i < result.length; i++) {
                var obj = tagsObj[i];
                var xx = obj.Obj;
                xx.text(result[i].toFixed());
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td class="CheckedTD">有功功率</td>
                <td class="rtdb ai" tag="1DCS_AI_SELMW" id="testTag"></td>
            </tr>
            <tr>
                <td class="CheckedTD">汽轮机转速</td>
                <td class="rtdb ai" tag="1DCS_AI_DEHTOCCS"></td>
            </tr>
            <tr>
                <td class="CheckedTD">主汽温度</td>
                <td class="rtdb ai" tag="1DCS_AI_LBA20CT601"></td>
            </tr>
            <tr>
                <td class="CheckedTD">主汽压力</td>
                <td class="rtdb ai" tag="1DCS_AI_LBA20CP101"></td>
            </tr>
            <tr>
                <td class="CheckedTD">再热温度</td>
                <td class="rtdb ai" tag="1DCS_AI_LBB20CT601"></td>
            </tr>
            <tr>
                <td class="CheckedTD">再热压力</td>
                <td class="rtdb ai" tag="1DCS_AI_LBB20CP101"></td>
            </tr>
            <tr>
                <td class="CheckedTD">总煤量</td>
                <td class="rtdb ai" tag="1DCS_AI_COALSUM"></td>
            </tr>
            <tr>
                <td class="CheckedTD">总风量</td>
                <td class="rtdb ai" tag="1DCS_AI_TOTAIRFLOW"></td>
            </tr>
            <tr>
                <td class="CheckedTD">真空</td>
                <td class="rtdb ai" tag="1DCS_AI_MAG10CP102"></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

特别说明

就是页面前台代码js代码“var result = AjaxTest.GetRealValByTagName(tags).value;”中的AjaxTest对应后台cs文件中[AjaxPro.AjaxNamespace("AjaxTest")]属性中设置的AjaxTest。

使用AjaxPro.dll库和AjaxPro.2.dll库不同的地方在于Web.config文件配置的不同,使用AjaxPro.dll库的配置文件如下所示:

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

最终效果

使用AjaxPro实现无刷新更新数据的更多相关文章

  1. AjaxPro实现无刷新更新数据

    使用AjaxPro实现无刷新更新数据 需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(J ...

  2. [转]jquery 点击表格变为input可以修改无刷新更新数据

    原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...

  3. ajaxpro实现无刷新更新数据库【简单方法】

    原文发布时间为:2008-10-24 -- 来源于本人的百度文章 [由搬家工具导入] 我用的是AjaxPro.2.dll,然后我想点击那个 “无刷新更新” 那个按钮,实现 无刷新 修改表中的内容 HT ...

  4. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  5. jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格

    td点击后变为input可以输入,更新数据,无刷新更新 演示 XML/HTML Code <table border="0" cellpadding="0" ...

  6. Ajax技术(WEB无刷新提交数据)

    (转自:http://www.jb51.net/article/291.htm) Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器 ...

  7. 无刷新更新listview

    闲来无事,写点水文吧!有用得着的可以参考下,无刷新更新listview是什么意思呢?举个例子,在订单类listview列表中,常常会有各种订单状态,拿商城类app来说,会有待付款,待收货,确认收货等等 ...

  8. 利用history.pushState()实现页面无刷新更新

    本来是在研究vue-router如何记录滚动位置,点返回的时候还是回到原来的位置,看到有人说的history.state存了一个值,才把history研究一下,发现 history.pushState ...

  9. djano modles values+ajax实现无页面刷新更新数据

    做项目的过程中想通过不刷新页面的方式来进行页面数据刷新,开始使用http://www.cnblogs.com/ianduin/p/7761400.html方式将查询结果数据进行序列化.发现可以行,但是 ...

随机推荐

  1. 解决Spark读取Hive分区表出现Input path does not exist的问题

    假设这里出错的表为test表. 现象 Hive读取正常,不会报错,Spark读取就会出现: org.apache.hadoop.mapred.InvalidInputException: Input ...

  2. jQuery EasyUI教程之datagrid应用(二)

    上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的 点击查看上篇:jQuery Eas ...

  3. BW知识问答锦集2

    PM面试分为BW.BO两部分,根据顾问的简历和应聘的岗位所侧重的问题不同. BW包括基础知识.增量.增强.LO抽取.数据源. BO包括 CR.CR.WEBI.UNI. 一. 基础知识 技术面试 1. ...

  4. python进阶(四)---需要了解的魔法方法

    以下内容,源于个人理解所得,纯属臆测,爱信不信:-D.欢迎大家留言讨论指正. 1.__new__魔法方法: 原型:__new__(cls, *args, **kwargs) 说明:__new__魔法方 ...

  5. 隐藏原生html5 video controls

    隐藏原生html5 video controls 凤凰视频焦点项目mobile html5播放器测试时bug,由于没有用原生的controls而是自己写的custom controls,虽然设置了co ...

  6. scss/css 中添加ie hack

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ specific styles ...

  7. android 画虚线、实线,画圆角矩形,一半圆角

    1.画虚线,实线: 建立dotted_line_gray.xml文件放在drawable文件夹下面. android:shape="line" 可以修改你想要的形状 <?xm ...

  8. ViewPager onPageChangeListener

    今天在做项目的时候,由于要处理viewPager页面滑动的事件,所以对其进行了一个小小的研究: 首先ViewPager在处理滑动事件的时候要用到OnPageChangeListener OnPageC ...

  9. native vlan(本征VLAN)

    其实就是不打tag的VLAN,因为你想,一个VLAN在经过交换设备老是打tag,然后再脱掉tag...这个很浪费计算资源,尤其是在转发的报文量相当大的时候. 如何解决:     可以定义一种vlan, ...

  10. [ubunut]打造Ubuntu下Java开发环境 (转)

    http://www.cnblogs.com/wufengtinghai/p/4542366.html 遇到困难: A Java Runtime Environment (JRE) or Java D ...