一、 导言 我们知道,ASP.net应用程序事实是在服务器上运行的,用户的请求要不断地送往远程的服务器,服务器执行完本地的程序后把重新装载页面再发送客户端。所以就出现了不断刷新的问题,页面不断闪烁。用户不厌其烦,运行效率也大大4降低,服务器的负荷加重。事实,客户端的请求在某一时刻只是通过向 Web 服务器提交新的请求来检索对用户输入所做的响应。这种情况下,开发人员可以使用 JavaScript 在客户端上加载所有响应,从而提供更好的用户体验。遗憾的是,在很多情况下,不必将所有响应都返回或加载到 JavaScript 要更好,只返回所要的结果,执行过程仍然在服务器上运行。AJAX 提供了一种新的中间选择,能够在维持及时响应和灵活性的同时利用基于服务器的应用程序。 AJAX依靠服务器作为中介来分发和处理请求。为了完成这项工作,.net封装类依赖于客户端的请求对象,而XMLHttpRequest对象被大部分的浏览器支持,因此使用这个对象是一个不错的解决方案。 因此,为了实现不刷新的页面,我们的客户端页面做成静态页面。静态页面通过Ajax.net调用.net类的方法。这是一种最简洁又高效的解决方案。 二、 如何应用Ajax.net 1.在工程中引入Ajax.dll文件。 Ajax.dll是微软开发的应用在ASP.net上的一个类库文件。该类库封装了XMLHttpRequest请求服务器的实现细节,是Ajax知识应用在ASP.net平台上的解决技术。在.net项目中,添加上对其的引用,然后就可以开始使用ajax.dll封装进行开发了。 2.在web.config中设置HttpHandle 为了使其可以工作,第一步必须做的是在web.config中安装设置封装包的HttpHandle,不去详细解释HttpHandle是如何工作的,我们只需要了解他们可以用来处理ASP.net请求。例如,所有的目的为*.ASPx的请求可以通过System.Web.UI.PageHandlerFactory类发送到控制句柄,简单的说,我们把任何向ajax/*.ashx的请求发送到Ajax.PageHandlerFactory的请求处理句柄。 3.编写服务端函数 现在我们编写服务器端函数,他们可以被客户端异步的调用。尽管现在还不能支持全部的返回类型,我们仍坚持服务器端添加功能。在codebehind文件的页面类里,添加下面的方法: [Ajax.AjaxMethod()] public int ServerSideAdd(int firstNumber, int secondNumber) { return firstNumber + secondNumber; } 注意,这个函数有Ajax.AjaxMethod()定制属性,属性服务会告知ajax封装类为此方法创建一个JavaScript代理,这样才能被客户端调用。 三、 应用实例(点击下载源码) 我们的应用程序主要是对数据库的操作,数据库的数据通过页面的表格呈现,页面完成增加、删除、更新、查询等功能。更主要的是它是一个通用的并且实现方法极为巧妙的例子。任何页面没有刷新现象并且代码十分精巧。下面的就通过Ajax技术实现这些功能。 ·建立工程HttpForAjax,并在您的工程中引入Ajax.dll文件。 ·在您的Web.config中加上。 <httpHandlers> <add verb=POST,GET path=ajax/*.ashx type=Ajax.PageHandlerFactory, Ajax/> </httpHandlers> ·建立您的HTML页。 1. 向工程里添加HTML页InfoClass.htm。该页面完成查询、常用工具及数据展现等功能。 页面主要放了四个DIV,一个是树 divTree 。一个是查询区叫divFindTable的,一个是工具栏叫 divToolbar的,一个是数据区叫divDataGrid的。如下图: 2. 在 <HEAD>与</HEAD>间加入一些引用如下: <script src=../../js/XML.js></script> <link href=../../CSS/myStyle.CSS type=text/CSS rel=stylesheet> <script src=/HttpForAjax/ajax/common.ashx type=text/JavaScript></script> <script src=/HttpForAjax/ajax/Ttyu.AjaxData,HttpForAjax.ashx type=text/JavaScript></script> 说明:XML.js是用JavaScript写的一些客户端程序。 myStyle.CSS为样式风格文件。 common.ashx为调用Ajax的公用方法。 HttpForAjax.ashx为下面我们要用Ajax编写的类的引用。其中HttpForAjax为工程的命名空间。 Ttyu.AjaxData为自己开发的类,其中Ttyu为命名空间,AjaxData为类名。 3. 用JavaScript编写脚本方法, function Init() { DomTree=new dHTMLXTreeObject(document.getElementById(divTree),100%,100%,0); DomTree.setImagePath(imgs/); DomTree.enableDragAndDrop(true) DomTree.setDragHandler(myDragHandler); DomTree.setOnClickHandler(SelectTreeNode); var s= AjaxData.GetXMLTree().value; DomTree.loadXMLString(s); DomTree.openItem(R_1); SelectTreeNode(R_1); divToolbar.innerHTML=AjaxData.GetToolBarTable(TableName).value; divDataGrid.innerHTML=GetTableOuterHTML(TableName); } Init方法通过Ajax的GetXMLTree方法得到树的内容,GetToolBarTable取得工具栏的内容。通过GetTableOuterHTML方法取得物理表tInfoClass的所有数据并通过表格展现出来。 function Find() { var Table=AjaxData.GetXMLFindTable(年级名称 like %+txtName.value +%); divDataGrid.innerHTML=Table.value; } 查询方法Find()是通过Ajax的GetXMLFindTable方法按年级名称查询并把结果展现出来。 function OpenAddWeb() { var RetID =OpenAddWin(InfoClass_edit.ASPx?IsAdd=true,370,300); if(RetID==-1) return; InsertRow(DataGrid1,RetID); } OpenAddWeb方法打开InfoClass_edit.ASPx页在该页上完成增加数据的功能。如果返回值不为-1则表示有新数据增加的并把数据插入到表格的最后一行。RetID表示最后一行的ID. function OpenEditWeb(ThisCell) { var ID=ThisCell.previousSibling.previousSibling.innerText; var RetID =OpenAddWin(InfoClass_edit.ASPx?ID=+ID+&IsAdd=false,370,300); if(RetID==-1) return; //有更新行 var CurrRow=ThisCell.parentElement SetRowText(CurrRow); // SetRowText(CurrRow,RetDataRow); } OpenEditWeb方法是当用户点击的单元格后打开InfoClass_edit.ASPx页在该页上完成编辑该行数据的功能。如有更新行则把当前行的内容更换.. ·建立Ajax类。(见文件AjaxData.cs)命名空间为Ttyu,类名为AjaxData。 1. 定义静态变量mDt。mDt是读取到物理表的数据并保存在内存中的数据表对象。我们的主要操作都是靠它完成。定义为静态的是我们不希望反复访问数据库。我们一次性读取,永久使用。 static public DataTable mDt; 2.定义我们的主要方法。在每个方法的上行加上[Ajax.AjaxMethod()]。 //得到表TableName的所得数据,以XML字符串返回 [Ajax.AjaxMethod()] public string GetTableOuterHTML(string TableName) { DataTable dt=db.DB.GetDataTable(TableName); mDt=dt; return db.GetTableOuterHTML(dt.DefaultView); } GetTableOuterHTML方法是由物理表名读取到内存中并通过其视图得到以XML格式的Table。这里我们读取后保存在mDt中。用数据表的视图是我们的查询也通过该方法呈现数据。 //得到表TableName的所得数据,以XML字符串返回 [Ajax.AjaxMethod()] public string GetXMLFindTable(string RowFilter) { DataTable Dt=mDt; DataView dv=Dt.DefaultView; dv.RowFilter=RowFilter; return db.GetTableOuterHTML(dv); } GetXMLFindTable是按查询条件从mDt中查询到数据并返回给客户端。 //删除行 [Ajax.AjaxMethod()] public bool DeleteRow(string TableName,int ID) { string SQL = delete from + TableName + where ID= + ID; bool isSuccess= db.DB.ExecuteSQL(SQL); if(isSuccess) { DataRow dr=mDt.Select(ID=+ID)[0]; mDt.Rows.Remove(dr); } return isSuccess; } DeleteRow是删除物理表的一行,并在mDt中也同步地删除。 //把数据行转化为数组返回 [Ajax.AjaxMethod()] public object GetDataRow(int iID) { DataRow dr=mDt.Select(ID=+iID)[0]; return dr.ItemArray;//数字类型不能为空 } GetDataRow是从内存表mDt得到ID号为iID的一行,通过数组方式返回给客户端。 [Ajax.AjaxMethod()] public string GetToolBarTable(string TableName) { return db.GetToolBarTable(TableName); } GetToolBarTable是组织成工具栏的内容返回给客户端。 ·建立业务数据类ttyuPKData。(见文件ttyuPKData.cs)命名空间为Ttyu,类名为ttyuPKData。 该类中有些常用的方法。 public bool InsertDataRow(DataRow dr,int BeginColumnIndex)为向物理表中把数据行dr插入,BeginColumnIndex表示从开始的列插入。 public bool UpdateDataRow(DataRow dr,int BeginColumnIndex,string Filter) 为向物理表中把数据行dr的数据更新,BeginColumnIndex表示开始更新的列。Filter表示所要更新的行。是一筛选条件。 public string GetTableOuterHTML(DataView dv)是个通用的把数据视图展现为Table的方法。并通过class定义样式。 //由一个数据视图得到该表的表头及所有数据,以XML格式的表字符串返回 public string GetTableOuterHTML(DataView dv) { StringBuilder ret = new StringBuilder(); ret.Append(<table class=DataGrid id=DataGrid1 cellspacing=1 cellpadding=4> ); ret.Append(<tr class=DataGridHeaderStyle>); ret.Append(<td width=5> <input type=checkbox οnclick=SelectAll(this)></td> ); //标题 foreach(System.Data.DataColumn dc in dv.Table.Columns ) { if(dc.Ordinal==0) //该列隐藏 ret.Append(<td class=IDColumn>+dc.ColumnName+</td>); else ret.Append(<td>+dc.ColumnName+</td>); } ret.Append(</tr>); //这时是视图中筛选后的数据 foreach(DataRowView drv in dv) { DataRow dr=drv.Row;//dv.Table.Rows[i]; ret.Append(GetRowOuterHTML(dr)); } ret.Append(</table>); return ret.ToString (); } ·建立页面数据编辑类(见文件PageEdit.cs)命名空间为Ttyu.Web,类名为PageEdit。 该类是个通用的通过继承的技巧实现了所有编辑页(包括增加、修改数据)功能的统一处理。页中不需要一行代码。 结论 Ajax技术可以给客户端提供丰富的客户体验,而ajax.net为您容易的实现这样强大的功能提供了可能。静态页面是不出现刷新问题的。我们的静态页面通过Ajax完全可与ASP.net结合起来。通过.net进行后台的管理。前台通过JavaScript调用。这样完美的结合是解决问题的最佳方法。
静态页中利用AJAX.NET实现无刷新页面(二)
最新推荐文章于 2024-09-22 11:17:00 发布