Teddy's Knowledge Base

AjaxHelper使用范例

前两天发布了一个《.Net环境下基于Ajax的MVC方案》,没想到被转载到CSDN首页了,呵呵~
不过,有好几个朋友调试那段代码出错,我也不知什么原因,因为我在好几台机器都运行正常的,这里我再提供几个基于前文所述方案的范例程序,有什么问题请留言!

AjaxHelperExample下载地址

使用说明:

下载的压缩包内包含一个目录AjaxHelperExample和一个RAR文件AjaxHelper.rar

如果你只是想看看运行效果,可以为AjaxHelperExample目录设置一个虚拟目录。然后访问
http://localhost/AjaxHelperExample/Default.aspx


AjaxHelper.rar内是对AjaxHelper类库的打包,如果您想在您自己的项目中使用AjaxHelper的话,只需将AjaxHelper.rar内的所有文件和目录复制到你自己的工程的目录即可,详细的调用方法可以参照AjaxHelperExample下的Default.aspx。

另外说明一下,这次的AjaxHelper的js代码相对前文做了点小修改,原来Updater和SerializeForm是两个公共函数,现在封装到AjaxHelper类里了,所以调用方式为
<script type="text/javascript">AjaxHelper.Updater(...)</script>

下载的代码中包含三个范例:

1、无刷新更新下拉列表框数据
2、无刷新更新DataGrid数据
3、清除前面的内容,显示Default.aspx源码

Enjoy!

//文章结束

posted on 2005-06-16 10:16 Teddy's Knowledge Base 阅读(7444) 评论(40)  编辑 收藏 所属分类: Ajax

评论

#1楼  2005-06-16 10:39 upto      

不错!   回复  引用  查看    

#2楼  2005-06-16 11:12 neuhawk [未注册用户]

2、无刷新更新DataGrid数据!
这个很不错阿;
能不能那些保存事件也做成无刷新?
如果是,那真是太爽了。   回复  引用    

#3楼 [楼主] 2005-06-16 12:05 Teddy's Knowledge Base      

你只需要通过Control.Attributes为datagrid的子元素设置client端的的事件处理就行,理论上,任何postback事件都可以用ajax来取代!   回复  引用  查看    

#4楼  2005-06-16 12:25 neuhawk [未注册用户]

有没有相关例子呢?   回复  引用    

#5楼 [楼主] 2005-06-16 12:31 Teddy's Knowledge Base      

如果对此感兴趣的朋友比较多的话,我稍候再写一两个比较复杂的ajax代替传统postback范例,另外,我也会不断改进和扩展该类库,以获得更大的灵活性和稳定性和更多的功能,也希望感兴趣的朋友多提意见,欢迎msn交流:teddyma#vip.sina.com(#请替换为@)   回复  引用  查看    

#6楼  2005-06-16 13:04 逐灵 [未注册用户]

前两天详细看了一个Ajax.net的源码,
发现其实Ajax.net也可以实现Teddy的这种在服务器端就绑定数据的效果。
只要把Teddy的Updater这个函数修改一下用到Ajax.Net中就可以了。
不过,Ajax.Net里的js包不如Prototype好,如果能把这两个文件综合一下就好了。

Teddy能不能给几个Form操作的例子呢?
好像Ajax和.Net结合表单的操作会变得比较复杂。   回复  引用    

#7楼 [楼主] 2005-06-16 13:11 Teddy's Knowledge Base      

可以这样调用Updater,用SerializeForm序列化指定的form:
Updater('some_usercontrol_name', 'ouput_tag_id', SerializeForm('Form1'))
第三个参数用SerializeForm的返回值就可以了,他会帮你把Form内元素序列化为param1=v1&param2=v2...的形式。

稍候我会再给出一些复杂的例子,谢谢支持!   回复  引用  查看    

#8楼  2005-06-16 13:27 jlzhou      

还是不行啊,点击按钮,页面一动不动。

谁调试成功了?

我的环境是:windows XP Professional, IE6.0.2800.1106   回复  引用  查看    

#9楼  2005-06-16 13:54 jlzhou      

能不能提供在线的演示?以便确定是否是我的IE客户端问题?   回复  引用  查看    

#10楼 [楼主] 2005-06-16 13:59 Teddy's Knowledge Base      

不好意思,我自己的Web空间目前正在维护阶段无法访问,所以暂时不能提供在线演示,如果哪位好心人愿意提供空间给我做下在线演示的话我会非常感激!   回复  引用  查看    

#11楼  2005-06-16 14:26 jlzhou      

刚刚换了一台机器测试,win2000_IE6,运行ajaxhelpersample,点击第一个按钮,下拉框的的内容变成,我是新数据,嘿,有门了!

可是再点击其他按钮,又不行了,重新刷新页面也不行,甚至点击第一个按钮也不行了!

晚上我可以提供空间做在线演示。就是担心不成功~~   回复  引用  查看    

#12楼  2005-06-16 14:38 neuhawk [未注册用户]

关注中,要是自定义控件能给ajax结合就好了.
我比较怕写js代码.   回复  引用    

#13楼  2005-06-16 16:24 jlzhou      

可以看看PowerWeb的LiveControls控件。提供很多无刷新的web控件,可是目前版本bug多多,看来基于javascript的web开发,浏览器兼容性的问题更加复杂尖锐了。   回复  引用  查看    

#14楼  2005-06-16 16:25 jlzhou      

网址:http://www.dart.com/powerweb/livecontrols.asp
  回复  引用  查看    

#15楼  2005-06-16 17:06 来福 [未注册用户]

对ViewState支持吗?   回复  引用    

#16楼 [楼主] 2005-06-16 17:12 Teddy's Knowledge Base      

要像postback一样支持viewstate的话除非用微软的asp.net2.0callback实现,不过目前的测试版的效果还不够灵活,使用不够方便   回复  引用  查看    

#17楼  2005-06-16 20:46 逐灵 [未注册用户]

今天下午尝试用Ajax Wrapper.net 按照Teddy的方法用LoadControl在服务器端绑定数据,可是。。。因为一个很奇怪的问题。。。失败了。。。问题原因查找中。。   回复  引用    

#18楼  2005-08-22 21:43 柠檬园主 [未注册用户]

你的这个AJAXHELPER,很多都是参考PROTOTYPE.JS的啊.
要是你的这个代码里注释再写得多一些就好了,那样我们就可以拿来用了.改造成别的语言的了,而不只是.NET了.   回复  引用    

#19楼 [楼主] 2005-08-22 22:06 Teddy's Knowledge Base      

prototype的ajax是封装的比较好的,我为.net环境做了些修改和改进,在新版本里有比较多的注释的!

http://teddyma.cnblogs.com/archive/2005/08/17/216787.html   回复  引用  查看    

#20楼  2005-08-23 20:51 卡卡.net      

关注中......   回复  引用  查看    

#21楼  2005-09-21 17:53 Pharaoh      

我下载了你的演示,调试成功,我自己添加了一个函数,在客户端定时刷新,显示服务器时间,不一会就出现了“HTTP 403.9 - 禁止访问:连接的用户过多”的错误,不知以下问题该如何解决?

1.如果网页出现错误,是否可以提示用户?
2.每次后台连接,都会占用一个服务器连接,服务器的连接数量要设置得很大才行。   回复  引用  查看    

#22楼 [楼主] 2005-09-21 19:45 Teddy's Knowledge Base      

@Pharaoh:

首先要说明一点,所谓ajax是基于异步调用的,异步的意思就是,它是另起一个线程运行一次回调而不会阻塞当前的线程的运行。你如果简单的每个一定时间自动调用一次会有什么问题呢?因为每次回调何时能运行结束时控制不了的,也就是说,可能你第二次执行回调的时候第一次的回调还没运行完,以此类推,可能你第10次制定的时候,第5次的回调都没运行完。。。那么,时间一久,自然连接数过多了。解决的办法是,你应该在每次回调的onComplete中执行settimeout,也就是每次回调执行完之后等待一定的时间再次执行,而不是简单的每个多少秒执行一次。不知道我这样说你是否明白?   回复  引用  查看    

#23楼  2005-09-22 09:48 Pharaoh      

@Teddy's Knowledge Base
我的IIS设置连接数为30,页面每10秒获取一次服务器时间,本机连接,过一段时间后还是会出现错误。(我不知道怎么改onComplete,不过我觉得本机10秒应该可以执行完获取时间的事情,即第二次执行回调的时候第一次的回调应该已经完成)。
我猜想是IIS即使已经将页面发送完毕,还是会保持连接一段时间?
其实我觉得这个问题不大,很少有人会在页面用定时器在很短的时间内连续查询。我只是碰到了顺便问一问。

我比较关心的是第一个问题:“如果网页出现错误,是否可以提示用户?”。
当出现错误的时候,本来应该显示时间的地方要么为空,要么会出现IE的错误页面显示(是乱码),整个页面的布局可能发生改变。
我觉得应该学习Google的Gmail的做法,当发送邮件时,如果网络有问题,会弹出一个对话框提示用户,让用户过几秒后再试,原页面不会发生改变,用户只需要再次点击发送按钮就可以发送邮件了。
 
希望新版本能考虑一下错误处理机制,如果出现错误,至少保留原始页面。
希望AjaxHelper越来越完善!
  回复  引用  查看    

#24楼 [楼主] 2005-09-22 10:04 Teddy's Knowledge Base      

"不过我觉得本机10秒应该可以执行完获取时间的事情"
-- 你这样想是不可靠的,不能想当然认为10秒就一定执行完,就算设成10分钟也不可靠!onComplete可以这样设置:
 
function refreshAgain()
{
  setTimeOut('Updater(ajaxTemplate, output, params, refreshAgain);', 10000);
}
 
Updater(ajaxTemplate, output, params, refreshAgain);
 
至于你说的第二个问题,当然是可以发现错误的,在AjaxHelperv0.55以上的版本,像Updater这样的函数都会返回实际执行回调的XmlHttpRequest实例,你可以set一个timeout来判断返回实例的status属性来查看本次回调的当前状态,比如是否超时!

可以在这里下载AjaxHelper0.55:
http://www.cnblogs.com/teddyma/archive/2005/08/17/216787.html
  回复  引用  查看    

#25楼  2005-09-22 12:02 Pharaoh      

我觉得错误处理应该有框架层处理,使用返回的XmlHttpRequest进行判断,只能知道是否发生了错误,实际内容已经被改写了。
我设想的修改方案:
在AjaxHelper.js中判断XmlHttpRequest的状态,如果出错,不要修改innerHTML的值,增加一个错误的回调函数,调用此函数。如果没有指定回调函数,默认alert一个对话框,提示用户重试。
 

PS:我试验了refreshAgain的方法,还是会出现错误的。
 我看页面源文件有下面的语句:
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
这应该是指定页面的编码为gb2312,但是在IE的右键菜单中的编码为“UTF-8”,如果强制选择gb2312会出现乱码,那么<meta http-equiv="Content-Type" content="text/html; charset=gb2312">有什么作用?
  回复  引用  查看    

#26楼 [楼主] 2005-09-22 12:09 Teddy's Knowledge Base      

关于错误处理,你说得没错,我以后会考虑添加一个onTimeOut参数用以直接处理超时错误!

关于<meta http-equiv="Content-Type" content="text/html; charset=gb2312">,它只是指定默认的浏览器用于浏览时载入的字符集,不影响实际的网页内容的内码,如果你的程序输出的都是utf-8的话,那么就把它改成utl-8就行了。或者也可以不要<meta http-equiv="Content-Type" content="text/html; charset=gb2312">这条语句。   回复  引用  查看    

#27楼  2005-09-22 13:49 Pharaoh      

谢谢解答,出错时显示的乱码可能就是编码不一样导致的。   回复  引用  查看    

#28楼  2005-09-22 19:43 wda [未注册用户]

问个很菜的问题:如何获取刷新后的下拉列表的值呢?我自己测试,也看了例子,可还是弄不明白。   回复  引用    

#29楼 [楼主] 2005-09-23 09:04 Teddy's Knowledge Base      

@wda:

那你需要先学一以下ie dhtml model脚本编程!否则我说了你还是很难明白。下面是ms的官方参考资料:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/createelement.asp

  回复  引用  查看    

#30楼  2005-09-23 10:03 wda [未注册用户]

你说的那个例子我看了,谢谢你的指点。不过我的问题还是没有解决。我遇到的问题是:有两个dropdownlist和一个datagrid,当第一个dropdownlist的值变换时,从后台取数据动态刷新第二个dropdownlist的内容,当第二个dropdownlist的值变换时,动态刷新datagrid的内容。动态刷新第二个dropdownlist我用ajaxhelper实现了)。可是当第二个dorpdownlist的变换时,却不知道用什么办法来获取dropdownlist的值来刷新datagrid。页面总是提示错误“目标对象没有发现”。请问这个问题怎么解决呢?   回复  引用    

#31楼  2005-09-23 10:08 wda [未注册用户]

谢谢你的指点。不过我的问题还是没有解决。

我的问题是:页面上有两个dropdownlist和一个datagrid。当第一个dropdownlist的值变换时,从后台取数据刷新第二个dropdownlist,当第二个dropdownlist刷新时,刷新datagrid的内容。第二个dropdownlist的刷新我用ajaxhelper0.55实现了。可第二个dropdownlist的值却怎么也取不到。页面总是提示“目标对象不存在”。请问这个问题该怎么解决呢?   回复  引用    

#32楼 [楼主] 2005-09-23 10:19 Teddy's Knowledge Base      

@wda:

既然说“目标对象不存在”,那肯定是你访问第二个dropdownlist的方式有问题,比如,如果通过id来访问,则要保证你你指定的id确实是第二个dropdownlist的id。或者也可以通过其他的dhtml属性通过javascript访问到第二个dropdownlist的引用。循着这条路去找原因,肯定能找到的。还是建议你先好好参考以下ie dhtml model的相关资料。因为你现在问得都还是很基础的问题,如果你深入使用,类似的及更复杂的问题还会更多,必须深入了解js和dhtml的本质,如果当前问题的解决觉得已经比较困难的话,说明你的相关基础知识还需要加强。否则,以后出了问题会更受挫折。   回复  引用  查看    

#33楼  2005-11-05 16:32 BLYCT      

@wda:
你的问题只有一个解决办法,那就是用POST方式把你表单的数据传到另一个页面(也可以是本身页面)去处理。否则是取不到值的。   回复  引用  查看    

#34楼  2005-11-28 12:49 yun [未注册用户]

prototype应该作为一个独立的文件被包含,你90%的代码都是原封不动的拿来,别人的框架就变成了你的框架,有点不厚道   回复  引用    

#35楼 [楼主] 2005-11-28 13:00 Teddy's Knowledge Base      

@yun:

你这样说是不负责任的,我这里可以说明一下:

1、prototype直接在asp.net下是不能直接使用的,特别是form为runat=server的情况。因此,我对prototype的关键部分的代码作了修改,以使其能正确运行于asp.net环境。不信的话,你自可以自己尝试!

2、prototype是一个免费框架,作者声明可以任意自由修改和使用,在我的代码的声明部位我也非常明显的注明了基于prototype的字样。因此是严格符合其用户使用协议的。而且请注意,我是以完全免费的协议发布这个框架的,任何人修改并以其他名义发布都是允许的,即使不注明修改自我的代码。

3、我为方便prototype在asp.net下使用,以usercontrol作为视图引擎,简化了其调用过程,并整合了部分ms的js扩展(我都在源码注明了引用来源)以方便用户的开发。这些过程都是需要一定的创造性地。我认为,对其他用户还是有一定的意义的。

综上所述,你仅仅因为我的代码基于prototype就说我“不厚道”是不负责的。

Teddy   回复  引用  查看    

#36楼  2006-04-19 14:14 Leon Shang [未注册用户]

正在用你的框架开发,这个框架对于喜欢用.net的朋友来说,很有点“曲线救国”的意思,呵呵,很感谢Teddy的辛苦工作和奉献精神!   回复  引用    

#37楼  2006-05-06 15:05 chx [未注册用户]

已经实现了,可是gd的显示外观消失了,还有什么意义??   回复  引用    

#38楼  2006-08-22 13:48 GouGou      

SerializeForm 没有这个函数的实例 不会用呀~~~   回复  引用  查看    

#39楼  2008-04-19 11:34 嘎子 [未注册用户]

十分感谢!   回复  引用    

#40楼  2008-04-21 11:23 pp888 [未注册用户]

请问如果传参数,如GetDS?pageindex=5   回复  引用