Ext 详解--查看文章
 
调用ASP.NET AJAX WebService
发布时间:2008-3-6

在asp.net ajax中,使客户端调用WebService变得非常的简单,而且非常有用(个人觉得这个功能是asp.net ajax的核心,很多与客户端的交互都需要这个功能来辅助实现)。那在EXT中,标准的客户端与服务器端交互,使用的是自定义的HttpHandler, 而且服务器在处理客户端提交的参数也都必须是弱类型的使用方式,也会使用带一定的不便。如果你曾经使用过Asp.net ajax调用WebService,那你肯定非常希望EXT也能像那样简单的调用WebService。

默认情况下,EXT也是可以调用WebService的,在这篇博客里已经有做介绍《ExtJS与.NET结合开发实例(Grid之批量删除篇)》。但是在调用时传入多个参数和输出JSON字符串时,就需要使用asp.net ajax WebService的方式来调用了。

能被asp.net ajax调用的WebService必须被标上System.Web.Script.Services.ScriptServiceAttribute。 根据我们的需要,我们还可以对每个WebService Method指定的它输出的序列化方式。默认情况下,使用的是JSON序列化,当然我们还是可以使用XML序列化。

通过研究asp.net ajax的WebServiceProxy类,和Fiddler观察调用WebService传往服务器的请求。不难发现,asp.net ajax调用WebService普通的请求唯一的不同就在于它在Request Header传递的Content-Type值是application/json;utf-8。而这也是EXT调用asp.net ajax WebService的关键,我们只需要在请求的头部的Content-Type传这个值就行了(注意,一定只能是这个值,如果加上其它的字符串就无法调用)。

向WebService传递的参数也必须有一定规则。使用GET和POST请求,分别有不同的传参方式。如果使用POST请求,需要将用户传递参数 当成对象序列化成JSON串,而当是GET请求时,使用与EXT默认的传参方式即可(普通的地址栏传参方式,以用&来连接不同的参数)。

只要严格遵守这两条请求规则,就可以正确的访问asp.net ajax WebService。

新建一个Ext.data.EnhancedConnection类,从Ext.data.Connection继承下来,

Ext.data.EnhancedConnection = function(config){   

 Ext.apply(this,config);   

 Ext.data.EnhancedConnection.superclass.constructor.call(this);   

 }

重写它的request方法如下:

Ext.extend(Ext.data.EnhancedConnection,Ext.data.Connection,{
  
 webServiceHeaders : {'Content-Type': 'application/json;utf-8'},
   
request : function(o){ 
     
 if(this.fireEvent("beforerequest", this, o) !== false){
 
   var p = o.params;

       var hs = o.headers;
 
       var url = o.url || this.url;
 
       if(typeof url == 'function'){ 

              url = url.call(o.scope||window, o); 

          }    
    
       var method = o.method||this.method||(p ? "POST" : "GET"); 

      //是否为WebService          
      if(!o.isWebService){
 
              //如果不是WebService请求,不改变EXT的请求行为 
             
      if(typeof p == "function"){ 
               
      p = p.call(o.scope||window, o);  
          
        }  
            
      if(typeof p == "object"){
           
       p = Ext.urlEncode(p);

               }
            
      if(this.extraParams){
              
      var extras = Ext.urlEncode(this.extraParams); 
        
         p = p ? (p + '&' + extras) : extras;
      
        }
              
      if(o.form){
          
      var form = Ext.getDom(o.form);  
         
      url = url || form.action;
               
      var enctype = form.getAttribute("enctype");
     
          if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){ 

                return this.doFormUpload(o, p, url);
                
                       }                  
      var f = Ext.lib.Ajax.serializeForm(form); 
 
                p = p ? (p + '&' + f) : f; 
     
       } 
                           
     if(this.defaultHeaders){
      
            hs = Ext.apply(hs || {}, this.defaultHeaders); 
    
             if(!o.headers){
                  
                    o.headers = hs; 
               
                }              
            }             
     if(method == 'GET' && (this.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
 
                  url += (url.indexOf('?') != -1 ? '&' : '?') + '_dc=' + (new Date().getTime());
           
              } 
                         
     Ext.lib.Ajax.setDefaultPostHeader(true); 
         
     }
         
 else {
            
  //如果有指定WebService方法名称

      if(o.methodName){
  
                url = url + "/" + o.methodName;  
           
                  }              
      if(typeof p == "object"){
  
        //使用不同的请求方式,使用不同的传参方式。 
           if(method == 'GET') { 
                      p = Ext.urlEncode(p);
       
                    }
                
            else{ 
                 
            p = Ext.util.JSON.encode(p);
       
            } 
              }
                           
   hs = Ext.apply(hs || {},this.webServiceHeaders);
            
  if(!o.headers){ 
          
       o.headers = hs;
          
     }
           
   Ext.lib.Ajax.setDefaultPostHeader(false);
     
     }
         
 var cb = { 
     
       success: this.handleResponse,  
      
       failure: this.handleFailure,
          
       scope: this,
              
       argument: {options: o}, 
        
       timeout : this.timeout  
      
    }
                     
 if((method == 'GET' && p) || o.xmlData || o.jsonData){ 
  
               url += (url.indexOf('?') != -1 ? '&' : '?') + p; 
    
                p = '';       
    } 
        
 if(typeof o.autoAbort == 'boolean'){ 

               if(o.autoAbort){ 
     
            this.abort();            
   }           
}
else if(this.autoAbort !== false){ 

              this.abort();        
   }
                  
   this.transId = Ext.lib.Ajax.request(method, url, cb, p, o);
   
       return this.transId;
     
 }else{        
   Ext.callback(o.callback, o.scope, [o, null, null]); 
          return null;      
     }                  
  }
});

 

用这个新定义的类来替代原来的Ext.Ajax 对象,但是Ext.lib.Ajax.setDefaultPostHeader(false);是一定不能少的。否则在请求时都会在Content- Type加上“application/x-www-form-urlencoded”,这样就会导致不能正常请求WebService。

  

Ext.Ajax = new Ext.data.EnhancedConnection({
   autoAbort : false,
 serializeForm :
function(form){  
     return Ext.lib.Ajax.serializeForm(form);
   }});

 

 

通过这样的扩展后,在使用Ext.Ajax.Requst(o)时,只要传入的参数o中,增加一个isWebService来标识它是请求WebService的就可以访问了。也可以像这样使用DataStore来请求WebService:

 

Ext.data.WebServiceStore = function(){  

 Ext.data.WebServiceStore.superclass.constructor.call(this,{

        //url:'Services/WebService.asmx/GetUsers',  
     
 proxy : new Ext.data.HttpProxy({url:'Services/WebService.asmx/GetUsers',isWebService : true}),  

      // create reader that reads the Topic records   
   
  reader: new  Ext.data.UserJsonReader() 

   }) }

Ext.extend(Ext.data.WebServiceStore, Ext.data.Store);

 

 



 [Ext 详解]标准布局类:1.ContainerLayout容器布局 (myext整理,06-21)
    面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持,主要包括如下10种:  &……

 [Ext 详解]标准布局类:8.ColumnLayout列布局 (myext整理,06-27)
8  ColumnLayout列布局    Ext.layout.ColumnLayout对应面板布局layout配置项的名称为column。这是一种多列风格的布局样式,每一列的宽度都可以根据百分比或固定值来进行设置,高度允许根据内容进行变化,它支持一个特殊的……

推荐文章 [Ext 详解]面板Panel:2.Ext.Panel的主要功能 (myext整理,06-10)
1.2  Ext.Panel的主要功能     上节介绍了ExtJS面板的主要表现形式,接下来将介绍面板组件的主要配置项及常用方法,这些配置项及方法将在后面的示例中用到,可以把这部分内容作为后续章节的铺垫,进行快速的浏览,Ext.Panel主要配置项目如表5-……

 [Ext 详解]ExtJs中演示如何使用自定义事件 (myext整理,03-21)
用Ext定义了一个更新文章或添加文章的窗体,在文章列表Grid中,监听了当文章保存后的事件并处理。以下代码定义了一个用于更新文章或添加文章的窗体:Code<!--Code highlighting produced by Actipro CodeHighlighter (freeware)ht……

 [Ext 详解]Ext的Menu菜单 (未知,10-07)
在桌面程序gui开发中,menu是我们所经常使用的组件之一,它为用户提供了便利的程序功能选择项;而在web开发中,如何制作menu菜单效果一直是个很棘手的问题,如何让菜单通用,如何令菜单响应事件都需要我们自己动手来完成。所幸Ext也为我们提供了Menu组件,以Ext进行开发时,我们的不必要工作量将大……

 


©2008 MyExt.cn
本站文章来自互联网,仅供学习和研究使用,如有版权问题,请发送Email:myext@126.com.