Ajax简介:
Ajax的全称是:AsynchronousJavaScript + XML,严格的说Ajax不是一项新技术,它实际上是结合了Web语言与DHTML、XML的交叉,它包括:XHTML和CSS,使用文档对象模型(DocumentObjectModel)作动态显示和交互,使用XML和XSLT做数据交互和操作,使用XML HttpRequest进行异步数据接收,使用JavaScript将它们绑定在一起。
Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样,Web页面不用打断交互流程进行重新加载,就可以动态地更新。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
Ajax应用软件与主机服务器进行联系是使用新的异步方式。如果使用旧模式,每当用户执行某种操作、向服务器请求获得新数据,Web浏览器就会刷新当前窗口。如果使用Ajax的异步模式,浏览器就不必等用户请求操作,也不必更新整个窗口就可以显示新获取的数据。只要来回传送采用XML格式的数据,在浏览器里面运行的JavaScript代码就可以与服务器进行联系。JavaScript代码还可以把样式表加到检索到的数据上,然后在现有网页的某个部分加以显示。在诸多Ajax应用当中,Google的Gmail和GoogleMaps就是最常见和最著名的例子。在Gmail当中,Ajax负责如何开启线程会话,以显示不同邮件的文本内容。而在Maps当中,Ajax允许用户以一种似乎无缝的方式拖拉及滚动地图。
Ajax在.Net中的应用:
要在.Net中使用Ajax技术,必须下载引入一个dll:AjaxPro.dll。AjaxPro作为Ajax技术在.Net框架下的实现,作者Michael Schwarz采取了一种封装效果相当棒的技术:将客户端处理XML、事件调用方式都封装在2个Javascript文件中(AjaxPro.prototype.js 和AjaxPro.core.js),同时将这2个重要文件以资源的形式编译于dll中,在处理客户端请求其自定义的.ashx文件时,返回这两个文件。所以我们在使用AjaxPro时需要在Web.config中添加如下httpHandlers以AjaxPro.AjaxHandlerFactory来处理.ashx文件:
在<system.web>与</system.web>之间插入以下代码
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
</httpHandlers>
接下来需要在服务器端添加AjaxPro要处理的方法,假如我们要做登陆画面的用户名和密码的验证,那么首先我们在后台类中添加对用户名密码的验证处理代码,为了能让前台的JavaScript识别这个后台方法,还要给这个方法加入需要的AjaxPro处理。
[AjaxPro.AjaxMethod] //AjaxPro处理 public bool CheckIDPasswd (string strUserID,string strPasswd) { try { …//验证处理 } catch(Exception ex) { //异常处理 return false; } return true; } |
接下来还需要在Page_Load中注册此类
private void Page_Load(object sender, System.EventArgs e) { AjaxPro.Utility.RegisterTypeForAjax(typeof(LoginForm)); } |
然后就可以在客户端用JavaScript调用该方法进行登陆验证,客户端JavaScript方法:
function frmLogin_Check() { var bFlg = HDMS.BLL.LoginCheck.CheckIDPasswd(vUserID,vPasswd) if(bFlg.value) { //验证通过,可以登陆业务系统 }else { //验证不通过,返回登陆窗口 } } |
这里的HDMS.BLL.LoginCheck就是后台类的全名了(包括命名空间),这样一个简单的客户端调用后台类实现画面无刷新的提交或者获取数据的应用就完成了,但是这个应用是基于aspx文件之上的,接下来我们继续深入思考,静态Html画面文件是否可以实现Ajax。
AjaxPro应用在静态html画面文件中
如果Asp.net中没有aspx文件要如何实现呢?aspx文件似乎是asp.net的核心所在,一个runat=server为我们做了太多的事情,丢掉runat=server我们似乎有点不知所措,但是我们一定可以猜测出aspx文件执行完其实还是转换成了html文件,转换完成的html文件里面一定隐藏着什么秘密,很自然的我们想到可以查看一下完成的html源文件。启动程序,运行打开查看网页源文件,很简单的就发现了这一段秘密:
<script type="text/javascript" src="/HDMS/ajaxpro/prototype.ashx"></script> <script type="text/javascript" src="/HDMS/ajaxpro/core.ashx"></script> <script type="text/javascript" src="/HDMS/ajaxpro/converter.ashx"></script> <script type="text/javascript" src="/HDMS/ajaxpro/HDMS.BLL.LoginCheck,HDMS.ashx"></script> |
简单分析发现,这段代码的最后一行就是对我们完成的后台类的引用。删掉aspx文件,增加一个html文件,添加必要的控件和按钮,将上面4行代码拷贝到html中,LoginCheck类的调用方式同aspx中一致,启动程序,输入正确的用户名密码,验证通过,输入错误的密码,验证失败,用html调用后台类成功。
Ajax 在 asp.net 中的基本应用就是这么简单,但是要做出像 Google 地图一样的复杂应用是困难和繁琐的,同时本文也提供了一种 html 直接调用后台类的方法和思路。