前言：本篇就是简单说了一下前后台交互的一种方式，适用于小白。
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、效果如下：
