| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 6505 人关注过本帖, 1 人收藏
标题:JavaScript与Web Service组合实现无刷新交互
只看楼主 加入收藏
beniao
Rank: 2
等 级:新手上路
威 望:4
帖 子:367
专家分:2
注 册:2004-12-17
收藏(1)
 问题点数:0 回复次数:17 
JavaScript与Web Service组合实现无刷新交互
在.NET里,客户端与服务端进行数据交互我想大多数朋友都遇到过这样的问题,语言不同,又怎么来实现交互呢.客户端的 JavaScript是弱类型语言,服务端是强类型语言(如:C#,,VC++,J#等).两个不同语言之间的交互是不是要借助于别的东西呢.我在这里可以告诉大家的是:答案不一定,但是借助别的东西的话是肯定可以达到数据交互的.比如 AJAX框架他就支持.下面我将给大家简单介绍下.
我在这里举一个放大层(div)的示例来说明:

    先建立一个 AJAX项目(前提是你电脑上必须先安装 AJAX框架),可以到http://ajax.去下载.
    首先我门来定义一个类: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该怎么定义呢?
我门建立一个窗体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来看看就清楚.  
需要源代码的朋友下面留言.!!!!!!!!
  汗.......不知道这里怎么上传文件供下载.

本问只是 AJAX的一篇基础型的文章,不过我可是用心在写,用心在不停的敲打键盘哟.强烈要求加精设原创.
搜索更多相关主题的帖子: Service JavaScript Web 交互 
2008-03-18 22:04
青格儿
Rank: 4
等 级:贵宾
威 望:11
帖 子:698
专家分:20
注 册:2007-7-31
收藏
得分:0 
呵呵,顶一下,ajax下在学习中。
传我一份demo吧!
QQ:185548111
邮箱:185548111@
先谢谢了。
2008-03-19 09:58
beniao
Rank: 2
等 级:新手上路
威 望:4
帖 子:367
专家分:2
注 册:2004-12-17
收藏
得分:0 
回复 2# 的帖子
请查收文件
 已经发给你e-mail里

博客:http://
2008-03-19 13:46
beniao
Rank: 2
等 级:新手上路
威 望:4
帖 子:367
专家分:2
注 册:2004-12-17
收藏
得分:0 
JavaScript与Web Service组合实现无刷新交互
JavaScript与Web Service组合实现无刷新交互(扩展)已经发布,有兴趣的朋友可以看看.JavaScript通过Web Service怎么实现与数据库通信的.

博客:http://
2008-03-20 01:25
lxd824
Rank: 1
等 级:新手上路
帖 子:135
专家分:0
注 册:2007-4-21
收藏
得分:0 
哥们,也给我一份吧,谢谢!
c86617846@
2008-03-21 15:26
loveling
Rank: 1
等 级:新手上路
帖 子:51
专家分:0
注 册:2007-10-19
收藏
得分:0 
我也要  给我也发一个吧 找了好久了 梅找到好的demo 谢谢了   
loveyoulizhao@

我的邮箱:loveyoulizhao@
2008-03-24 09:27
sam0802
Rank: 1
等 级:新手上路
帖 子:41
专家分:0
注 册:2006-7-29
收藏
得分:0 
值得学习

2008-04-11 11:00
jalonlovesja
Rank: 5Rank: 5
来 自:湖南邵阳
等 级:职业侠客
帖 子:292
专家分:371
注 册:2008-2-19
收藏
得分:0 
好东西就是拿来大家一起分享的,我顶.
2008-04-11 13:42
论坛元老
Rank: 1
等 级:新手上路
帖 子:812
专家分:0
注 册:2008-3-31
收藏
得分:0 
呵呵,顶一下,ajax下在学习中。
传我一份demo吧!
QQ:185548111
邮箱:185548111@
先谢谢了。

怎么不可以用Discuz代码呢!
2008-04-19 19:06
ts88
Rank: 1
等 级:新手上路
帖 子:7
专家分:0
注 册:2008-3-3
收藏
得分:0 
也传我一份吧!我也在学习中..........
2008-04-20 10:50
快速回复:JavaScript与Web Service组合实现无刷新交互
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.018481 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved