Asp.Net2.0下客户端脚本调用服务端函数的分析

开篇：润墨网以专业的文秘视角，为您筛选了一篇Asp.Net2.0下客户端脚本调用服务端函数的分析范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘要本文介绍了基于B/S结构下在2.0中如何利用客户端脚本调用服务端函数，包括客户端脚本jvascript和服务端C#函数的开发。主要内容介绍利用MicrosoftVisualStudio20__工具，结合当今流行的Ajax技术来实现客户端脚本调用服务端函数的功能。关键字:2.0；jvascript；Ajax；客户端；服务端一、引言B/S（Browser/Server）结构即浏览器和服务器结构。它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端（Server）实现，形成所谓三层3-tier结构。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。以目前的技术看，局域网建立B/S结构的网络应用，并通过Internet/Intranet模式下数据库应用，相对易于把握、成本也是较低的。它是一次性到位的开发，能实现不同的人员，从不同的地点，以不同的接入方式（比如LAN,WAN,Internet/Intranet等）访问和操作共同的数据库；它能有效地保护数据平台和管理访问权限，服务器数据库也很安全。特别是在JAVA这样的跨平台语言出现之后，B/S架构管理软件更是方便、快捷、高效。B/S结构图如下：图1-1B/S结构图二、相关实现技术简介2.1VisualStudio20__和2.0Web应用程序基础结构将提供Windows客户端开发的瘦客户端对应物。通过显著改善的性能、工作效率和安全性，VisualStudio20__和2.0将带来简化、高性能且强大的Web开发体验。2.0将具有一组新的控件和基础结构，可简化基于Web的数据访问，并且将包含能够促进代码重用、可视化一致性以及增强美感的功能。通过使用VisualStudio20__IDE，Web应用程序开发人员将体验到工作效率方面的显著改善。在启用新的Web开发人员IDE配置文件后，VisualStudio20__将只公开与Web应用程序开发有关的功能，从而优化开发环境和用户体验。此外，新的基于目录的项目模型将消除解决方案文件的系统开销，同时通过对直接IIS枚举、FTP和文件系统访问的支持，使Web开发人员能够享受传统的基于文件系统的项目范型。对代码隐藏模型的增强消除了对由脆弱工具生成的代码的依赖，这些代码是传统意义上协调2.0Web页与其关联类文件所需的。使用不完全类，提供一个更为可靠的模型，以分隔表示标记与代码。不完全类还将使开发人员能够轻松地以内联方式编写代码，从而遵守很多Web开发人员所熟悉的模型。其他对Web开发的IDE工作效率增强功能包括：设计时验证引擎、内联CSS支持、更灵活的调试等。2.2Ajax与AjaxProAjax的全称是：Asynchronousjvascript XML。Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。Ajax包括:XHTML和CSS使用文档对象模型(DocumentObjectModel)作动态显示和交互使用XML和XSLT做数据交互和操作使用XMLHttpRequest进行异步数据接收使用jvascript将它们绑定在一起传统的web应用模型工作起来就象这样:大部分界面上的用户动作触发一个连接到Web服务器的HTTP请求。服务器完成一些处理---接收数据，处理计算，再访问其它的数据库系统，最后返回一个HTML页面到客户端。这是一个老套的模式，自采用超文本作为web使用以来，一直都这样用。通过在用户和服务器之间引入一个Ajax引擎，可以消除Web的开始-停止-开始-停止这样的交互过程.它就像增加了一层机制到程序中，使它响应更灵敏，而它的确做到了这一点。不像加载一个页面一样，在会话的开始，浏览器加载了一个Ajax引擎---采用jvascript编写并且通常在一个隐藏frame中。这个引擎负责绘制用户界面以及与服务器端通讯。Ajax引擎允许用异步的方式实现用户与程序的交互--不用等待服务器的通讯。所以用户再不不用打开一个空白窗口，看到等待光标不断的转，等待服务器完成后再响应。Ajax模型如下图：图2-1Ajax模型一个Ajax交互从一个称为XMLHttpRequest的jvascript对象开始。如同名字所暗示的，它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法（GET或POST）来处理请求，并将目标URL设置到XMLHttpRequest对象上。现在，记住Ajax如何首先处于异步处理状态？当你发送HTTP请求，你不希望浏览器挂起并等待服务器的响应，取而代之的是，你希望通过页面继续响应用户的界面交互，并在服务器响应真正到达后处理它们。要完成它，你可以向XMLHttpRequest注册一个回调函数，并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器，当服务器响应到达时，回调函数将会被调用。AjaxPro就是做为Ajax技术在dotNet框架下的实现，作者MichaelSchwarz采取了一种封装效果相当棒的技术：将客户端处理XML、事件调用方式都封装在2个jvascript文件中（AjaxPro.prototype.js和AjaxPro.core.js），同时将这2个重要文件以资源的形式编译于dll中，在处理客户端请求其自定义的.ashx文件时，返回这两个文件。2.3具体实现2.3.1建立Web项目打开VisualStudio20__，选择[文件]菜单下的“新建网站”。弹出“新建网站”窗口，在“模板”中选择“网站”、在“位置”中选择“文件系统”、在语言中选择“VisualC#”，然后选“浏览(B)…”。在弹出的“选择位置”的窗口中，选择“文件系统”，并确定保存的文件后，单击“打开”。如下图所示：图3-1新建网站2.3.2在VisualStudio20__中引入AjaxPro21、获取AjaxPro2：可以到www.schwarz-interactive.de/下载。2、在VS20__中打开刚才新建网站的“解决方案资源管理器”。鼠标右键单击根结点，在弹出的菜单中选择“添加文件夹(D)”，并在弹出的子菜单中选择“Bin(N)”。这样我们就在网站中建立一个Bin目录，主要是用于存放引用AjaxPro2的文件。3、选择VS20__的“网站”菜单下的“添加引用(R)…”，在弹出的窗口中选择“浏览”选项卡。然后找到下载并解压的AjaxPro.2.dll文件，然后单击“确定”，这样就在网站中引用了AjaxPro2。2.3.2配置Web.Config文件1、在VS20__中打开刚才新建网站的“解决方案资源管理器”。鼠标右键单击根结点，在弹出的菜单中选择“添加新项(W)…”。在弹出的窗口中，选择“模板”中的“Web配置文件”，单击“添加”按钮。这样我们就在网站中添加了一个Web.Config文件。2、在与之间插入以下代码2.3.3设计主界面1、在Default.aspx文件中添加二个Label控件、二个TextBox控件、一个Button控件，并设置相关属性如下：控件类型属性值LabelIdLbldata1Text请输入加数：LabelIdLbldata2Text请输入被加数：TextBoxIdTxtdat a1TextBoxIdTxtdata2ButtonIdbtnshowText计算并显示OnClientClickreturnshowResult();2、打开Default.aspx.cs文件（1）在Page_load（）中添加AjaxPro的声明如下：AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));目的是为了在这个页面中注册一个AjaxPro，其中typeof中“_Default”是页面类名。（2）添加calu函数：[AjaxPro.AjaxMethod]publicstringcalu(stringdata1,stringdata2){returnConvert.ToString(Convert.ToInt32(data1) Convert.ToInt32(data2));}其中[AjaxPro.AjaxMethod]的使用是声明下面calu函数是作为客户端可使用的一个接口，并且必须加上面的声明。（3）设计客户端函数showResult（）首先是验证用户是否输入数据的代码，如下所示：vardata1=document.getElementById("txtdata1").value;if(data1==""){alert("请输入加数！");returnfalse;}vardata2=document.getElementById("txtdata2").value;if(data2==""){alert("请输入被加数！");returnfalse;}然后，在客户端调用服务端的calu函数，来计算输入的二个数的和。代码如下：varresult=_Default.calu(data1,data2);（4）将结果显示在弹出的新窗口中首先，鼠标右键单击“解决方案资源管理器”根结点，在菜单中选择“添加新项（W）…”。在弹出的窗口的模板中选择“Web窗体”，名称修改为“showResult.aspx”。然后，在showResult.aspx文件中添加二个Label控件，其中一个设置“Text”属性为“计算结果为：”；另一个设置“Id”属性为“lblresult”。最后，在showResult.aspx.cs文件中的Page_load（）中添加如下代码：lblresult.Text=Request.QueryString["result"].ToString();上面主要是利用页面参数传递的方法，将Default.aspx页面计算的结果使用“result”参数传递到showResult.aspx页面显示。（5）修改函数showResult（）在函数showResult（）的最后添加一行代码如下：varretValue=showModalDialog("showResult.aspx?result=" result.value,"","dialogWidth=150px;dialogHeight=100px;help=no;status=no;")上面的一行代码，主要是以模态形式显示showResult.aspx页面，并传递一个参数“result”，这个参数的值就是上面计算的结果。2.4运行按功能键F5，即运行显示。最后结果如下图所示：图3-2运行结果三、结论通过上面的阐述，大家可以了解在VisualStudio20__中开发基于Ajax技术的客户端调用服务端的方法。随着网站的普及和计算机的发展、用户需求的复杂化，客户端与服务端之间通信技术将成为人们关注的要点。本文所介绍的程序是笔者在此方面做的一点尝试，已经调试成功。参考文献[1]施伟伟/张蓓/《征服Ajax——Web2.0快速入门与项目实践（.net）》人民邮电出版社20__年4月[2][美]阿斯利森/舒塔；金灵等译《Ajax基础教程》人民邮电出版社20__年2月作者简介：陈国才，26，男，安徽蚌埠人，助教，主要研究方向：网站/软件开发。

工作单位：辽宁机电职业技术学院信息系

邮编：118009