战剑网络,网站建设,系统开发,程序设计

搜索Top
静态页中利用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中加上。

<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为类名。

[ 打印本页 ] [ 收藏本页 ]

[上一篇]:对Gmail中使用AJAX技术的研究
[下一篇]:剖析AJAX成为“时尚”的十大主要理由
Tags:AJAX.NET
 ·剖析AJAX成为“时尚”的十大主要理由
 ·精华:AJAX开发简略(第一部分)
 ·如何使用Ajax技术开发Web应用程序
 ·AJAX实例:根据邮编自动完成地址信息
 ·Ajax并不神秘:揭下各种Ajax控件和类库的小裤衩

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
搜索Top

关于我们 - 联系我们 - 广告业务 - 友情链接 - 网站制作 - 留言板 - 会员注册
All Right Zjm.Net.Cn (zjm Enterprise v3.0)
联系电话:0576-8603312 地址:浙江省台州市经济开发区
技术支持:点击这里给我发消息280610248 业务: 点击这里给我发消息40520767 客服: 点击这里给我发消息441758646
E-mail:zjm@zjm.net.cn 备案证书号:浙ICP备06030047号