JavaScript与Web Service组合实现无刷新交互


 本文示例源代码或素材下载

  在.NET里,客户端与服务端进行数据交互我想大多数朋友都遇到过这样的问题,语言不同,又怎么来实现交互呢.客户端的 JavaScript是弱类型语言,服务端是强类型语言(如:C#,VB.NET,VC++,J#等).两个不同语言之间的交互是不是要借助于别的东西呢.我在这里可以告诉大家的是:答案不一定,但是借助别的东西的话是肯定可以达到数据交互的.比如ASP.NET AJAX框架他就支持.下面我将给大家简单介绍下.

  我在这里举一个放大层(div)的示例来说明:

  先建立一个ASP.NET AJAX项目(前提是你电脑上必须先安装ASP.NET AJAX框架),可以到http://ajax.asp.net去下载.

  首先我门来定义一个类:arr,提供两个成员分别为height,width,一个构造方法arr(int height,int width).

public class arr
  {
    private int height;
    public int Height
    {
     get { return height; }
     set { height = value; }
    }
  
    private int width;
    public int Width
    {
      get { return width; }
      set { width = value; }
    }
  
    public arr(int h, int w)
    {
      this.Height = h;
      this.width = w;
    }
  }

  用面向对象来说的话arr现在可以看作为一个对象,而height,width则是arr对象的两个成员,因为我门为其他定义了属性(get,set),所以Height,Width则是arr对象的两个属性.这里说我想大家应该可以看懂吧.

  接着我门来建立一个Web Service(别告诉我你不知道Web Service是什么?):WebService.asmx,因为此Web Service要提供给客户端调用,我门必须为其提供[ScriptService],即:

[ScriptService] //
  public class WebService : System.Web.Services.WebService
  {
    //..
  }

  然后我门在Web Service里定义一个方法wh(int height,int width),并为其提供两个参数,既图片的高度和宽度.

  [WebMethod] //为方法提供[WebMethod]以让外部可以调用.

  public arr wh(int height, int width)
  {
    arr ar = new arr(height, width);
    return ar;
  }

  到这里,我门的服务器就准备得差不多了,现在我门来看看客户端的JavaScript该怎么定义呢?

  我门建立一个ASP.NET窗体Default.aspx,并从工具箱里拽一个ScriptManager控件在这窗体上.然后转到html视图.编辑该控件的html源,该攻坚的ServiceReference 后的Path指向前面我门建立的Web Service,后面的InlineScript可以不要,不熟悉的朋友可以直接不管他,他的作用是在客户端显示生成的代理,详细见下:

    <asp:ScriptManager ID="ScriptManager1" runat="server">
     <Services>
       <asp:ServiceReference Path="WebService.asmx" InlineScript="true" />
     </Services>
    </asp:ScriptManager>

  接着我门写一个div,并为其设置好背景图片,这样做的好处是当div很小的时候 就只能显示一小块图片,当div的大小改变后则显示图片就相对要大写,因为是设置的背景图片,背景图片为随着容器的大小自动适宜扩充.

<div style="width: 100px; height: 100px;background-color:red;background-image:url(1.jpg);" id="ss">

  学习过AJAX的朋友我想都知道,他的执行:发送请求--响应请求--返回消息--处理消息.

  那下面我门就来着手写客户端的JavaScript来调用Web Service,向其发送请求并处理返回数据.

  <script type="text/javascript">
  function sendRequest()
  {
    WebService.wh(300,300,CallBack);//这里是指调用WebService下的wh()方法,CallBack为方法的回调函数
  }
  function CallBack(result)
  {
    var ss=$get("ss");  //$get()为ajax里的关键字缩写,他等同于document.getElementById()方法
    ss.style.height=result.Height;
    ss.style.width=result.Width;
  }
  </script>

  接着我门来调用JavaScript的sendRequest()向服务端的Web Service发送请求.

<input id="Button1" type="button" value="button" onclick="sendRequest();" />

  好了,到这里我门的服务端-客户端代码都实现了.我门来运行下试试.

  当然个编辑器里是不提供运行功能的哈,具体的效果大家可以照着我上述做个demo来看看就清楚.



相关阅读:
CSS中的text-shadow属性
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Linux系统的Nagios网络管理模块的实现
IE8 下的Js错误HTML Parsing Error...
asp.net 水晶报表隔行换色实现方法
Linux高手进阶 嵌入式系统设计开发过程
删除windows中隐藏设备的方法
CSS制作网页经验:清除网页浮动
使用FSO修改文件夹的名称实现文件转移防盗链
将XHTML CSS页面转换为打印机页面
kernel-headers-2.2.1-4
HTML5教程:Canvas标签绘制径向渐变图形
Linux操作系统上两种新的SWAP空间创建方法
jQuery的实现原理的模拟代码 -5 Ajax
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 教学评价心得体会 品味长城 第一次捉鱼作文 我与小狗作文900字 14年愚人节必备短信 小学六年级作文1200字:老师,你听我说! 勤奋好学的人物典故 早起的鸟儿有虫吃作文 小鲤鱼300字 读《我的教育理想》心得体会 妈妈,我想对你说作文350字 我的寂寞丝路作文200字 红红火火过元宵 三八妇女节----妈妈们的节日 文昌友情链接 不是所有的人都能守望一生 国印兄之家与书房的随感 公开招聘村文书等岗位人员工作方案 诗二首作文900字 我喜爱的卡通人物“瓦力”200字 描写梧桐的句子,描写梧桐树优美段落 夏夜之雨作文 学院社团年终工作总结 原创[七绝]路上吟 2016辞职报告范文(最新版) 2013国庆节祝福语送情人 说说”当回事儿“ 爱情说说大全-愿你始终相信爱情,不受世事桎锢,找到一个不是“ 零食王国作文700字 小鱼和大海作文2800字 梦流年,黯然殇 其实,很多女孩子并不知道…… 小学三年级作文300字:赛尔号第一章加的加88216972 我最亲近的人作文200字 2016林场副场长述职述廉报告 党员批评与自我批评发言稿材料 常青的歌 大嘴巴———妈妈 再见,人间四月天 难忘的中秋节450字 员工保证书的格式范文 梦里·樱花逝作文1400字 我的小铁树发芽了 把自己藏起来 给远方朋友的一封信350字 熟悉的阳光 我的小鸟作文900字 爱情,你姓什么 日本“购岛”闹剧,引发中国人愤慨!号召全中国人抵制日货! 庆六一儿童节总结

Copyright © 2016 phpStudy |