ajax数据加载经验分享
2007-12-31 14:11 Clingingboy 阅读(4930) 评论(5) 编辑 收藏 举报
好久没写篇像样的随笔了,昨天晚上看了老赵的随笔,又由于这段时间这方面技术用的比较多,可能大家已经在用了.这里且与大家分享.
一.纯数据输出
1.早在看ActionScript的时候便接触到了这种写法,直到ajax很火的时候,才知道这种格式叫json.
json数据格式是供前端javascript进行操作的暂时性的数据格式,由于javascript语言的原因,访问json数据非常方便,灵活.本来由后端负责产生Ui的,现在全部由javascript操作dom来产生.避免重复,请大家参考此文JSON简介,同时推荐看看IBM的掌握 Ajax系列.
为了产生json格式的数据,asp.net ajax框架提供了一个JavaScriptSerializer类用于将数据转换成json.
分析下此做法的优点与缺点
优点:
1.后台传输数据量会比较小,减轻服务器压力
2.前端操作非常灵活,可以做很多事情
3.适用于交互性比较强的应用.
缺点:
1.必须要操作dom才能产生ui,无法与美工配合工作,需要熟悉javascript和dom的人来参与
2.大数据量下,前端javascript对json数据的解析和dom的生成会明显减慢.
豪无疑问的,直接产生html比解析要速度来的快.这是一点,要是在后端直接输出html的话,可能会由于产生的字符串太多,直接拖垮IE,挂掉.
我想唯一的做法就是尽量避免大数据量,这便要看大家的创意了,还有就是输出json,然后对json分批操作解析,这样也会有所缓解.
3.灵活的同时,降低了通用性(我有一个需求,某一天我用ajax用到我不想用了,我想回到传统的网页上去,啊噢,这种开发模式做不到)
4.前端开发人员必须了解json数据格式
二.与Ui一起输出
这是我们一贯的做法,如asp.net ajax中的UpdatePanel,其会去后端请求其Panel中所有的UI,然后返回给前端,前端不需要解析,直接得到数据输出便可.
分析下此做法的优点与缺点
优点:
1.可以与美工配合,避免动态产生dom的错误
2.前端开发人员不再需要了解后端传回什么数据格式,直接输出
3.复用性比较强,可以同时满足ajax和传统网页的浏览模式
缺点:
1.大大降低了数据的交互性,前端有时候无法得到想要的对象,只能依赖于后端产生的html数据.
2.后端数据传输量稍微变大,不过影响不大.(相对而言,后端把对象解析成json格式需要时间,前端解析json数据也是需要时间的,主要的速度瓶颈还是在数据库连接访问这里)
三.选择你想要的开发模式
上面两种模式没有谁好谁不好之说,追求效率的人可能会选第一种,这种模式与语言无端,可以套用在php,jsp,asp,都可以.
第二种开发模式比较适合asp.net,为什么呢?因为asp.net本身便存在着控件这一用法,而且效率并不低.
大家可以先看看老赵这篇技巧：使用User Control做HTML生成
四.我的做法
1.我有一个白老鼠程序,自己写的blog程序,我会在其上面应用一些新技术,然后思考一些问题.
初期阶段,我用ajax去加载UserControl中产生的html,开始感觉很好.后来我又想做成传统的网页形式,去掉ajax的加载方式,所以,我需要这么写(很高兴,终于看到代码了)
<%@ Page ContentType="text/html" Language="C#" EnableViewState="true" MasterPageFile="~/Templete.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="NLBS._default" Title="无标题页" %>
<%@ Register Src="Control/content.ascx" TagName="content" TagPrefix="uc11" %>
<asp:Content ID="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1">
<uc11:content ID="content" runat="server" />
</asp:Content>
content用户控件,用于显示文章列表.大家可以看看我的白老鼠程序http://www.clingingboy.cn
然后我做着做着...看到别人的blog有ajax应用,那个酷啊,而且我的虚拟主机便宜,访问数据速度慢.我又想把它换成ajax模式爽一把(我的天),或者说我想随意变换数据的加载模式.这种模式采用json数据格式的话根本无法满足需求,修改太大.怎么办怎么办?
由于本人偷偷的看了下ComponentArt的CallBack控件的源码(其实很早就看了),所以本人也仿照其做了一个自己的CallBack控件.我需要一个容器放content用户控件,然后再异步加载.现在现实的问题,这个页面便是content用户控件的容器.我们通过改变url参数来加载不同数据.(控件呈现是在Render方法中实现)
看下面代码.现在你可以访问诸如http://www.clingingboy.cn/default.aspx?singleArticle_param=true&ID=70 这样的url来获取content数据
protected override void Render(HtmlTextWriter writer)
{
//得到一个querystring参数
string[] requestParams = this.GetCallbackParameters();
if (requestParams != null && requestParams.Length > 0)
{
//输出控件数据
this.HandleCallback(requestParams);
return;
}
base.Render(writer);
}
private void HandleCallback(string[] arParams)
{
try
{
//try render the HtmlTextWriter
StringWriter oStringWriter = new StringWriter();
HtmlTextWriter oWriter = new HtmlTextWriter(oStringWriter, string.Empty);
CallBackEventArgs oArgs = new CallBackEventArgs(oWriter);
oArgs.Parameter = arParams[0];
oArgs.Parameters = arParams;
this.OnCallback(oArgs);
oWriter.Close();
Context.Response.Clear();
Context.Response.Write(oStringWriter.ToString().Trim());
}
catch (Exception ex)
{
//render ther error
this.HandleCallbackError(ex);
}
try
{
Context.Response.End();
}
catch { }
}
[ControllerAction]
public void Add(string name) {
Task task = null;
if (String.IsNullOrEmpty(name) == false) {
task = _taskDB.AddTask(name);
}
if (IsAjaxRequest) {
if (task != null) {
RenderView("TaskView", task);
}
}
else {
if (task != null) {
RedirectToAction("List");
}
else {
Dictionary<string, object> viewData = new Dictionary<string, object>();
viewData["Tasks"] = _taskDB.GetTasks();
viewData["ShowAddTaskError"] = true;
RenderView("List", viewData);
}
}
}
RenderView会呈现控件的ui,(page,usercontrol都是控件).此代码我们可以看到如果用ajax模式，则会转到TaskView用户控件这里，其本质还是输出UserControl的数据，然后前端得到数据并呈现。但这种做法个人认为不好，每个Action都需要去写if else的语句。我想应该分离出来。
四。控件Id与Name
上次发的随笔篇幅太小，被刷了下来，希望这次没这么倒霉。但我还是希望大家看看修改服务器控件的ID和Name ，解决大家的痛，我们是有办法解决。最后阿门，愿MVC模式与控件同在，呵呵。我可不想 <% %> 横行霸道。
五.让数据绑定控件代码更漂亮
让我们来看个Repater控件的传统应用
<asp:Repeater ID="normalArticleList" runat="server">
<ItemTemplate>
<div class="textbox">
<div class="textbox-title">
<h4><a onclick="<%# urlFormats.ArticleConent(Convert.ToInt32(Eval("ArticleID").ToString()))%>" href="#"><span runat=server visible=<%# Eval("IsTop")%>>[置顶]</span><%# Eval("Title")%></a>
</h4>
<div class="textbox-label">
[
<%# Eval("PostTime")%>
| <%=lang["author"]%>: <a onclick="<%# urlFormats.UserDetail(int.Parse(Eval("AuthorID").ToString()))%>" href="#"><%# Eval("Author") %></a> ]</div>
</div>
<div class="textbox-content">
<%# GetContent(Eval("Content0").ToString(), Eval("Content1").ToString())%><%--<%# Eval("Content1") %>--%></div>
<div class="textbox-bottom">
<asp:PlaceHolder ID="actionLinkPanel" runat="server">
<a href="articleManage.aspx?act=edit&id=<%# Eval("ArticleID") %>" title="<%=lang["edit"]%>">
<img src="/styles/default/images/icon_edit.gif" alt="<%=lang["edit"]%>" />
</a>| <a href="/articleManage.aspx?act=delete&id=<%# Eval("ArticleID") %>" title="<%=lang["delete"]%>">
<img src="/styles/default/images/icon_del.gif" alt="<%=lang["delete"]%>" /></a> |
</asp:PlaceHolder>
<a onclick="<%# urlFormats.ArticleCategoryUrl(Convert.ToInt32(Eval("categoryID").ToString()))%>" href="#"><%=lang["category"]%>:<%# Eval("CategoryName")%></a> | <a href="?id=<%# Eval("ArticleID") %>"><%=lang["permalink"]%></a> | <a onclick="<%# urlFormats.ArticleConent(Convert.ToInt32(Eval("ArticleID").ToString()))%>" href="#commentbox" title="评论"><%=lang["comments"]%>:<%# Eval("CommentCount") %></a> | <a href="#"><%=lang["trackbacks"]%>:<%# Eval("TrackbackCount") %></a> | <%=lang["views"]%>:<%# Eval("ViewCount") %>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
很好的完成了工作，通过数据绑定语法。可这界面太烦，字段多，金黄色语法就更多，那个心里烦啊，我们还是无法逃避这个问题，而且我们偶尔还会对一些字段进行逻辑判断。我的做法：用Literal控件代替绑定语法，在ItemDataBound事件中完成数据的填充。现在前端
<asp:Repeater ID="normalArticleList" runat="server">
<ItemTemplate>
<div class="textbox">
<div class="textbox-title">
<asp:Literal ID="articleTitle" runat="server"></asp:Literal>
<div class="textbox-label">
<asp:Literal ID="articleLabel" runat="server"></asp:Literal>
</div>
</div>
<div class="textbox-content">
<asp:Literal ID="articleContent" runat="server"></asp:Literal>
</div>
<div class="textbox-bottom">
<asp:Literal ID="articleBottom" runat="server"></asp:Literal>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
后端
void normalArticleList_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Article item = (Article)e.Item.DataItem;
Literal title = (Literal)e.Item.FindControl("articleTitle");
Literal articleLabel = (Literal)e.Item.FindControl("articleLabel");
Literal articleContent = (Literal)e.Item.FindControl("articleContent");
Literal articleBottom = (Literal)e.Item.FindControl("articleBottom");
title.Text = RenderNormalTitle(item);
articleLabel.Text = RenderNormalLabel(item);
articleContent.Text = RenderNormalContent(item);
articleBottom.Text = RenderNormalBottom(item);
}
}
这样的写法会漂亮很多，而且数据绑定是通过反射机制的，听过会损失性能。。。
写了5点了，打住。不好意思，赖，没提供什么代码给大家下载，希望对大家有帮助。祝:元旦快乐，工作顺利。
一.纯数据输出
1.早在看ActionScript的时候便接触到了这种写法,直到ajax很火的时候,才知道这种格式叫json.
json数据格式是供前端javascript进行操作的暂时性的数据格式,由于javascript语言的原因,访问json数据非常方便,灵活.本来由后端负责产生Ui的,现在全部由javascript操作dom来产生.避免重复,请大家参考此文JSON简介,同时推荐看看IBM的掌握 Ajax系列.
为了产生json格式的数据,asp.net ajax框架提供了一个JavaScriptSerializer类用于将数据转换成json.
分析下此做法的优点与缺点
优点:
1.后台传输数据量会比较小,减轻服务器压力
2.前端操作非常灵活,可以做很多事情
3.适用于交互性比较强的应用.
缺点:
1.必须要操作dom才能产生ui,无法与美工配合工作,需要熟悉javascript和dom的人来参与
2.大数据量下,前端javascript对json数据的解析和dom的生成会明显减慢.
豪无疑问的,直接产生html比解析要速度来的快.这是一点,要是在后端直接输出html的话,可能会由于产生的字符串太多,直接拖垮IE,挂掉.
我想唯一的做法就是尽量避免大数据量,这便要看大家的创意了,还有就是输出json,然后对json分批操作解析,这样也会有所缓解.
3.灵活的同时,降低了通用性(我有一个需求,某一天我用ajax用到我不想用了,我想回到传统的网页上去,啊噢,这种开发模式做不到)
4.前端开发人员必须了解json数据格式
二.与Ui一起输出
这是我们一贯的做法,如asp.net ajax中的UpdatePanel,其会去后端请求其Panel中所有的UI,然后返回给前端,前端不需要解析,直接得到数据输出便可.
分析下此做法的优点与缺点
优点:
1.可以与美工配合,避免动态产生dom的错误
2.前端开发人员不再需要了解后端传回什么数据格式,直接输出
3.复用性比较强,可以同时满足ajax和传统网页的浏览模式
缺点:
1.大大降低了数据的交互性,前端有时候无法得到想要的对象,只能依赖于后端产生的html数据.
2.后端数据传输量稍微变大,不过影响不大.(相对而言,后端把对象解析成json格式需要时间,前端解析json数据也是需要时间的,主要的速度瓶颈还是在数据库连接访问这里)
三.选择你想要的开发模式
上面两种模式没有谁好谁不好之说,追求效率的人可能会选第一种,这种模式与语言无端,可以套用在php,jsp,asp,都可以.
第二种开发模式比较适合asp.net,为什么呢?因为asp.net本身便存在着控件这一用法,而且效率并不低.
大家可以先看看老赵这篇技巧：使用User Control做HTML生成
四.我的做法
1.我有一个白老鼠程序,自己写的blog程序,我会在其上面应用一些新技术,然后思考一些问题.
初期阶段,我用ajax去加载UserControl中产生的html,开始感觉很好.后来我又想做成传统的网页形式,去掉ajax的加载方式,所以,我需要这么写(很高兴,终于看到代码了)
<%@ Page ContentType="text/html" Language="C#" EnableViewState="true" MasterPageFile="~/Templete.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="NLBS._default" Title="无标题页" %>
<%@ Register Src="Control/content.ascx" TagName="content" TagPrefix="uc11" %><asp:Content ID="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1"><uc11:content ID="content" runat="server" /> </asp:Content>然后我做着做着...看到别人的blog有ajax应用,那个酷啊,而且我的虚拟主机便宜,访问数据速度慢.我又想把它换成ajax模式爽一把(我的天),或者说我想随意变换数据的加载模式.这种模式采用json数据格式的话根本无法满足需求,修改太大.怎么办怎么办?
由于本人偷偷的看了下ComponentArt的CallBack控件的源码(其实很早就看了),所以本人也仿照其做了一个自己的CallBack控件.我需要一个容器放content用户控件,然后再异步加载.现在现实的问题,这个页面便是content用户控件的容器.我们通过改变url参数来加载不同数据.(控件呈现是在Render方法中实现)
看下面代码.现在你可以访问诸如http://www.clingingboy.cn/default.aspx?singleArticle_param=true&ID=70 这样的url来获取content数据
protected override void Render(HtmlTextWriter writer) { //得到一个querystring参数 string[] requestParams = this.GetCallbackParameters(); if (requestParams != null && requestParams.Length > 0) {
//输出控件数据 this.HandleCallback(requestParams); return; } base.Render(writer); } private void HandleCallback(string[] arParams) { try { //try render the HtmlTextWriter StringWriter oStringWriter = new StringWriter(); HtmlTextWriter oWriter = new HtmlTextWriter(oStringWriter, string.Empty); CallBackEventArgs oArgs = new CallBackEventArgs(oWriter); oArgs.Parameter = arParams[0]; oArgs.Parameters = arParams; this.OnCallback(oArgs); oWriter.Close(); Context.Response.Clear(); Context.Response.Write(oStringWriter.ToString().Trim()); } catch (Exception ex) { //render ther error this.HandleCallbackError(ex); } try { Context.Response.End(); } catch { } }
小心:如果此时，你在本页面来请求content用户控件，呈现出来的会是2个content控件的ui.所以我们需要另建一个空白页面。使用此模式你不旦可以加载用户控件，同时也可以加载asp.net的内置控件。
2.ajax数据加载与传统url同在
我要访问一篇:博客园的一篇随笔,如http://www.cnblogs.com/JeffreyZhao/archive/2007/12/30/usercontrol_as_an_template.html，那在ajax模式下，我们不是要去掉此url,换成javascript的一个数据请求函数?我们可以用preventDefault()方法把链接给屏蔽掉，或者用stopPropagation()方法把事件给阻截下来.(上面两个方法都是firefox下的方法，ie也有此功能方法，asp.net ajax框架进行了封装)
三.ajax加载用户控件在MVC中的应用
相信有部分人已经在开始研究asp.net ajax了，请看此文Ajax with the ASP.NET MVC Framework。作者写了一个Script#，所以其前端javascript代码也是通过用其生成了。我们不管前端，我们只来谈加载方式。让我们看一个Control中的Add方法
[ControllerAction] public void Add(string name) { Task task = null; if (String.IsNullOrEmpty(name) == false) { task = _taskDB.AddTask(name); } if (IsAjaxRequest) { if (task != null) { RenderView("TaskView", task); } } else { if (task != null) { RedirectToAction("List"); } else { Dictionary<string, object> viewData = new Dictionary<string, object>(); viewData["Tasks"] = _taskDB.GetTasks(); viewData["ShowAddTaskError"] = true; RenderView("List", viewData); } } }RenderView会呈现控件的ui,(page,usercontrol都是控件).此代码我们可以看到如果用ajax模式，则会转到TaskView用户控件这里，其本质还是输出UserControl的数据，然后前端得到数据并呈现。但这种做法个人认为不好，每个Action都需要去写if else的语句。我想应该分离出来。
四。控件Id与Name
上次发的随笔篇幅太小，被刷了下来，希望这次没这么倒霉。但我还是希望大家看看修改服务器控件的ID和Name ，解决大家的痛，我们是有办法解决。最后阿门，愿MVC模式与控件同在，呵呵。我可不想 <% %> 横行霸道。
五.让数据绑定控件代码更漂亮
让我们来看个Repater控件的传统应用
<asp:Repeater ID="normalArticleList" runat="server"> <ItemTemplate> <div class="textbox"> <div class="textbox-title"> <h4><a onclick="<%# urlFormats.ArticleConent(Convert.ToInt32(Eval("ArticleID").ToString()))%>" href="#"><span runat=server visible=<%# Eval("IsTop")%>>[置顶]</span><%# Eval("Title")%></a> </h4> <div class="textbox-label"> [ <%# Eval("PostTime")%> | <%=lang["author"]%>: <a onclick="<%# urlFormats.UserDetail(int.Parse(Eval("AuthorID").ToString()))%>" href="#"><%# Eval("Author") %></a> ]</div> </div> <div class="textbox-content"> <%# GetContent(Eval("Content0").ToString(), Eval("Content1").ToString())%><%--<%# Eval("Content1") %>--%></div> <div class="textbox-bottom"> <asp:PlaceHolder ID="actionLinkPanel" runat="server"><a href="articleManage.aspx?act=edit&id=<%# Eval("ArticleID") %>" title="<%=lang["edit"]%>"> <img src="/styles/default/images/icon_edit.gif" alt="<%=lang["edit"]%>" /> </a>| <a href="/articleManage.aspx?act=delete&id=<%# Eval("ArticleID") %>" title="<%=lang["delete"]%>"> <img src="/styles/default/images/icon_del.gif" alt="<%=lang["delete"]%>" /></a> | </asp:PlaceHolder><a onclick="<%# urlFormats.ArticleCategoryUrl(Convert.ToInt32(Eval("categoryID").ToString()))%>" href="#"><%=lang["category"]%>:<%# Eval("CategoryName")%></a> | <a href="?id=<%# Eval("ArticleID") %>"><%=lang["permalink"]%></a> | <a onclick="<%# urlFormats.ArticleConent(Convert.ToInt32(Eval("ArticleID").ToString()))%>" href="#commentbox" title="评论"><%=lang["comments"]%>:<%# Eval("CommentCount") %></a> | <a href="#"><%=lang["trackbacks"]%>:<%# Eval("TrackbackCount") %></a> | <%=lang["views"]%>:<%# Eval("ViewCount") %> </div> </div> </ItemTemplate></asp:Repeater>很好的完成了工作，通过数据绑定语法。可这界面太烦，字段多，金黄色语法就更多，那个心里烦啊，我们还是无法逃避这个问题，而且我们偶尔还会对一些字段进行逻辑判断。我的做法：用Literal控件代替绑定语法，在ItemDataBound事件中完成数据的填充。现在前端
<asp:Repeater ID="normalArticleList" runat="server"><ItemTemplate><div class="textbox"> <div class="textbox-title"> <asp:Literal ID="articleTitle" runat="server"></asp:Literal> <div class="textbox-label"> <asp:Literal ID="articleLabel" runat="server"></asp:Literal> </div> </div> <div class="textbox-content"> <asp:Literal ID="articleContent" runat="server"></asp:Literal> </div> <div class="textbox-bottom"> <asp:Literal ID="articleBottom" runat="server"></asp:Literal> </div></div></ItemTemplate></asp:Repeater>后端
void normalArticleList_ItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { Article item = (Article)e.Item.DataItem; Literal title = (Literal)e.Item.FindControl("articleTitle"); Literal articleLabel = (Literal)e.Item.FindControl("articleLabel"); Literal articleContent = (Literal)e.Item.FindControl("articleContent"); Literal articleBottom = (Literal)e.Item.FindControl("articleBottom"); title.Text = RenderNormalTitle(item); articleLabel.Text = RenderNormalLabel(item); articleContent.Text = RenderNormalContent(item); articleBottom.Text = RenderNormalBottom(item); } }这样的写法会漂亮很多，而且数据绑定是通过反射机制的，听过会损失性能。。。
写了5点了，打住。不好意思，赖，没提供什么代码给大家下载，希望对大家有帮助。祝:元旦快乐，工作顺利。
