AJAX（Asynchronous JavaScript and XML）是一種前端技術，可以實現網頁在不刷新的情況下與服務器進行數據交互。利用AJAX可以實時讀取數據并進行可視化展示，如畫圖等操作。本文將介紹如何使用AJAX實時讀取數據，并且通過一個具體的例子來說明。

假設我們有一個實時監控系統，需要將溫度傳感器的數據實時展示成折線圖。溫度數據存儲在服務器的數據庫中，我們可以使用AJAX定時從數據庫中讀取最新的數據，并將其展示在網頁上。

首先，我們需要在網頁中引入jQuery庫，因為jQuery庫封裝了AJAX相關的方法，可以簡化我們的操作。接著，我們可以使用setInterval函數來設置一個定時器，讓它每隔一段時間執行一次AJAX請求。

$(document).ready(function(){
setInterval(function(){
$.ajax({
url: "getData.php",
dataType: "json",
success: function(data){
// 數據讀取成功后的處理邏輯
}
});
}, 5000); // 定時器每隔5秒執行一次
});

在這段代碼中，我們使用了jQuery的ajax方法來發送一個GET請求。其中，url參數指定了數據請求的地址，dataType參數指定了返回的數據類型為json。在success回調函數中，我們可以對返回的數據進行處理。比如，可以使用echarts.js這個開源庫來繪制折線圖。

接下來，我們可以通過一個具體的例子來說明AJAX實時讀取數據并畫圖的過程。假設服務器返回的數據格式是一個數組，數組的每個元素表示一個溫度采樣點。我們可以將這些采樣點作為橫坐標，將溫度作為縱坐標，繪制成折線圖。以下是一個簡單的例子：

success: function(data){
var xAxisData = [];
var seriesData = [];
for(var i=0; i<data.length; i++){
var item = data[i];
xAxisData.push(item.time);
seriesData.push(item.temperature);
}
var chart = echarts.init(document.getElementById("chart-container"));
var option = {
xAxis: {
data: xAxisData
},
yAxis: {},
series: [{
type: 'line',
data: seriesData
}]
};
chart.setOption(option);
}

在這個例子中，我們遍歷返回的數據數組，并分別將時間和溫度的值保存到xAxisData和seriesData數組中。然后，我們使用echarts.init方法初始化一個圖表，并根據xAxisData和seriesData數組來配置圖表的橫坐標和縱坐標數據。最后，使用chart.setOption方法來設置圖表的配置。這樣，我們就可以實時查看到最新的溫度數據折線圖了。

總之，使用AJAX可以實現網頁在不刷新的情況下與服務器進行數據交互，并將數據可視化展示出來。通過定時發送AJAX請求，并將返回的數據進行解析和處理，我們可以實現實時讀取數據并畫圖的效果。以上就是AJAX實時讀取數據畫圖的示例，希望能對大家有所幫助。