利用Ajax实现信息获取，使用bootstrap来美化页面，果然很强大。
将bootstrap的API添加到引用。如图程序源码结构：
页面源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JSON.NET实例</title>
<!-- 包含头部信息用于适应不同设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- 包含 bootstrap 样式表 -->
<link rel="stylesheet" href="Scripts/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h2>信息</h2>
<div class="table-responsive">
<table class="table table-striped table-bordered" >
<thead>
<tr>
<th>
用户名
</th>
<th>
年龄
</th>
<th>
性别
</th>
<th>
国籍
</th>
<th>
电子邮箱
</th>
</tr>
</thead>
<tbody id="personBody">
</tbody>
</table>
</div>
</div>
<script src="Scripts/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="Scripts/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.getJSON("PersonHandler.ashx", function (data, status) {
if (status == "success") {
$.each(data, function (index, item) {
var beginTag = "<tr><td>";
var endTag = "</td></tr>";
var tag = "</td><td>";
$("#personBody").append($(beginTag + item.Name + tag + item.Age + tag + item.Gender + tag
+ item.Country + tag + item.Email + endTag));
});
}
});
});
</script>
</body>
</html>
效果图：
