采用浏览器端操作减小服务器负担——数据批量录入一次提交

原创 2006年06月22日 19:06:00
 

作者:顾庆岗 prettywolf@vip.sina.com

    在ASP.NET应用程序中,服务器端控件给我们的开发工作带来很多便利,但是其代价就是增加了服务器处理的负担,频繁的提交大大增加了网络资源的使用和服务器资源的使用。本文介绍使用JavaScript等手段增加浏览器端处理能力来提高应用程序性能,对于状态要求不高的数据处理这是个不错的选择。在下面我们通过一个实例来了解这一方法的使用。

    假设有着用这样一个需求:登记若干人员的信息(为简单起见,实例中只使用姓名和年龄)。如果使用服务端处理的方法那么在输入时针对每一个人员信息都要进行一次提交,即使改进操作每次生成指定数量的人员信息表单操作仍然不十分方便。那么使用浏览器端处理的方式会有什么效果呢?请看下图:


点击
[添加人员信息]按钮,生成一组“姓名”、“年龄”输入表单,再点击可在生成若干组。每一组可以单独删除。点击[提交]按钮时将上面添加的所有人员信息通过一次提交全部提交到服务器,整个录入过程流畅无界面提交时的闪烁,对用户体验也有较好的提升。

       这一功能的实现其实很简单,请看下面的代码:

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ScriptForm.WebForm1" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

       <HEAD>

              <title>WebForm1</title>

              <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">

              <meta content="C#" name="CODE_LANGUAGE">

              <meta content="JavaScript" name="vs_defaultClientScript">

              <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">

              <script language="javascript">

              var index = 0;

              var count = 0;

              function AddForm()

              {

                     document.all.FormList.insertAdjacentHTML("beforeEnd", CreateForm(index));

                     count += 1;

                     index += 1;

                     document.all.txtCount.value = index;

              }

             

              function CreateForm(id)

              {

                     var code = "<TABLE id=/"Table_"+id+"/" cellSpacing=/"1/" cellPadding=/"1/"  border=/"0/">";

                     code += "<TR><TD>姓名:</TD><TD><INPUT id=/"txtName"+id+"/" type=/"text/" name=/"txtName"+id+"/"></TD><TD><INPUT id=/"btnDelete_"+id+"/" name=/"btnDelete_"+id+"/" onclick=/"RemoveForm(this.parentElement.parentElement.parentElement);/" type=/"button/" value=/"删除/"></TD></TR>";

                     code += "<TR><TD>年龄:</TD><TD><INPUT id=/"txtAge"+id+"/" type=/"text/" name=/"txtAge"+id+"/"></TD><TD></TD></TR>";

                     code += "</TABLE>";

                     return code;

              }

             

              function RemoveForm(id)

              {

                     id.removeNode();

                     count -= 1;

              }

              </script>

       </HEAD>

       <body>

              <form id="Form1" method="post" runat="server">

                     <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="100%" border="1">

                            <TR>

                                   <TD><INPUT onclick="AddForm();" type="button" value="添加人员信息"></TD>

                            </TR>

                            <TR>

                                   <TD id="FormList"></TD>

                            </TR>

                            <TR>

                                   <TD align="center">

                                          <asp:Button id="btn" runat="server" Text="提交"></asp:Button></TD>

                            </TR>

                     </TABLE>

                     <INPUT id="txtCount" type="hidden" name="txtCount">

              </form>

       </body>

</HTML>

这段代码的设计时界面为:


其工作原理是在点击
[添加人员信息]按钮(HTML控件)时,使用JavaScript将表单的HTML代码(上文蓝色字体)写入指定位置,并指定“INPUT”控件的ID,控件的ID使用字符串头加数字后缀的方式使对控件的检索更加简单。

       function AddForm()”和“function RemoveForm(id)”分别响应[添加人员信息][删除]按钮的点击事件,实现表单的添加和删除。

       每增加一个人员信息表单,“index”和“count”的值增加“1,删除一个表单“count”的值减“1。“index”的值放在了ID为“txtCount”的隐藏域中为的是在服务器端可以获取。

       好了浏览器端的代码写完了,如何在服务器端获得录入的数据呢?请看下面的代码:

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

 

namespace ScriptForm

{

     /// <summary>

     /// WebForm1 的摘要说明。

     /// </summary>

     public class WebForm1 : System.Web.UI.Page

     {

         protected System.Web.UI.WebControls.Button btn;

    

         private void Page_Load(object sender, System.EventArgs e)

         {

              // 在此处放置用户代码以初始化页面

         }

 

         #region Web 窗体设计器生成的代码

         override protected void OnInit(EventArgs e)

         {

              //

              // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。

              //

              InitializeComponent();

              base.OnInit(e);

         }

        

         /// <summary>

         /// 设计器支持所需的方法 - 不要使用代码编辑器修改

         /// 此方法的内容。

         /// </summary>

         private void InitializeComponent()

         {   

              this.btn.Click += new System.EventHandler(this.btn_Click);

              this.Load += new System.EventHandler(this.Page_Load);

 

         }

         #endregion

 

         private void btn_Click(object sender, System.EventArgs e)

         {

              int count = 0;

              if(Request.Params["txtCount"] != null)

                   count = Convert.ToInt32(Request.Params["txtCount"]);

              string strName = "";

              string strAge = "";

              for(int i=0;i<=count;i++)

              {

                   if(Request.Params["txtName"+i] != null)

                   {

                       strName = Request.Params["txtName"+i].ToString();

                   }

                   if(Request.Params["txtAge"+i] != null)

                   {

                       strAge = Request.Params["txtAge"+i].ToString();

                   }

                  //

                   // 对人员信息进行操作,如提交到数据库。

                   //

              }

         }

     }

}

操作是不是似曾相识?和ASP差不多,使用Request获取Form中的数据域中的数据,然后怎么处理就看你的实际需要了。

ASP.NET应用程序中,服务器端控件给我们的开发工作带来很多便利,但是其代价就是增加了服务器处理的负担,频繁的提交大大增加了网络资源的使用和服务器资源的使用。本文介绍使用JavaScript等手段增加浏览器端处理能力来提高应用程序性能,对于状态要求不高的数据处理这是个不错的选择。

Oracle逐行提交、批量提交及极限提速方法

在Oracle数据库中,不是提交越频繁越好。恰恰相反,批量提交可以得到更好的性能。这篇文章给大家简单展示一下在Oracle数据库中逐行提交于批量提交两者之间的性能差别。最后再给出一种可以极大改变性能的...
  • Baple
  • Baple
  • 2015年01月22日 09:25
  • 13929

解决部分浏览器ajax提交数据,数据已改变,却后台数据接收数据还是上一次值的问题

最近在工作中遇到了QQ浏览器ajax提交数据,表单数据改变,却后台数据接收数据还是上一次值的问题,但是在其它浏览器中是正常的。 代码如下: $.ajax({ url : "/secretkey/...
  • Mr_Smile2014
  • Mr_Smile2014
  • 2015年12月02日 15:15
  • 3686

hibernate的update及JDBC数据库批量操作

Session.update()和Query.update()的区别最本质的区别是Session.update()更新的实体。而Query.update()更新的是执行SQL语句。 由此会带来一些问...
  • u011518120
  • u011518120
  • 2017年03月31日 15:19
  • 416

向服务器请求数据的五种技术

转载自:http://www.cnblogs.com/aaronjs/archive/2012/06/30/2570810.html  Ajax,在它最基本的层面,是一种与服务器通讯而不重载...
  • u012377333
  • u012377333
  • 2016年07月05日 19:20
  • 7700

网页实现批量数据导入功能

场景我有一批平铺数据放在txt文件,其量大概在10W条,接下来我们希望将这10W条记录进行切割获取,并且将单条数据分析校验,然后插入到DB中。前提是我们使用的是HTTP文件上传方式来导入数据。现在的问...
  • danhuang2012
  • danhuang2012
  • 2014年09月12日 09:31
  • 3368

Apache启用mod_expires模块 减小服务器负担

转自【B5教程网】:http://www.bcty365.com/content-122-5285-1.html mod_expires可以减少10%左右的重复请求,让重复的用户对指定的页面请求...
  • qq1355541448
  • qq1355541448
  • 2016年11月24日 13:34
  • 137

java中对于大量数据采用批量处理来提高效率

设计的话, 是在dao层写批量新增的方法,以及实现类dao的实现类, 在service调用这个dao就可以了!   不过最终走的还是单个只不过是集合的遍历, 所以不用再mapper.xml里面配置方法...
  • wanghang88
  • wanghang88
  • 2016年08月26日 15:07
  • 7119

jsp页面foreach循环,表单提交,批量处理数据,

jsp页面 jsp页面: name: age: jsp页面转换成html的源码: name...
  • u011202334
  • u011202334
  • 2015年08月14日 09:24
  • 4983

【EasyUi DataGrid】批量修改提交

在实际操作中,批量修改的例子有很多,最常用的一种便是“假批量修改”,即修改一行后,当点击其它行时就把这行修改后的数据提交,拥有保存功能的“保存”按钮,说到底就是为我们修改的最后一行准备的(例如:Nav...
  • chenyanmoting
  • chenyanmoting
  • 2015年07月31日 15:05
  • 3269

Node.js模拟浏览器文件上传

转自http://blog.csdn.net/jimmyvip/article/details/22084471 [javascript] view plaincopy ...
  • Ymiku
  • Ymiku
  • 2015年05月29日 23:57
  • 396
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:采用浏览器端操作减小服务器负担——数据批量录入一次提交
举报原因:
原因补充:

(最多只允许输入30个字)