上一篇我们通过异步刷新Ajax 技术，来实现监控页面监控位号值的刷新，采用Ajax （Asynchronous Javascript And XML）技术，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
重点：异步和部分网页更新，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。同时，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
上文我们采用用户点击click事件来加载数据，tag值每次更新需要用户主动点击按钮来获取tag的最新值，对于监控页面来说我们可能希望界面数据是主动刷新的，用户无须操作模式下，能够直观看到数据的变化情况，如下图 PV/SP 值。
3.1. 定时ajax轮询技术
以满足当前的需求来说，实现数据的实时刷新效果最简单粗暴的方式就是采用定时ajax轮询技术，我们就能快速把原型演化到主动更新tag当前值了。在某些特定的场景下，简单粗暴是最好满足需求手段和方式。下面我们把代码稍微重构一下就能够满足这个需求。
//JQuery 代码入口
$(document).ready(function(){ setInterval("getData()",3000); }); function testClick() {
//模拟改变值
//$("#divTag").html(''); ////模拟异步从后台获得值
//$.ajax({url:"/getTagCurValue",success:function(result){
// $("#divTag").html(result);
//}}); getData(); } function getData() {
//模拟异步从后台获得值
$.ajax({url:"/getTagCurValue",success:function(result){
$("#divTag").html(result);
}});
}
3.2. IDE运行调试
在集成开发环境里，F5重新测试页面，就会看到一个主动tag值主动变化的监控界面，如下图：
Flask运行后台也能监控到每次url请求，如下图：
浏览器端也能通过开发者工具F12，监控到网络请求。
到这一步，我们完成了一个简单粗暴的实时刷新监控界面的原型。
3.3. 设置Flask工程端口号
Flask每次运行F5测试页面，我们发现项目的端口都是随机变化的，为了方便测试通过设置工程属性，把项目的端口设置一个固定值，如下图：
3.4. 小结
本小节我们通过使用ajax定时轮询来刷新数据，使得监控界面的数据看起来是实时刷新的，从而让技术原型基本具备了实时刷新的效果，基本满足了验证要求。同时，我们也能看到ajax轮询的网络及带宽的消耗都是相对较高的，从服务端请求响应和浏览器调试都能跟踪到请求的情况，因此从技术的性能来看还不是较好的选择。当然在局域网等内部系统上这个已经达到了监控界面的基本要求，下一篇我们演示采用如何通过websocket技术来提高数据的传输效率。
