| 摘要：做到无刷新获取数据,这样的页面确实能给用户很好的体验. | |||||||||||
|
最近听说了Ajax技术，了解到其能够做到不刷新页面获取数据的效果。这让我想起了去年刚工作时，本人接到的第一个任务就是研究如何无刷新页面获取数据，当时游荡CSDN，也只是接触了点皮毛，用xmlhttp实现了简单效果。 如今看到了博客园上teddy的文章，便想进行更深入的研究。我于是下载了teddy发布的AjaxHelper0.7版本，按照其范例进行了实践。 AjaxHelper有.NET和Flat两种版本，前者只能用于Asp.Net,Flat版本可以用于任何Web开发环境。DotNet版本必须用UserControl来返回回调的内容显示，可以使用ASP.Net内置的各种Web控件和数据绑定机制；Flat版则直接用网页来返回回调的内容显示，当然也可以使用特定语言的任意的数据显示和绑定能力。 因为我的项目开发都是用ASP.NET的，所以我选择的是AjaxHelper DotNET版本。其实其里面的核心内容还是js文件夹里的AjaxHelper.js和Form.js两个文件，我并没有使用其dll组件。 这个版本在AjaxHelper.js文件内声名了var AjaxProxyUrl = new String(\'Ajax.aspx\');因此Ajax.aspx页面是一定要有的，这个页面是起一个表单的代理作用，其内只有一个 这个用户控件就是ascx后缀的页面文件，我将其放在ctrl目录下，如CommDataList.ascx。 在CommDataList.ascx上只需放一个Label，其后台代码中实现根据传入的QueryString，访问数据库获得数据，然后将数据以字符串的形式赋给Lable的Text属性，这样CommDataList.ascx页面上就有了想要展现给前台的HTML数据了。 使整个页面跑起来的主要靠Javascript，并不需要再在页面后台写程序。 在需要调用AjaxHelper的页面，链接入那两个js文件——
一定要往该页面的body标签写onload事件——<body onload="AjaxHelper.OnPageLoad()"> 还要在页面添加展现数据的控件—— 一般ASP.NET下都是用Panel。 然后就是在按钮的事件，让其调用Ajax的方法—— AjaxHelper.Updater2(ajaxTemplate, output, params, onComplete)注：
因此，我在按钮的onClick事件上（前提是该按钮是没有Runat=Server的button），添加这样的方法
checkInput()是用js写的检查用户输入是否有效的验证方法，返回True或False。 经过实践，当要载入大量的数据时，页面可以做到不刷新，只有Panel控件所在的区域出现变化，如 Ajax因为主要是用JavaScript实现的，所以只要是分布式应用开发都可以采用，Flat版本，适用于CGI，ASP，JSP，PHP等各种版本，只是在Flat版本中的ajaxTemplate参数必须是完整的网页路径，包括扩展名，然后就能将该引用页面获取的数据展现到想要展示的页面上。 ASP可参看本站的演示——>http://waykysoft.com/testajax.asp 下载AJaxHelper的链接为：
| |||||||||||
|
此日志共有( 3 )个评论 |
相关文章：