Ajax 回忆录
2023-09-11 14:20:03 时间
说起Ajax,并没有什么特别的感觉,只记得曾经接触过这么几种:
一:Net2.0自带的ICallbackEventHandler
那时候从VS2003刚等到VS2005一出来之际,就看了大量的视频教程,从中也学到了这个ICallback的用法。我将之用在一个CMMI的课程设计里,做的一个图书管理系统,好像在上传图片的时候,为了不刷新某个东东而特意用的。
二:Atlas
![复制代码](http://common.cnblogs.com/images/copycode.gif)
![ExpandedBlockStart.gif](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
那时的Atlas框架刚出来的时候,我一路追着风。关注的flychen的博客,虽然他的文章多数是翻译。
那时候的Atlas很牛B,特效特牛,随便拖一个都是一个赞,我的毕业设计里几乎用上了所有的Atlas控件,就是这份特效为了毕设和第一份工作带来了自信。
那时候的毕业设计做的是一个QQ空间,实现的功能就是:主页汇总,日志,留言,音乐盒,相册,换肤,加一个聊天室。
那个是一个劲的特效,随便点一个,都忽的一声出来,背景随便就黑屏的那种。什么折叠效果,乱七八糟的,什么音乐盒,还能到处拖。
到了后来升到asp.net Ajax版本之后,就再也没那种激情追求什么特效了,把B还给牛了
![复制代码](http://common.cnblogs.com/images/copycode.gif)
三:Prototype
在我的毕业设计里,有音乐盒这东西,音乐盒的播放器是从网上下载的。里面用到了一个prototype.js来调用播放列表。于是prototype就成了我的第二个接触的Ajax封装体了,在里面也只是小小用了一下。
四:XMLHttpRequest
![复制代码](http://common.cnblogs.com/images/copycode.gif)
技术总监说这些Ajax早在N年前他就在用了,原理还是Iframe这东西。
后来很多时一直还是用这个。
![复制代码](http://common.cnblogs.com/images/copycode.gif)
五:Jquery
这东东我本人没有用过,不过随着它的流行,我在以前兼职教师时,给我学生介绍过,也按着文档实际操作过几个例子,多数还是讲原理的东西。
一路走过来,
![复制代码](http://common.cnblogs.com/images/copycode.gif)
性能优先[哪个性能最好用哪个]- 只有牛,没有B
到性能取舍[哪个适合项目用哪个]- 没牛也没B
这是一个领悟过程 回归是一种自然
![复制代码](http://common.cnblogs.com/images/copycode.gif)
下面说下用Net2.0自带的ICallbackEventHandler实现封装的一种应用:省市区的联动实现
首先:新建一个PageBase.cs基类,继承自System.Web.UI.Page和ICallbackEventHandler接口,代码如下:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
说明:
上面的基类中封装了一些基础的注册方法,下面演示如何调用。
简单测试调用:
普通页面后台.cs代码,继承自PageBase
![复制代码](http://common.cnblogs.com/images/copycode.gif)
{
protected void Page_Load(object sender, EventArgs e)
{
RegisterAjax();
}
![复制代码](http://common.cnblogs.com/images/copycode.gif)
接着页面html代码如下:
![复制代码](http://common.cnblogs.com/images/copycode.gif)
![ExpandedBlockStart.gif](http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
body
form id="form1" runat="server"
input type="button" value="pages" onclick="callAjax(hello)" /
script function callBack(result){alert(result);} /script
/form
/body
/html
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
用户控件html代码:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
OK,点击结果也同样出来了。
以下进一步示范怎么实现联动:
![复制代码](http://common.cnblogs.com/images/copycode.gif)
1:默认先绑定一个省
2:选择省时Ajax请求(发送ID到后台
3:后台查询数据库,把省下的市按规则组合发回前台
4:前台js按规则拆分字符串
5:js清空市并连动区与县的下拉框(或者说叫复位)
6:js创建下拉的项option,并添加到市下拉里
重复一下就是几级联动了,最后完成
![复制代码](http://common.cnblogs.com/images/copycode.gif)
这里的js会做很多事件:发送ajax请求- 接收result- 分隔字符- 复位下拉框- 创建下拉option并添加
这里先添加一个AreaCity.js,把上面的东西都实现,代码如下:
AreaCity代码[点下面的一条框出来]
好,我们先看html代码:引入areacity.cs并拉几个下拉控件上去:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
现在看一下后台代码cs,这里不用数据库,临时用Dic字典组合充当数据:
![](http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
至此,下拉效果就出来了。
示例代码下载:ProvinceCity.rar
版权声明:本文原创发表于博客园,作者为路过秋天,原文链接:
http://www.cnblogs.com/cyq1162/archive/2010/05/19/1739059.html