AJAX 是與服務器交換數據的藝術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。
在做項目的過程當中要用到jQuery動態刷新獲取數據，上網查了一番教程，講此知識點的教程很多，但個人感覺比較亂，有的講的很復雜。於是根據自己的項目所完成的功能，決定自己寫一篇關於jQuery局部動態刷新獲取數據的文章。
jQuery局部動態刷新的好處不言而喻，如果數據量非常大，采用網頁一次獲取數據的方式會對網頁造成很大的壓力，采用jQuery動態獲取數據則可以避免這一點，它會實時獲取你所請求的數據，下面直接附上代碼：
1 <script> 2 var ajaxFresh = function(plate){ 3 4 $.getJSON("http://localhost:3000/get?plate="+plate+"&ajax="+plate,null,function(data){ 5 $("#myPlateLael").html(plate); 6 var tr = new String(); 7 for(var i = 0;i < data.length;i++) 8 { 9 10 tr += "<tr><td>"+data[i].columns["DATA:TIME"].value+"</td><td>"+data[i].columns["DATA:DEVICE_IN"].value+ 11 "</td><td>"+data[i].columns["DATA:POS"].value+"</td><td>"+data[i].columns["DATA:SPEED"].value+"/"+data[i].columns["DATA:LIMIT"].value 12 +"</td><td>"+data[i].columns["DATA:LENGTH"].value+"</td><td>"+data[i].columns["DATA:COLOR"].value+"</td></tr>"; 13 } 14 $("#modal_content").html(tr); 15 16 }); 17 18 } 19 </script>
此代碼放在html的<head>中，第2行的函數ajaxFresh響應以下按鈕的請求：
<td><button type="button" onclick ="ajaxFresh('<%= key %>')" class="btn btn-info" data-toggle="modal" data-target="#demo"><%= key %></button>
第4行$.getJSON就是jQuery的應用,getJSON() 方法使用 AJAX 的 HTTP GET 請求獲取 JSON 數據。后端的返回數據格式就應該是json格式的，用，res.json()返回數據。
getJSON語法為：
$(selector).getJSON(url,data,success(data,status,xhr))
url：必需。規定將請求發送到哪個 URL。
data：可選。規定發送到服務器的數據。為json格式，為空時直接寫null。
success(data,status,xhr)：可選。規定當請求成功時運行的函數。
- data - 包含從服務器返回的數據
- status - 包含請求的狀態（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
- xhr - 包含 XMLHttpRequest 對象
第6行的tr是為14行的畫表格准備數據，第14行就是向id為modal_content的元素寫入數據，id為modal_content的元素如下：
1 <div class="modal modal-wide fade" id="demo" tabindex="-1" role="dialog" 2 aria-labelledby="myModalLabel" aria-hidden="true"> 3 <div class="modal-dialog"> 4 <div class="modal-content"> 5 <div class="modal-header"> 6 <button type="button" class="close" 7 data-dismiss="modal" aria-hidden="true"> 8 × 9 </button> 10 <h4 class="modal-title text-success" id="myPlateLael"> 11 </h4> 12 </div> 13 14 <div class="modal-body"> 15 <table class="table table-striped table-hover" width="100%"> 16 <thead class="text-left"> 17 <tr> 18 <td>Time</td> 19 <td>device_in</td> 20 <td>pos</td> 21 <td>speed</td> 22 <td>length</td> 23 <td>color</td> 24 </tr> 25 </thead> 26 <tbody id="modal_content" class="text-left"> 27 </tbody> 28 </table> 29 30 </div> 31 </div><!-- /.modal-content --> 32 </div><!-- /.modal --> 33 </div>
id=modal_content的元素即為表格的內容<tbody>。
綜合以上情況即可實現點擊按鈕button時觸發ajaxFresh函數，ajaxFresh通過getJSON請求數據，得到的數據以表格的形式寫入<tbody>中，因為button中有一個模態框data_toggle="modal",data-target="#demo"即在點擊的同時進入模態框，模態框的內容顯示部分mmodal_boay的內容即是ajax的.html()寫入的數據。