静态页中利用AJAX.NET实现无刷新页面
一、导言
我们知道，ASP.net应用程序事实是在服务器上运行的，用户的请求要不断地送往远程的服务器，服务器执行完本地的程序后把重新装载页面再发送客户端。所以就出现了不断刷新的问题，页面不断闪烁。用户不厌其烦，运行效率也大大4降低，服务器的负荷加重。事实，客户端的请求在某一时刻只是通过向Web服务器提交新的请求来检索对用户输入所做的响应。这种情况下，开发人员可以使用JavaScript在客户端上加载所有响应，从而提供更好的用户体验。遗憾的是，在很多情况下，不必将所有响应都返回或加载到JavaScript
要更好，只返回所要的结果，执行过程仍然在服务器上运行。AJAX提供了一种新的中间选择，能够在维持及时响应和灵活性的同时利用基于服务器的应用程序。AJAX依靠服务器作为中介来分发和处理请求。为了完成这项工作，.net封装类依赖于客户端的请求对象，而XMLHttpRequest对象被大部分的浏览器支持，因此使用这个对象是一个不错的解决方案。因此，为了实现不刷新的页面，我们的客户端页面做成静态页面。静态页面通过Ajax.net调用.net类的方法。这是一种最简洁又高效的解决方案。
二、如何应用Ajax.net1.在工程中引入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＞＜addverb=POST，GET path=ajax/*.ashxtype=Ajax.PageHandlerFactory，Ajax/＞＜/httpHandlers＞
(二)建立您的HTML页。
1.向工程里添加HTML页InfoClass.htm。该页面完成查询、常用工具及数据展现等能。
页面主要放了四个DIV，一个是树divTree。一个是查询区叫divFindTable的，一个是工具栏叫
divToolbar的，一个是数据区叫divDataGrid的。
2.在＜HEAD＞与＜/HEAD＞间加入一些引用如下：
＜script src=http://www.cnblogs.com/js/XML.js＞＜/script＞
＜link href=http://www.cnblogs.com/../CSS/myStyle.CSS type=text/CSSrel=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);vars=
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的所有数据并通过表格展现出来。
functionFind()
{
var Table=AjaxData.GetXMLFindTable(年级名称like%+txtName.value+%);
divDataGrid.innerHTML=Table.value;
}
查询方法Find()是通过Ajax的GetXMLFindTable方法按年级名称查询并把结果展现出来。
functionOpenAddWeb()
{
var RetID=OpenAddWin(InfoClass_edit.ASPx?IsAdd=true，370，300);if(RetID==-1)
return;InsertRow(DataGrid1，RetID);
}
OpenAddWeb方法打开InfoClass_edit.ASPx页在该页上完成增加数据的功能。
如果返回值不为-1则表示有新数据增加的并把数据插入到表格的最后一行。
RetID表示最后一行的ID.
functionOpenEditWeb(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是读取到物理表的数据并保存在内存中的数据表对象。我们的主要操作都是靠它完成。定义为静态的是我们不希望反复访问数据库。我们一次性读取，永久使用。
staticpublicDataTablemDt;
2.定义我们的主要方法。在每个方法的上行加上[Ajax.AjaxMethod()]。
//得到表TableName的所得数据，以XML字符串返回
[Ajax.AjaxMethod()]
public string GetTableOuterHTML(stringTableName)
{
DataTabledt=db.DB.GetDataTable(TableName);
mDt=dt;
return db.GetTableOuterHTML(dt.DefaultView);
}
GetTableOuterHTML方法是由物理表名读取到内存中并通过其视图得到以XML格式的Table。这里我们读取后保存在mDt中。用数据表的视图是我们的查询也通过该方法呈现数据。
//得到表TableName的所得数据，以XML字符串返回
[Ajax.AjaxMethod()]
public string GetXMLFindTable(stringRowFilter)
{
DataTableDt=mDt;DataViewdv=Dt.DefaultView;
dv.RowFilter=RowFilter;returndb.GetTableOuterHTML(dv);}
GetXMLFindTable是按查询条件从mDt中查询到数据并返回给客户端。
//删除行[Ajax.AjaxMethod()]publicbool
DeleteRow(stringTableName，intID)
{
stringSQL=deletefrom+TableName+whereID=+ID;boolisSuccess=db.DB.ExecuteSQL(SQL);
if(isSuccess)
{
DataRowdr=mDt.Select(ID=+ID)[0];
mDt.Rows.Remove(dr);}returnisSuccess;}
DeleteRow是删除物理表的一行，并在mDt中也同步地删除。
//把数据行转化为数组返回
[Ajax.AjaxMethod()]
public object GetDataRow(intiID)
{
DataRowdr=mDt.Select(ID=+iID)[0];
returndr.ItemArray;//数字类型不能为空
}
GetDataRow是从内存表mDt得到ID号为iID的一行，通过数组方式返回给客户端。
[Ajax.AjaxMethod()]
public string GetToolBarTable(stringTableName)
{
return db.GetToolBarTable(TableName);
}
GetToolBarTable是组织成工具栏的内容返回给客户端。
(四)建立业务数据类ttyuPKData。（见文件ttyuPKData.cs）命名空间为Ttyu，类名为ttyuPKData。
该类中有些常用的方法。
public bool InsertDataRow(Data Rowdr，int BeginColumnIndex)为向物理表中把数据行dr入，BeginColumnIndex表示从开始的列插入。
public bool UpdateDataRow(DataRowdr，intBeginColumnIndex，stringFilter)为向物理表中把数据行dr的数据更新，BeginColumnIndex表示开始更新的列。Filter表示所要更新的行。是一筛选条件。
publicstringGetTableOuterHTML(Data Viewdv)是个通用的把数据视图展现为Table的方法。并通过class定义样式。
//由一个数据视图得到该表的表头及所有数据，以XML格式的表字符串返回
public string GetTableOuterHTML(DataViewdv)
{
StringBuilder ret=new StringBuilder();
ret.Append(＜table class=DataGrid id=DataGrid1 cellspacing=1 cellpadding=4＞);
ret.Append(＜tr class=DataGridHeaderStyle＞);
ret.Append(＜tdwidth=5＞＜input type=checkboxonclick=SelectAll(this)＞＜/td＞);//标题
foreach(System.Data.DataColumndc 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(DataRowViewdrv in dv)
{
DataRow dr=drv.Row;//dv.Table.Rows[i];ret.Append(GetRowOuterHTML(dr));
}
ret.Append(＜/table＞);
returnret.ToString();
}
(五)建立页面数据编辑类（见文件PageEdit.cs）命名空间为Ttyu.Web，类名为PageEdit。该类是个通用的通过继承的技巧实现了所有编辑页(包括增加、修改数据)功能的统一处理。页中不需要一行代码。结论Ajax技术可以给客户端提供丰富的客户体验，而ajax.net为您容易的实现这样强大的功能提供了可能。静态页面是不出现刷新问题的。我们的静态页面通过Ajax完全可与ASP.net结合起来。通过.net进行后台的管理。前台通过JavaScript调用。这样完美的结合是解决问题的最佳方法。
我们知道，ASP.net应用程序事实是在服务器上运行的，用户的请求要不断地送往远程的服务器，服务器执行完本地的程序后把重新装载页面再发送客户端。所以就出现了不断刷新的问题，页面不断闪烁。用户不厌其烦，运行效率也大大4降低，服务器的负荷加重。事实，客户端的请求在某一时刻只是通过向Web服务器提交新的请求来检索对用户输入所做的响应。这种情况下，开发人员可以使用JavaScript在客户端上加载所有响应，从而提供更好的用户体验。遗憾的是，在很多情况下，不必将所有响应都返回或加载到JavaScript
要更好，只返回所要的结果，执行过程仍然在服务器上运行。AJAX提供了一种新的中间选择，能够在维持及时响应和灵活性的同时利用基于服务器的应用程序。AJAX依靠服务器作为中介来分发和处理请求。为了完成这项工作，.net封装类依赖于客户端的请求对象，而XMLHttpRequest对象被大部分的浏览器支持，因此使用这个对象是一个不错的解决方案。因此，为了实现不刷新的页面，我们的客户端页面做成静态页面。静态页面通过Ajax.net调用.net类的方法。这是一种最简洁又高效的解决方案。
二、如何应用Ajax.net1.在工程中引入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＞＜addverb=POST，GET path=ajax/*.ashxtype=Ajax.PageHandlerFactory，Ajax/＞＜/httpHandlers＞
(二)建立您的HTML页。
1.向工程里添加HTML页InfoClass.htm。该页面完成查询、常用工具及数据展现等能。
页面主要放了四个DIV，一个是树divTree。一个是查询区叫divFindTable的，一个是工具栏叫
divToolbar的，一个是数据区叫divDataGrid的。
2.在＜HEAD＞与＜/HEAD＞间加入一些引用如下：
＜script src=http://www.cnblogs.com/js/XML.js＞＜/script＞
＜link href=http://www.cnblogs.com/../CSS/myStyle.CSS type=text/CSSrel=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);vars=
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的所有数据并通过表格展现出来。
functionFind()
{
var Table=AjaxData.GetXMLFindTable(年级名称like%+txtName.value+%);
divDataGrid.innerHTML=Table.value;
}
查询方法Find()是通过Ajax的GetXMLFindTable方法按年级名称查询并把结果展现出来。
functionOpenAddWeb()
{
var RetID=OpenAddWin(InfoClass_edit.ASPx?IsAdd=true，370，300);if(RetID==-1)
return;InsertRow(DataGrid1，RetID);
}
OpenAddWeb方法打开InfoClass_edit.ASPx页在该页上完成增加数据的功能。
如果返回值不为-1则表示有新数据增加的并把数据插入到表格的最后一行。
RetID表示最后一行的ID.
functionOpenEditWeb(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是读取到物理表的数据并保存在内存中的数据表对象。我们的主要操作都是靠它完成。定义为静态的是我们不希望反复访问数据库。我们一次性读取，永久使用。
staticpublicDataTablemDt;
2.定义我们的主要方法。在每个方法的上行加上[Ajax.AjaxMethod()]。
//得到表TableName的所得数据，以XML字符串返回
[Ajax.AjaxMethod()]
public string GetTableOuterHTML(stringTableName)
{
DataTabledt=db.DB.GetDataTable(TableName);
mDt=dt;
return db.GetTableOuterHTML(dt.DefaultView);
}
GetTableOuterHTML方法是由物理表名读取到内存中并通过其视图得到以XML格式的Table。这里我们读取后保存在mDt中。用数据表的视图是我们的查询也通过该方法呈现数据。
//得到表TableName的所得数据，以XML字符串返回
[Ajax.AjaxMethod()]
public string GetXMLFindTable(stringRowFilter)
{
DataTableDt=mDt;DataViewdv=Dt.DefaultView;
dv.RowFilter=RowFilter;returndb.GetTableOuterHTML(dv);}
GetXMLFindTable是按查询条件从mDt中查询到数据并返回给客户端。
//删除行[Ajax.AjaxMethod()]publicbool
DeleteRow(stringTableName，intID)
{
stringSQL=deletefrom+TableName+whereID=+ID;boolisSuccess=db.DB.ExecuteSQL(SQL);
if(isSuccess)
{
DataRowdr=mDt.Select(ID=+ID)[0];
mDt.Rows.Remove(dr);}returnisSuccess;}
DeleteRow是删除物理表的一行，并在mDt中也同步地删除。
//把数据行转化为数组返回
[Ajax.AjaxMethod()]
public object GetDataRow(intiID)
{
DataRowdr=mDt.Select(ID=+iID)[0];
returndr.ItemArray;//数字类型不能为空
}
GetDataRow是从内存表mDt得到ID号为iID的一行，通过数组方式返回给客户端。
[Ajax.AjaxMethod()]
public string GetToolBarTable(stringTableName)
{
return db.GetToolBarTable(TableName);
}
GetToolBarTable是组织成工具栏的内容返回给客户端。
(四)建立业务数据类ttyuPKData。（见文件ttyuPKData.cs）命名空间为Ttyu，类名为ttyuPKData。
该类中有些常用的方法。
public bool InsertDataRow(Data Rowdr，int BeginColumnIndex)为向物理表中把数据行dr入，BeginColumnIndex表示从开始的列插入。
public bool UpdateDataRow(DataRowdr，intBeginColumnIndex，stringFilter)为向物理表中把数据行dr的数据更新，BeginColumnIndex表示开始更新的列。Filter表示所要更新的行。是一筛选条件。
publicstringGetTableOuterHTML(Data Viewdv)是个通用的把数据视图展现为Table的方法。并通过class定义样式。
//由一个数据视图得到该表的表头及所有数据，以XML格式的表字符串返回
public string GetTableOuterHTML(DataViewdv)
{
StringBuilder ret=new StringBuilder();
ret.Append(＜table class=DataGrid id=DataGrid1 cellspacing=1 cellpadding=4＞);
ret.Append(＜tr class=DataGridHeaderStyle＞);
ret.Append(＜tdwidth=5＞＜input type=checkboxonclick=SelectAll(this)＞＜/td＞);//标题
foreach(System.Data.DataColumndc 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(DataRowViewdrv in dv)
{
DataRow dr=drv.Row;//dv.Table.Rows[i];ret.Append(GetRowOuterHTML(dr));
}
ret.Append(＜/table＞);
returnret.ToString();
}
(五)建立页面数据编辑类（见文件PageEdit.cs）命名空间为Ttyu.Web，类名为PageEdit。该类是个通用的通过继承的技巧实现了所有编辑页(包括增加、修改数据)功能的统一处理。页中不需要一行代码。结论Ajax技术可以给客户端提供丰富的客户体验，而ajax.net为您容易的实现这样强大的功能提供了可能。静态页面是不出现刷新问题的。我们的静态页面通过Ajax完全可与ASP.net结合起来。通过.net进行后台的管理。前台通过JavaScript调用。这样完美的结合是解决问题的最佳方法。
