静态页中利用AJAX.NET实现无刷新页面

======================================================
注：本文源代码点此下载
======================================================

一、 导言

我们知道,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中加上。

·建立您的html页。

1. 向工程里添加html页infoclass.htm。该页面完成查询、常用工具及数据展现等功能。

页面主要放了四个div,一个是树" divtree "。一个是查询区叫"divfindtable"的,一个是工具栏叫

"divtoolbar"的,一个是数据区叫"divdatagrid"的。如下图:

2. 在 与间加入一些引用如下:

说明: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("" );

ret.append("

");

ret.append("

");

//标题

foreach(system.data.datacolumn dc in dv.table.columns )

{

if(dc.ordinal==0) //该列隐藏

ret.append("

"+dc.columnname+"");

else

ret.append("

"+dc.columnname+"");

}

ret.append("");

//这时是视图中筛选后的数据

foreach(datarowview drv in dv)

{

datarow dr=drv.row;//dv.table.rows[i];

ret.append(getrowouterhtml(dr));

}

ret.append("");

return ret.tostring ();

}

·建立页面数据编辑类(见文件pageedit.cs)命名空间为ttyu.web,类名为pageedit。

该类是个通用的通过继承的技巧实现了所有编辑页(包括增加、修改数据)功能的统一处理。页中不需要一行代码。

结论

ajax技术可以给客户端提供丰富的客户体验,而ajax.net为您容易的实现这样强大的功能提供了可能。静态页面是不出现刷新问题的。我们的静态页面通过ajax完全可与asp.net结合起来。通过.net进行后台的管理。前台通过javascript调用。这样完美的结合是解决问题的最佳方法。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/