Community Server系列之四:Ajax在CS2.0中的应用1

       Ajax技术在时下很热门,当然在CS2.0中也不例外的运用到了此技术,CS2中没有使用任何第三方Ajax控件,这就给我们提供一个研究Ajax机理的好地方,现介绍一下在CS2中Ajax的一些简单应用,并分析应用的原理。

       我想要研究此技术最好的办法就是把代码分离出来放在自己的工程中,重现这些功能,在重现这些功能的时候一定会遇到这样或那样的问题,这恰好是我们应该着重研究的地方,所以让我们先来分离代码吧。

       就拿CS中的一个Ajax小应用来说,当具有系统管理员权限的用户进入后,可以看到页面的标题和一些新闻内容是可以无刷新改变的,让我们先从此处下手吧。找到相应的控件页面,我们会发现,这些控件引用的一些文件,我现在先把它们列出来,下面的截图是我在分析TitleBar代码后分离出来的:

 

        参看上图,有这么几个文件是很关键的:

        AjaxManager.cs主要提供Ajax应用所需要的功能枚举等等,此文件包含三个类见图2,其中AjaxManager里面包含了几个静态方法,这个是关键。

        Global.js这个文件主要包含两个重要的脚本函数来处理客户端的Ajax提交,另外还有一些很有用的js函数。

当然,这两个文件只是基础,要使用ajax必需要相应的页面的配合和对js编程的熟悉,现在让我们来了解一下Ajax的机理,Ajax说白了就是使用JS脚本和XMLHttp技术在后台提交数据到服务器,经过服务器相应方法的处理后把数据返回给客户端,由于数据在后台提交的,用户只看到数据的变化却看不到页面的刷新,功能酷酷的,实现起来也不难,这就开始了:

首先让我们看看在CS2中的Ajax的实现原理

 

按照上图的步骤来分析,并且以一个实例来了解它,这个示例很简单:在客户端提供两个用户输入的数字,提交到服务器进行计算,并把计算结果返回给客户端。

(在看下面的解说之前最好先下载本篇文章的示例程序结合着看。)

       首先,我们建立一个aspx的页面,这里命名为Default.aspx,第一步要在提交请求的时候让页面注册Ajax_CallBack脚本(此脚本即是客户端和服务器通讯的关键),这里我们的后台代码很简单你可以在Page_Load方法里写成这样if(!this.IsPostBack) AjaxManager.Register(this,"Counter");可以看出调用了AjaxManager的静态方法,此方法的作用就是分析传进去的参数(这里的参数为this也就是页面的引用),生成客户端Ajax_CallBack脚本。在生成脚本之前自动去找在此页面有多少个带了AjaxMethod属性的方法,一个服务器方法对应一个客户端Ajax_CallBack方法,生成了客户端脚本后我们只需要在客户端写上少量的调用方法即可与服务器通讯了。在这里注册到客户端的脚本为:

"CounterEnter"function(first, second, clientCallBack) {
    
return Ajax_CallBack('ASP.Default_aspx', null, 'CounterEnter', [first,second], clientCallBack, falsefalsefalsefalse,'/cs_ajax/Default.aspx?Ajax_CallBack=true');
}

有了这个脚本,客户端的工作并没有做完,因为还没有让客户端控件响应操作,这里就需要我们手动写一些操作代码了,不过一般不会太复杂,比如这里我们只需要在页面加多这样的js语句快:
function CounterEnter(){
$('txtResult').value
= iteSettings.CounterEnter($('txtFirst').value,$('txtSecond').value,null).value; }


     在客户端的按钮onclick事件上调用此函数即可,这段客户端的代码也许有人会迷糊,其中“$”函数是Glogal.js文件中的,等同于document.getElementById,iteSettings.CounterEnter则是调用前面注册到客户端的脚本,那么这段代码的意思是传递第一个和第二个输入筐的值到服务器器上的CounterEnter方法,并把返回的结果付给txtResult的文本框,前面已经提到过服务器上的CounterEnter方法此方法带有AjaxMethod属性,程序会自动找到此方法并执行的。至于怎么找到的,在后面详解,服务器方法在执行完此方法后返回结果,返回的值通过AjaxManager的相关方法以js脚本的形式Response给客户端(形式如:{value:’aaa’,error:null}),在得到这个返回对象后我们只需要调用其中的Value属性即可获取返回的值。
    那么服务器怎样去分辨是Get请求还是PostBack或者AjaxPostBack呢,只有分清楚了这个才能在该执行的时候执行相应的方法,好的,其实在这里通过Get方法和AjaxPost的数据asp.net都不认为是回发给服务器,这样一来我们在PageLoad代码里的写的if(!this.IsPostBack)对两者请求都视为等效,那么通过后台的AjaxPost请求的页面同样会去执行AjaxManager.Register方法,那么我们看看此方法除了注册客户端JS代码还做了写什么呢。我们注意到在最后一段代码里有一句:control.PreRender += new EventHandler(OnPreRender);这句话就是在当即将Response给客户端页面的时候执行OnPreRender方法先,此方法的作用即是判断客户端提交的参数里是否有Ajax参数,如果有就判断此次Request为Ajax提交,需要执行服务器的相关方法,此处通过一系列的跳转和反射找到了应该调用的方法并执行,返回执行完后的结果给客户端并中止页面继续Responst,这样就完成了一个完整的Ajax调用,当然在AjaxManager里面有很多细节在这里没有详细写出来,如有异议或疑问希望多多指正和探讨,也希望此篇帖子能起到抛砖引玉的作用,给大家一个小小的参考。
   下一篇将介绍Ajax在CS2中的高级应用,本文示例下载。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/305813.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么人和人的差距这么大?

点击蓝字关注,回复“职场进阶”获取职场进阶精品资料一份这是一篇去年写的旧文,不少读者从这篇文章中获得了一些方法和力量,于是再分享下:工作和生活中不光要埋头干活,还要抬头看天。思考总结方法论是提升认知的必备途…

github可以传java吗_如何在github上传本地项目代码(新手使用)----亲测使用

首先你要在github上申请一个账号然后你要下载一个git工具进入官网直接下载就行,下载完成后进入github首页,点击新项目new repository(新建),如下图所示:然后进入如下页面,主要填写红色圈起来的几个部分,如下…

【One by One系列】IdentityServer4(一)OAuth2.0与OpenID Connect 1.0

在微服务场景中,身份认证通常是集中处理,这也是有别于单体应用一把梭哈的模式,其中,在微软微服务白皮书中,提供了两种身份认证模式:网关,没错,原话是If youre using an API Gateway,…

ABP vNext分布式事件总线RabbitMQ注意事项

[https://docs.abp.io/zh-Hans/abp/latest/Distributed-Event-Bus-RabbitMQ-Integration](ABP vNext官方文档链接),基本使用可直接阅读官方文档,云怀不重复造轮子,只做官方未提到但重要的说明关键配置说明关键配置类:AbpRabbitMqE…

去除代码行号的一个小程序(控制台版本)

清风竹林发布了去除代码行号的一个小程序,确实方便大家收集一些文章代码,但个人认为象这样的小东东,要使广大网友能拿来就用,用.Net 2.0做成WinForm,有点贵族化了,于是动手整出个平民化的控制台版本,可以清除指定的文本…

. NET5实战千万高并发项目,性能吊打JAVA,C#排名万年老五,有望逆袭!

“秒杀活动”“抢红包”“微博热搜”“12306抢票”“共享单车拉新”等都是高并发的典型业务场景,那么如何解决这些业务场景背后的难点问题呢?秒杀系统中,QPS达到10万/s时,如何定位并解决业务瓶颈?明星婚恋话题不断引爆…

ABP vNext 审计日志获取真实客户端IP

背景在使用ABP vNext时,当需要记录审计日志时,我们按照https://docs.abp.io/zh-Hans/abp/latest/Audit-Logging配置即可开箱即用,然而在实际生产环境中,某些配置并不可取,比如今天的主角——客户端IP,记录用…

郭昶

郭 昶左直拳饰演《外来媳妇本地郎》中康家老二康祁宗的演员郭昶6月14日去世了,胃癌,享年50岁。这个消息真令人难以置信,不胜嘘唏。 《外来媳妇本地郎》在广东这边很受欢迎,每集结尾那带有浓厚岭南特色的粤曲小调在胡同小巷时有…

ABP vNext IOC替换原有Service实现

即 .NET IOC替换原有Service实现背景在使用ABP vNext时,该框架为我们实现了非常多的默认行为,以便开箱即用,但在实际使用中,我们总是需要根据自己的需求定制自己的服务,在.Net框架中,便提供了Service.Repla…

aqs java 简书,Java AQS源码解读

1、先聊点别的说实话,关于AQS的设计理念、实现、使用,我有打算写过一篇技术文章,但是在写完初稿后,发现掌握的还是模模糊糊的,模棱两可。痛定思痛,脚踏实地重新再来一遍。这次以 Java 8源码为基础进行解读。…

dnSpy反编译、部署调试神器

一、概要在工作当中,当程序部署了之后就算打了日志遇到极个别的特殊异常没有在程序日志中体现出来或者没有详细的报错原因会让开发者非常头疼,不得不盲猜bug到底出在哪里。这里分享一下工作上经常会用到的工具,这款工具可以反编译并运行调试已…

java中内边距跟外边距,padding和margin——内边距和外边距

一、padding——内边距(内填充)1.1、padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。div.outer{width: 400px;height: 400px;border: 2px solid #000;}div.inner{width: 200px;height: 200px;background-color:red ;padding: 50px;}运行效果图&#xff…

AJAX将成为移动Web2.0时代首选开发平台

一、 引言  最近,Opera宣布通过他们的浏览器把AJAX技术应用于移动设备开发中。考虑到Opera浏览器在目前浏览器市场(特别是在移动浏览器市场)的流行性,我们可以预计这一宣布对于整个浏览器市场必然会产生重要影响。从加入到移动服务开发市场几年的经验来看,我相信现…

使用 ML.NET 实现峰值检测来排查异常

机器学习中一类问题称为峰值检测,它旨在识别与大部分时序中明显不同但临时突发的数据值。及时检测到这些可疑的个体、事件或观察值很重要,这样才能尽量减少其产生。异常情况检测是检测时序数据离群值的过程,在给定的输入时序上指向“怪异”或…

PHP防QQ列表右划,react native 实现类似QQ的侧滑列表效果

如果列表行数据需要更多的操作,使用侧滑菜单是移动端比较常见的方式,也符合用户的操作习惯,对app的接受度自然会相对提高点。最近得空就把原来的react-native项目升级了侧滑操作,轻轻松松支持android和ios双平台,效果如…

OpenTelemetry - 云原生下可观测性的新标准

CNCF 简介CNCF(Cloud Native Computing Foundation),中文为“云原生计算基金会”,CNCF是Linux基金会旗下的基金会,可以理解为一个非盈利组织。当年谷歌内部一直用于编排容器的Borg项目开源了,为了该项目更好…

毕业设计——第三章 开发方法及系统实现(5)

国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私募机构九鼎控股打造,九鼎投资是在全国股份…

说说 RabbiMQ 的应答模式

RabbiMQ 我们都很熟悉了,是很常用的一个开源消息队列。搞懂 RabbiMQ 的应答模式对我们排查错误很有帮助,也能避免一些坑。本文说说 RabbiMQ 的应答模式。生产者发出一条消息给 RabbiMQ ,RabbiMQ 将消息推送给消费者,消费者处理完消…

微软2020开源回顾:止不住的挨骂,停不下的贡献

喜欢就关注我们吧!2020年,Linus Torvalds 开启“飚骚话”模式,言语不再激烈。看到“大喷子” Linus 都有机会变慈祥,料想微软近年来主动拥抱开源并示好的行为应该能改变他人的看法。然而事实并非如此,虽然微软积极投身…

每日一题——LeetCode859

方法一 个人方法: 首先s和goal要是长度不一样或者就只有一个字符这两种情况可以直接排除剩下的情况s和goal的长度都是一样的,s的长度为2也是特殊情况,只有s的第一位等于goal的第二位,s的第二位等于goal的第一位才能满足剩下的我们…