你好,游客 登录 注册 搜索
背景:
阅读新闻

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

[日期:2006-04-25] 来源:天极  作者:黎宇 [字体: ]
  下载本文源代码

  一、 导言

  我们知道,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)
表情: 表情 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 3 楼
* 匿名 发表于 2009-10-26 14:33:10
喀喀喀
第 2 楼
* shh 发表于 2006-5-10 22:38:02
没有数据库呀,,
第 1 楼
* shh 发表于 2006-5-9 11:05:40
没有数据库??? 我的邮箱[email protected]
热门评论
* shh 发表于 2006-5-10 22:38:02
没有数据库呀,,
* shh 发表于 2006-5-9 11:05:40
没有数据库??? 我的邮箱[email protected]
* 匿名 发表于 2009-10-26 14:33:10
喀喀喀