> 原文出處：https://www.phodal.com/blog/bare-minimum-iot-system-ajax/
最后效果見:[http://b.phodal.com/](http://b.phodal.com/)
代碼位置:[http://b.phodal.com/js/app.js](http://b.phodal.com/js/app.js)
我覺得似乎我把這個代碼寫長了，但是我不是故意，只是必需的。先觀察Ajax部分：
## Ajax
剝離后的Ajax部分代碼如下所示，主要用的是jQuery框架的getJSON來實現的
~~~
var dataLength = [];
function drawTemp() {
var zero = [];
$.getJSON('/athome/', function(json) {
var items = [];
dataLength.push(json.length);
$.each(json, function(key, val) {
zero.push(val.temperature);
});
};
~~~
實際上，我們做的只是從/athome/下面獲取數據，再將數據堆到數組里面，再把這部分放到圖形中。等等，什么是Ajax?
* AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
* AJAX 不是新的編程語言，而是一種使用現有標準的新方法。
* AJAX 是與服務器交換數據并更新部分網頁的藝術，在不重新加載整個頁面的情況下。
JSON我們前面也已經了解過了，看看getJSON吧。
#### jQuery. getJSON
方法定義：jQuery.getJSON( url, data, callback )
通過get請求得到json數據
* ·url用于提供json數據的地址頁
* ·data(Optional)用于傳送到服務器的鍵值對
* ·callback(Optional)回調函數，json數據請求成功后的處理函數
我想你似乎應該懂得了一點，就是在不刷新網頁的同時，用javascript獲取數據放到圖表上，就這么簡單。
## HighChart
再省去一部分，摘自我原來的博客
HIGHCHARTS Highcharts是一個制作圖表的純Javascript類庫，主要特性如下：
* 兼容性：兼容當今所有的瀏覽器，包括iPhone、IE和火狐等等；
* 對個人用戶完全免費；
* 純JS，無BS；
* 支持大部分的圖表類型：直線圖，曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散布圖；
* 跨語言：不管是PHP、Asp.net還是Java都可以使用，它只需要三個文件：一個是Highcharts的核心文件highcharts.js，還有a canvas emulator for IE和Jquery類庫或者MooTools類庫；
* 提示功能：鼠標移動到圖表的某一點上有提示信息；
* 放大功能：選中圖表部分放大，近距離觀察圖表；
* 易用性：無需要特殊的開發技能，只需要設置一下選項就可以制作適合自己的圖表；
* 時間軸：可以精確到毫秒;
不過因為項目原因，所以可能不會再使用這個，只對個人免費，現在的考慮是基于D3做一個新的。
### 官方示例代碼
~~~
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
~~~
我承認我也不想看這些代碼，但是這樣子似乎使原文的長度變長了。大部分人也省得去查找了。
所以我們要做的只是用數組代替data
## jQuery Mobile
在首頁上看到的那個效果是jQuery Mobile。。
