上一篇我們通過非同步重新整理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('2020');

            ////模擬非同步從後臺獲得值
            //$.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技術來提高資料的傳輸效率。

&n