《AJAX学习心得分享-------（三）AJAX+JSON无刷新加载大量后台数据》

Posted on 2012-10-15 17:21 星星之火116 阅读(7028) 评论(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 <br>+ "</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());<br>//实例化一个PDataContex
 
            List<Pserson> listp= pdc.Pserson.Where(p => p.PAge > 0).OrderBy(p => p.PAge).ToList();<br>//从数据库中读取年龄大于0岁的人的信息，并转换为List集合，这里就用到了我们在开始之前新建的Linq TO Sql类的文件，<br>//通过这个类，很好实现了数据库数据和类对象的映射（之前的《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全解析》一节有详细的说明，不太清楚的朋友可以去先看一下。

到这里我们已经实现了无刷新的加载后台打量数据。请先看下结果吧。

加载前：