《AJAX学习心得分享-------（三）AJAX+JSON无刷新加载大量后台数据》
2012-10-15 17:35
615 查看
我们知道使用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已经实现了从后台读取大量的数据。当然这个界面很丑，我们在处理从后台返回的数据时，在逐条处理时可以对数据的样式进行修饰，这里不作为重点，有兴趣的朋友可以自己去研究下。希望可以对朋友们有所帮助，也希望大家多多指教。
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已经实现了从后台读取大量的数据。当然这个界面很丑，我们在处理从后台返回的数据时，在逐条处理时可以对数据的样式进行修饰，这里不作为重点，有兴趣的朋友可以自己去研究下。希望可以对朋友们有所帮助，也希望大家多多指教。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 《AJAX学习心得分享-------（三）AJAX+JSON无刷新加载大量后台数据》
- json对象load到表单中，这样后台Ajax过来的数据就可以直接加载
- 用Ajax解析JSON串，页面无刷新实时监控后台数据
- \t\t用Ajax解析JSON串，页面无刷新实时监控后台数据
- jqPlot图表插件学习之ajax-json数据加载
- 在jquery mobile制作app的几个页利用ajax将后台数据json数组动态加载到列表里面
- easyui 下拉框点击ajax后台json数据 实时刷新
- MVC使用ajax异步刷新时怎样输出从后台中传过来的JSON数据
- MVC使用ajax异步刷新时怎样输出从后台中传过来的JSON数据
- Jquery 使用Ajax获取后台返回的Json数据后,页面处理
- 用ajax json给后台action传数据要注意的问题
- ajax提交数据到后台处理返回json问题
- java 后台封装json数据学习总结（一）
- AjaxPro组件实现前后台数据无刷新交互
- jquery mobile listview加载json数据，刷新view
- ajax发送json格式数据到后台（输入流content）
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
- 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据
- 页面无刷新更新数据（ajax异步加载）
- js实现手机端可以上拉刷新，动态通过ajax从后台获取数据