前言：本篇就是簡單說了一下前後臺交互的一種方式，適用於小白。
1、簡單介紹一下Ajax（Asynchronous JavaScript and XML）異步請求：
Ajax 不是一種新的編程語言，而是一種用於創建更好更快以及交互性更強的Web應用程序的技術。
2、簡單介紹一下Json數據：
JSON(JavaScriptObject Notation JS 對象簡譜) 是一種輕量級的數據交換格式。它基於ECMAScript(歐洲計算機協會制定的js規範)的一個子集，採用完全獨立於編程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得 JSON 成爲理想的數據交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網絡傳輸效率。
JSON 最常見的用法之一，是從 web 服務器上讀取 JSON 數據（作爲文件或作爲 HttpRequest），將 JSON 數據轉換爲 JavaScript 對象，然後在網頁中運用js使用該數據渲染出頁面。
3、本篇demo的簡單介紹：
前臺：html+jquery+ajax
後臺：Java+Servlet
Ide：Myeclipse
jdk：1.7以上
簡述：前臺爲普通的html頁面，使用ajax發起一個get請求到後臺，後臺返回提前拼接好的json數據
4、前臺代碼如下：
4.1、index.html的代碼（jquery的擴展自己去百度下載一個就好記住改index.html的引用）：
<!DOCTYPE html>
<html>
<head>
<title>解析json數據</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="jquery-1.8.2.min.js"></script>
</head>
<body>
<input id="xuan" type="button" value="獲取解析json數據">
<table id="ta" cellspacing="0" border="1px solid" style="border-color:red;">
<tr>
<td>name</td>
<td>age</td>
</tr>
</table>
</body>
<script>
$(function(){
$("#xuan").click(function(){
$.ajax({
//這個url根據你自己的環境去改一下就行了
url:"http://127.0.0.1:8080/AjaxAndJsonTest/alldata",
data:"",
Type:"get",
dataType:"json",
success:function(res){
//組裝第一個取出數據組裝網頁html標籤元素
var td1 = $("<td>"+res.name+"</td>")
//組裝第二個td
var td2 = $("<td>"+res.age+"</td>")
//組裝tr
var tr = $("<tr></tr>");
//把td表格追加到tr的子元素後面
$(tr).append(td1).append(td2);
//追加到table子元素後面
$("#ta").append(tr);
},
error:function(err){
alert(err)
}
})
})
})
</script>
</html>
5、後臺代碼如下：
5.1、點擊下方鏈接去下載項目（導入是web項目哦！別導錯了！）：
鏈接：https://pan.baidu.com/s/1rS5vLkfKSlMMQ5vhlrNlsA
提取碼：yu5p
5.2、代碼主要邏輯如下圖所示（具體點上方下載鏈接並且導入進去仔細看邏輯都有註釋的）：
6、效果如下：
