zoukankan      html  css  js  c++  java
  • 引用 extJs 2.1学习笔记(通信篇)

    字号:    

    引用

    伯平extJs 2.1学习笔记(通信篇)

      javascript通过XHR调用WebService。两个问题必须解决:

      一、如何传值给WebService,有什么格式要求没有?

      二、如何接收从WebService传过来的结果?

      此二者我辈不能不察也。asp.net的WebService默认是序列化成json格式的,所以,我们在客户端传值时,最好用json传,反映到ExtJs中。就是Ext.Ajax.request({url:'xxxx/method',jsonData:{paramName:value,……},method:'post',success:function(response,options){……}})。这是在ExtJs中进行异步请求的通式。红色部分就是要传的值了。要注意的是,paramName必须与服务器端的那些参数名相同,不然,WebService怎么晓得你传过去的值是给哪个参数的呢?这是个约定。

      下面来研究一下传值的情况:

      一、如果传、收数值类型、整型、数组类型

      这个毫无悬念,只要调用Ext.util.JSON.decode(response.responseText).d就可以取出来。如果是数组,那么很简单:Ext.util.JSON.decode(response.responseText).d[x]

      二、如果传、收的是日期类型

      传过去没什么问题,但是收过来的时候就麻烦了。我试了好久才研究出来。像上面通过:Ext.util.JSON.decode(response.responseText).d得到的是一个字符串,这个字符串的结构一般是:/Date(1212756402000)/。那个数值据说是UTC时间,我把它取出来传到Date里面来构造日期,结果得到了一个1970的某日,郁闷,事实上应当是2008年6月5日才对。突然,我灵光一闪,asp.net为什么要在数值外面加个Date()呢,写了如下表达式,结果成功了:

      eval("new "+eval("/Date(1212756402000)/").source)

      结果为:Fri Jun 06 2008 20:46:42 GMT+0800

      正确无误了。eval真是一个好东西啊。

      三、如果传、收的是集合

      对于客户端来说,集合有两种形式,呵呵,这个是在总结JavaScript哦:

      1.数组array[x]

      2.对象成员object.xxxx或object[xxxx]

      传过去很简单,没有悬念。无论WebService中的参数类型为数组还是List<xxxx>。对应在这边都是数组。如果是Dictionary<X,Y>。那么它对应的就是:object了(上面的第二种情况)。

      还是给个代码出来吧,不然,说服力还是不够的:

       Ext.get("btnList").on("click",function(){
            
             var arr=new Array();
             for(var i=1;i<=10;i++) arr.push(i);
            
             Ext.Ajax.request({url:'MyService.asmx/fun5',
                               jsonData:{list:arr},
                               method:'post',
                               success:function(response,options){
                                    var result=Ext.util.JSON.decode(response.responseText);
                               }});
        });

      服务器端WebService中的方法为:

        [WebMethod]
        public List<string> fun5(List<int> list)
        {
            List<string> list2 = new List<string>();
            foreach (int i in list)
                list2.Add("值为:" + i);

            return list2;
        }

      最后result.d的值为:

    ["值为:1", "值为:2", "值为:3", "值为:4", "值为:5", "值为:6", "值为:7", "值为:8", "值为:9", "值为:10"]
      上面要注意的是:list这个原始参数是不能修改原有值,但是,能在原有值的基础上增加成员。这个问题比较奇怪,我试着修改原有成员,结果,错误希奇古怪。什么“Ext is not defined”。事实上Ext不可能没被定义的。
      四、如果传、收的值为一个自定义类的引用时
      这是个普遍性的问题,广泛存在着。本人定义了一个简单的类来作实验:
            public class Cat
            {
                public Cat() { }
                public string Name { get; set; }
                public string Desc { get; set; }
                public int Price { get; set; }
                public int Weight { get; set; }
            }
      客户端JavaScript代码:
            function Cat(){
                this.Name='';
                this.Desc='';
                this.Price=50;
                this.Weight=1;
            }
           Ext.get("btnCat").on("click",function(){
                
                 var cat=new Cat();
                 cat.Name="加菲猫";
                 cat.Weight=12;
                 cat.Price=100;
                
                 Ext.Ajax.request({url:'MyService.asmx/fun6',
                                   jsonData:{cat:cat},
                                   method:'post',
                                   success:function(response,options){
                                        var result=Ext.util.JSON.decode(response.responseText);
                                   }});
            });
      服务器端WebService里面的方法:
            [WebMethod]
            public Cat fun6(Cat cat)
            {
                cat.Desc = cat.Desc + "加个随机数字吧:"+(new Random()).Next(1,20);
                return cat;
            }
      实验结果result.d的值为:
      引用 extJs 2.1学习笔记(通信篇) - 亿万星辰 - 亿万星辰的博客
      注意:这个结果多了个东西:__type。这是asp.net的webservice在序列化返回值时加上去的。这个成员在post到服务器时并没有。
      这个中间有个关键,那就是在客户端也要用JavaScript定义一个Cat类.当然,也可以不定义.这个问题留待各位去研究一下.
      五、传、收DataTable对象
      尽管我现在搞N层结构,不用传DataTable了。但是,相信许多兄弟还要直接来传它。这是个经典问题。
      不好意思啊。我实验了,结果response.responseText里面返回了一大通的错误信息,说不能把DataTable序列化。这下子没有什么直接的办法的,除非自己写个类来序列化DataTable。这个需要研究一下了。
      六、要调用的WebService的方法没有参数,但是有返回值时
      这个时候要小心了,要注意几个问题:
      1.在Ext.Ajax.request({……})中不要加jsonData这个成员了。也不要写成:jsonData:{}。这会引发服务器端序列化错误。
      2.在Ext.Ajax.request({……})中加上一条:headers:{'Content-Type':'application/json; charset=utf-8'},否则,返回值是xml,而不是json字符串了。
  • 相关阅读:
    今天的雪糕格外好吃!
    定了!对于本周四(7.16日)抽奖活动取消简要说明,新抽奖活动暂定下周三(7.22日)...
    你喜欢什么样的课堂?
    无题
    属于你们的“礼仪小课堂”
    红歌合唱之团结就是力量
    《此生未完成》痛句摘录(一)
    端午前夕的班级小游戏
    排序>插入排序 小强斋
    排序>交换排序 小强斋
  • 原文地址:https://www.cnblogs.com/luluping/p/1558241.html
Copyright © 2011-2022 走看看