11月21日晚7点应邀在武汉大学信息学院做了一场关于ASP.NET下AJAX开发的报告,以我自己经历讲述了一些特殊应用在过去到现在实现手段的变化,本来想回家之后做个总结的,但是由于最近以来事情一直很多,所以没有来得及总结。今晚得以有空总结一下。

AJAX介绍
其实AJAX应用的核心就是XMLHttpRequest,通过现象看本质,即使使用微软的AJAX服务器控件最终也是需要这些的,只不过使用微软AJAX服务器控件开发AJAX应用时我们不需要关心JS脚本的实现,只需关心业务逻辑就可以了,因而可以简化开发和提高开发速度。AJAX的基础是XHTML、CSS、DOM、JavaScript、XML及XMLHttpRequest。
正确使用AJAX技术可以改善用户体验,是用户与服务器的交互更流畅,某些情况下还能减少服务器流量。在以前AJAX只是作为一种比较炫的技术为一些大型网站所使用,现今这个比云计算还要流行了,至少云计算更多地还是停留在人们的概念里,而AJAX确确实实应用在WEB开发当中了。WEB开发人员的招聘都是言必精通AJAX技术。
下面分别讲讲在ASP.NET开发中可以供选择的开发AJAX应用的方式:
采用纯JavaScript实现
在武侠小说中绝顶高手飞花摘叶都可以伤人,在WEB开发领域真正的高手也可以无需借助任何其它库就可以开发出AJAX应用。不适用任何第三方库开发AJAX应用就需要自己区分浏览器来实例化XMLHttpRequest对象实例,下面的代码是一个简单的调用AJAX的代码:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
< html  xmlns ="http://www.w3.org/1999/xhtml"  > 
< head > 
         < title >获取服务器时间的例子 </title> 
         < script  language ="javascript"  type ="text/javascript" > 
var request=false; 
//实例化XMLHttpRequest 
function createXMLHttpRequest() 

        try 
        { 
                //下面的方法有可能抛出异常,表示当前浏览器不支持此方法 
                request=new ActivexObject("Msxml2.XMLHTTP"); 
        } 
        catch(e1)//当通过上面的方法实例XMLHttpRequest发生异常 
        { 
                try 
                { 
                        //下面的方法有可能抛出异常,表示当前浏览器不支持此方法 
                        request=new ActivexObject("Microsoft.XMLHTTP"); 
                } 
                catch(e2)//当通过上面的方法实例XMLHttpRequest发生异常 
                { 
                        request=false; 
                } 
        } 
        //当上面的方法都不能实例化XMLHttpRequest时,表示非IE浏览器 
        if(!request&&typeof XMLHttpRequest!='undefined') 
        { 
                //非IE浏览器实例化XMLHttpRequest的方法 
                request=new XMLHttpRequest(); 
        } 
         

//发送客户端请求的方法 
function getServerTime(format) 

        //调用上面的方法实例化XMLHttpRequest 
        createXMLHttpRequest(); 
        //要请求的URL地址,注意escape是javascript中的方法 
        //用于对特殊字符进行转义 
        var url="ServerTime.aspx?format="+escape(format); 
        //alert(url);//可以通过这种方法查看服务器的返回结果 
        //通过GET方式打开请求,第三个参数true表示异步发送请求,false则为同步 
        request.open("GET",url,true); 
        //当request的等待状态发生变化时要执行的客户端方法 
        request.onreadystatechange=update;//update是客户端的javascript方法 
        //因为在请求的url中已经附带了参数,所以这里的参数是null 
        //表示不再发送额外的数据 
        request.send(null); 

//当接收到服务器的响应之后执行的客户端方法 
function update() 

        if(request.readyState==4) 
        { 
                //alert(request.responseText);//查看服务器响应结果 
                document.getElementById("time").innerHTML=request.responseText; 
        } 

         </script> 
</head> 
< body > 
< table  border ="0" > 
         < tr > 
         < td >服务器时间 </td> < td > < div  id ="time" > </div> </td> 
         </tr> 
         < tr > 
         < td > < input  type ="button"  value ="完整时间"  onclick ="javascript:void getServerTime('yyyy-mm-dd hh:mm:ss');"     /> </td> < td > < input  type ="button"  value ="年月日"  onclick ="javascript:void getServerTime('yyyy-MM-dd');"     /> </td> 
         </tr> 
         < tr > 
         < td > < input  type ="button"  value ="时分秒"  onclick ="javascript:void getServerTime('hh:mm:ss');"  /> </td> < td > < input  type ="button"  value ="月份日期"     onclick ="javascript:void getServerTime('mm-dd');"  /> </td> 
         </tr> 
         </table> 
</body> 
</html>
从上面的代码中可以看出每次实例化XMLHttpRequest对象都需要判断,一些常用的操作也可以封装一下,利用Prototype或者jQuery这个JavaScript脚本库就可以轻松做到这一点,实际上早期很多人就用到了Prototype或者jQuery来开发AJAX应用,并且在Prototype或者jQuery中还封装了其它很多通用的方法,大大提高了我们的开发效率。
使用jQuery
当然我们还可以使用目前比较热门的JavaScript框架jQuery,这个在VS2008中需要安装SP1后才能活得智能提示,在VS2010中已经集成了。如果使用jQuery上面的代码可以简化为:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
    
   < html  xmlns ="http://www.w3.org/1999/xhtml" > 
   < head > 
          < title >使用jQuery获取服务器时间的例子 </title> 
          < script  src ="jquery-1.2.6-cn.js"  type ="text/javascript" > </script> 
         < script  type ="text/javascript"  language ="javascript" > 
                function getTime() { 
                        $.get("GetTime.aspx", { format: "yyyy-mm-dd hh:mm:ss" }, 
                        function(data) {//得到Ajax响应后的回调函数 
                                //$("#time").append(" < font  color ='red' >" + data + " </font>"); 
                                $("#time").html(" < font  color ='red' >" + data + " </font>"); 
                        }); 
                } 
         </script> 
   </head> 
   < body > 
   < table  border ="0" > 
          < tr > 
          < td >服务器时间 </td> < td > < div  id ="time" > </div> </td> 
          </tr> 
          < tr > 
          < td > < input  type ="button"  value ="完整时间"  onclick ="javascript:void getServerTime('yyyy-mm-dd hh:mm:ss');"     /> </td> < td > < input  type ="button"  value ="年月日"  onclick ="javascript:void getServerTime('yyyy-MM-dd');"     /> </td> 
          </tr> 
          < tr > 
          < td > < input  type ="button"  value ="时分秒"  onclick ="javascript:void getServerTime('hh:mm:ss');"  /> </td> < td > < input  type ="button"  value ="月份日期"     onclick ="javascript:void getServerTime('mm-dd');"  /> </td> 
          </tr> 
          </table> 
   </body> 
</html> 
可以看出在jQuery中提供了更多、更灵活的处理AJAX和XHTML的方法,简易大家都去了解一下。
在上面的方式中无论使用自己写全部JavaScript脚本还是利用Protype或者jQuery这类框架的方式,都是需要写一些JS脚本的,有没有尽可能少写脚本的方式呢?毕竟我们知道JS脚本调试起来相对较为困难些。答案是有的,那就是使用AjaxPro。
使用AjaxPro
下面是一个使用AjaxPro的例子,设计代码如下:
< %@ Page  Language ="C#"  AutoEventWireup ="true"  CodeFile ="AjaxPager.aspx.cs"  Inherits ="AjaxPager" % >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"  > 
< head  runat ="server" > 
         < title >AjaxPro翻页效果 </title> 
         < style  type ="text/css" > 
tr.items{                 
  background-color: #8FACC2; 
  border-color:#FFFFFF; 
  line-height:18px; 

tr.table{                /*表格内容*/ 
  background-color: #F1F3F5; 
  border-color:#FFFFFF; 
  line-height:18px; 

         </style> 
</head> 
< body  onload ="JumpPage(0)" > 
         < form  id ="form1"  runat ="server" > 
         < div  id ="memberList" > 
        数据装载中,请等待..... 
         </div> 
         </form> 
         < script  language ="javascript"  type ="text/javascript"  defer ="defer" > 
                function JumpPage(var page) 
                { 
                        var label=document.getElementById("memberList"); 
                        label.innerHTML=AjaxPager.GetString(parseInt(page*20),parseInt(20)).value;//假定每页显示20条数据 
                } 
         </script> 
</body> 
</html>

后台逻辑代码如下(太长了不能发表,所以省略了,不过关键部分可以见附图):
 
从上面的代码中可以看出使用AjaxPro之后可以不用写太多客户端代码,而且不同前面几种做法需要写一个页面调用显示,一个页面负责控制业务逻辑(一般情况下是这样的),使用AjaxPro可以将调用页面和控制业务逻辑页面合在一起,这样服务端代码调试比较方面,而且也不用控制如何发送请求,请求什么时候响应完毕。
使用AjaxPro有几方面需要注意,就上面的代码中的注意事项说明如下:
js部分: 
被调用的方法:
使用微软AJAX控件库
前面几种开发AJAX应用的方式都是遵循一个规律:开发速度是有低到高,开发难易程度由难到易,不过在前面几种方式中不管怎么做都还没有完全脱离JavaScript,这个东东对于现在的一些初学者(就是那些感觉做ASP.NET开发就只是拖拽控件)来说还是有些难度,还是需要写JavaScript来操作HTML页面,为了彻底减轻这部分人掌握ASP.NET中AJAX开发,微软推出了AJAX服务器端控件。
使用微软AJAX服务器端控件可以在做简单设置的情况下满足开发环境中的大部分简单需求,当然做一些稍微复杂点的设置就可以满足开发环境中的绝大部分需求了。
在微软AJAX服务器控件库中主要有以下几个服务器控件:
ScriptManager控件:注册脚本,必须在所有服务器控件之前出现
ScriptManagerProxy控件:参考其它脚本和服务
UpdatePanel控件:局部刷新控件
Timer控件:定时执行控件
UpdateProgress控件:进度显示控件
下面是一个使用了微软AJAX服务器控件的例子(文章太长,不能附上代码,关键部分见附图):
 
这个页面的作用其实很简单,就是在用户打开这个注册页面填写完自己的用户名之后准备填写其它信息(就是鼠标从用户名文本框移开后)时就能获知自己的用户名是否已经被注册,还有另外一个效果,就是在用户注册时实现了省(直辖市)、市(区县)、县三级联动的效果,因为使用了微软AJAX控件,所以操作过程中整个页面不会全部刷新,只有局部刷新效果。

在使用微软AJAX服务器控件过程中需要注意一些事项,就上面的例子中需要注意的事项如下:
总结
其实这篇文章是新瓶装旧酒(和AJAX一样),里面用到的代码都是以前在博客文章中出现的,这篇文章只不过做了一个综合性的比较而已。
对于上面出现的这么多选择,我们不必一味去追问哪种比哪种一定要好,实际上很多技术都有自己的使用场合的,没有绝对在所有领域所有场合都是最佳的(那就好像找一匹不吃草且跑得快的马)。控制越灵活的需要对脚本知识掌握越高,开发速度也相对低;开发速度越高、调试越容易的控制起来相对较难一些(就像武学一样,绝对高手飞花摘叶可以杀人,花花草草找起来很简单,但是没有深厚的功力不行;倚天屠龙即使在普通人手里也可以让他威力大增,但是不是每个人都有这种机会)。
对于初学者或者初级开发人员我建议如下:
如果开发简单AJAX应用,使用AJAX控件首选,无需任何脚本知识;
如果开发复杂AJAX应用,建议使用jQuery,这是一个可以用于多种动态网页编程的Javascript脚本库。
本文转自周金桥51CTO博客,原文链接:http://blog.51cto.com/zhoufoxcn/239749 ,如需转载请自行联系原作者

ASP.NET中的AJAX应用开发总结相关推荐

  1. ASP.NET中的AJAX应用开发详解

    [IT168 技术文档]其实AJAX应用的核心就是XMLHttpRequest,通过现象看本质,即使使用微软的AJAX服务器控件最终也是需要这些的,只不过使用微软AJAX服务器控件开发AJAX应用时我 ...

  2. Asp.net中的AJAX学习记录之一 AJAX技术的崛起与Asp.net AJAX的诞生

      最近开始学习Asp.net中的AJAX,可能我的高手朋友们会说:"走还不稳呢!怎么就想学跑了?"呵呵!主要是我在做项目中体会到AJAX真的是很好的一门技术,应该好好的学习一下, ...

  3. asp.net 中 使用ajax 和浏览器的关系

    ====================================================== 注:本文源代码点此下载 ================================= ...

  4. 在ASP.NET中实现AJAX

    对ASP.NET而言,Ajax不需要回传就能进行服务器端处理,从而使客户机(浏览器)具有丰富的服务器端能力.换句话说,它为异步指派和处理请求与服务器响应提供了一个框架. Asynchronous Ja ...

  5. ASP.Net 中操作Ajax

    有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺,JQuery中有很多优势,比如异步提交值,部分刷新,给用户很好的体验感.目前为止,大部分项 ...

  6. 利用Asp.net中的AJAX制作网页上自动选取开始日期及结束日期的用户自定义控件...

    前段时间用过一个酒店入住预约网站,当你点击"入住时间"时会悬浮出一对并列的日历,然后点击左边的日历就能选择入住时间,点击右侧的日历就能自动得到离店时间,当时没有太留意是怎么实现的, ...

  7. dojo在ASP.NET中使用Ajax初步

    我想先介绍一下dojo中的浏览器事件,由于不同的浏览器对dom事件的支持是不同的,dojo在这方面做了统一的封装,所以使用dojo不用担心浏览器事件不兼容的问题.问题也就由此而来,由于要兼容不同的浏览 ...

  8. ASP.Net中实现Ajax的几种实现方法之AjaxPro的使用(一) [AjaxPro.AjaxMethod]

    原文地址 1.什么是Ajax Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写."Ajax"这个名词的发明人是 ...

  9. 探讨ASP.NET AJAX客户端开发技术

    一. 简介     在ASP.NET AJAX组件开发中,存在许多环节有待我们深入挖掘.如何让ASP.NET AJAX服务端控件更有效地利用客户端脚本来为控件添加强大的客户端功能?如何更为方便地访问控 ...

最新文章

  1. linux字符串转为二进制,Linux printf将十进制转换为二进制?
  2. 我的世界服务器怎么显示腐竹来了,我的世界腐竹开服必看manu权限组教程
  3. HTML特殊字符大全2
  4. 关系数据库SQL之可编程性函数(用户自定义函数)
  5. 多模光纤收发器的应用领域及适用领域
  6. SpringMVC架构
  7. 虚拟机ping不通主机与外网的解决方法
  8. Jetson TX1开发笔记(三):开发利器-Nsight Eclipse Edition
  9. 傅里叶(一):傅里叶分析
  10. ESD介绍及TVS的原理和应用
  11. 苹果iOS捷径(快捷指令)修改网页元素:移动端开发者工具console的替代方案
  12. 计时器操作--打点计时器
  13. 金仓数据库 KingbaseES SQL 语言参考手册 (10. 查询和子查询)
  14. java 时间戳最大值_Java中在时间戳计算的过程中遇到的数据溢出问题解决
  15. VTK交互系统 1 交互模式入门
  16. win7系统安装提示“很抱歉,程序无法在非MBR引导的分区上进行激活
  17. 使用laravel+Laravel-Roles-Permissions 开发后台权限管理
  18. MBA案例分析(行销与营销之行销五)
  19. html鼠标背景特效,6种鼠标滑过按钮背景动画特效
  20. cad管道阀门符号dwg_cad管道阀门符号怎么画(CAD怎么画系统图,特殊符号怎么搞,像管道系统图,...)...

热门文章

  1. 盈建科弹性板6计算_专题文档
  2. Win10如何修改快捷键设置?
  3. 任务计划无法连上远程计算机,win7计划任务,找不到远程计算机.docx
  4. 线性代数——线性变换——旋转矩阵(泰勒公式、虚数、欧拉公式)
  5. C#读取excel文件,报“外部表不是预期的格式”的解决办法
  6. 虚拟机上的ubuntu设置自定义分辨率
  7. [Android]优质安卓自学视频和必备资料整理
  8. Hacking Team事件导致一名韩国情报官员死亡
  9. 38招成为成功自由设计师的秘诀
  10. android集成qq浏览器,融合的设计–QQ浏览器(android)设计分享