《AJAX学习心得分享-------（三）AJAX+JSON无刷新加载大量后台数据》
Posted on 2012-10-15 17:21 星星之火116 阅读(7022) 评论(4) 编辑 收藏 举报我们知道使用AJAX是为了提供更好的用户体验、提高程序的性能，在实际的开发中有时候不免会遇到从后台数据库读取大量的数据然后在前台加载显示的情况，我们之前两节都有讲过从前台向后台请求数据、登录验证之类的。但是那些都是在数据量较小的情况下，如果请求的数据比较多，这个时候大量数据的传输就成了一个问题，如何将后台的数据传输至前台并显示呢？这里就要用到了JSON！那么什么是JSON呢？之前我在《Serialization全解析》这一篇文章中讲到过，这里就再给大家稍微的讲一下，JSON(即：JavaScript Object Notation) 是一种轻量级的数据交换格式。Json的语法规则其实很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
如下示例：
{
"people": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb"},
{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }
]
}
下面我会通过一个示例示例向大家演示如何从JQuery+Json无刷新的从后台读取数据。
新建一个ASP.NET web应用程序，在项目下新建一个Linq to Sql类文件P.dbml，将数据库中Person表拖到该文件中，形成数据库数据和对象的映射，如图示：
然后新建一个ShowPerson.htm页，布局如下：
<body>
<h1>Hello! This is the ShowPerson Page!</h1>
<input id="btnshow" type="button" value="Show All Person" onclick="ShowPerson()" />
<div id="pdiv" style="width:300px; height:300px; background:green">
<table id="showtable"></table>
</div>
</body>
在<head></head>节点里写如下代码：
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>//引用JS文件，VS2010里Script文件夹里自带的都有，添加后可以使用jQuery，会有提示
<script type="text/javascript">
function ShowPerson{
//采用$.post()方法向后台请求数据
$.post("GetPerson.ashx", { i: Math.random() }, function (data, textStatus) {
//请求成功，返回处理数据
if (textStatus == "success") {
alert(data);//显示一些返回的数据，主要做测试用
var ps = $.parseJSON(data);//使用$.parseJSON(data)解析从后台请求的Json格式的数据
var table = $("#showtable");
for (var i = 0; i < ps.length; i++) {//经过解析后，将从后太读取的数据逐条添加到页面中显示
var item = ps[i];
var row = $("<tr><td>" + item.PName + "</td><td>" + item.PSex + "</td><td>" + item.PAge
+ "</td><td>" + item.PJob + "</td></tr>");
table.append(row);
}
$("#pdiv").css("background", "lightblue");//添加完成后，将背景色修改，以显示添加完毕
}
});
}
</script>
下面在新建一个一般处理程序页GetPerson.ashx页
代码如下：
首先需要添加一个引用
using System.Web.Script.Serialization;//使用JavaScriptSerializer()时
using System.Configuration;//使用ConfigurationManager类从配置文件获得连接字符串用
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
PDataContext pdc = new PDataContext(ConfigurationManager.ConnectionStrings["LinqTestConnectionString"].ToString());
//实例化一个PDataContex
List<Pserson> listp= pdc.Pserson.Where(p => p.PAge > 0).OrderBy(p => p.PAge).ToList();
//从数据库中读取年龄大于0岁的人的信息，并转换为List集合，这里就用到了我们在开始之前新建的Linq TO Sql类的文件，
//通过这个类，很好实现了数据库数据和类对象的映射（之前的《LINQ学习心得分享-----（五）LINQ TO SQL全解析一节》有详细的介绍，不太理解的朋友可以先去看一下》）
var personjs = new JavaScriptSerializer();//新建一个JavaScriptSerialize示例，主要用作序列化，将List<Person>集合序列化为Json合适的字符串
var persons = personjs.Serialize(listp);//将List<Person>集合序列化
context.Response.Write(persons);//返回输出JSON格式的数据
}
当然将List<Person>集合序列化的方式还可以使用DataContractJsonSerializer类的WriteObjec（）方法，但是在使用该类之前应先添加System.ServiceModel.Web 和 System.Runtime.Serialization的引用，然后再添加命名空间：System.Runtime.Serialization.Json
关于使用DataContractJsonSerializer类进行序列化之前在《Serialization全解析》一节有详细的说明，不太清楚的朋友可以去先看一下。
到这里我们已经实现了无刷新的加载后台打量数据。请先看下结果吧。
加载前：
点击加载：
作测试用的弹出返回的数据：
加载完毕：
因为数据库里只有这几条数据，所以数据显示的比较少，但是道理就是这样的，大数据也是这样实现的。
本章节到这里我们利用JQuery+JSon已经实现了从后台读取大量的数据。当然这个界面很丑，我们在处理从后台返回的数据时，在逐条处理时可以对数据的样式进行修饰，这里不作为重点，有兴趣的朋友可以自己去研究下。希望可以对朋友们有所帮助，也希望大家多多指教。
