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;

        _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("UpdateImpData()", 3000);

        });

        //获取后台数据

        function UpdateImpData() {

            //得到后台返回的数据

            var result = AjaxTest.GetRealValByTagName(tags).value;

            if (!result) return;

            //更新DOM对应的Text值

            for (var i = 0; i < result.length; i++) {

                var obj = tagsObj[i];

                var xx = obj.Obj;

                xx.text(result[i].toFixed(2));

            }

        }

    </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>

最终效果

分类: C#

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

使用AjaxPro实现无刷新更新数据
需求在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(JQuery等)动态更新web页面DOM ...
[转]jquery 点击表格变为input可以修改无刷新更新数据
原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...
ajaxpro实现无刷新更新数据库【简单方法】
原文发布时间为:2008-10-24 -- 来源于本人的百度文章 [由搬家工具导入] 我用的是AjaxPro.2.dll，然后我想点击那个 “无刷新更新” 那个按钮，实现无刷新修改表中的内容 HT ...
window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格
td点击后变为input可以输入,更新数据,无刷新更新演示 XML/HTML Code <table border="0" cellpadding="0" ...
Ajax技术(WEB无刷新提交数据)
(转自:http://www.jb51.net/article/291.htm) Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器 ...
无刷新更新listview
闲来无事,写点水文吧!有用得着的可以参考下,无刷新更新listview是什么意思呢?举个例子,在订单类listview列表中,常常会有各种订单状态,拿商城类app来说,会有待付款,待收货,确认收货等等 ...
利用history.pushState()实现页面无刷新更新
本来是在研究vue-router如何记录滚动位置,点返回的时候还是回到原来的位置,看到有人说的history.state存了一个值,才把history研究一下,发现 history.pushState ...
djano modles values+ajax实现无页面刷新更新数据
做项目的过程中想通过不刷新页面的方式来进行页面数据刷新,开始使用http://www.cnblogs.com/ianduin/p/7761400.html方式将查询结果数据进行序列化.发现可以行,但是 ...

随机推荐

NSIS常用代码整理
原文 NSIS常用代码整理这是一些常用的NSIS代码,少轻狂特意整理出来,方便大家随时查看使用.不定期更新哦~~~ 1 ;获取操作系统盘符 2 ReadEnvStr $R0 SYSTEMDRIVE ...
IIS ASP.NET 版本转换批处理代码
原文 IIS ASP.NET 版本转换批处理代码用来转换asp.net版本的代码,需要的朋友可以参考下. 标识符的查看方法:iisaspnet.bat代码复制代码代码如下: @echo off e ...
UOJ #5. 【NOI2014】动物园扩大KMP
第一次NOI称号. ... 扩展假设知道KMP如果. .. . 就是水题了. ... #5. [NOI2014]动物园统计提交情况描写叙述提交近日.园长发现动物园中好吃懒做的动物越来越多了.比 ...
4.事务提交过程，交易的基本概念，Oracle交易周期，保存点savepoint,数据库的隔离级别
事务提交过程事务基本概念概念:一个或者多个DML语言组成特点:要么都成功.要么都失败事务的隔离性:多个client同一时候操作数据库的时候.要隔离它们的操作, 否则出现:脏读不可反 ...
js中位运算的运用
原文:js中位运算的运用我们可能很少在编程中用位运算,如果没深入学习,可能也很难理解.平时的数值运算,其实是要先转换成二进制再进行运算的,而位运算就是直接进行二进制运算,所以位运算的执行效率肯定是更 ...
js之with
网上找资料的时候看到有js代码里出现了大量的with语句,有点好奇,这里做下总结: 1)简要说明 with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性. ...
iOS定义自己的回报button(它不影响返回手势)
这种方法可以定义为返回到其button,它不影响返回手势. 新方法: self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] ...
C#邮件收发
public class Mail { private string mailkey; private string mailSecret; public string mailFrom; publi ...
BZOJ 3209 花神的数论题数位DP+数论
题目大意:令Sum(i)为i在二进制下1的个数求∏(1<=i<=n)Sum(i) 一道非常easy的数位DP 首先我们打表打出组合数然后利用数位DP统计出二进制下1的个数为x的数的数量 ...
【Swift】 GET&POST请求网络缓存的简单处理
GET & POST 的对比源码:https://github.com/SpongeBob-GitHub/Get-Post.git 1. URL - GET 所有的参数都包含在 URL 中 ...

AjaxPro实现无刷新更新数据

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

随机推荐

热门专题