EXT调用ASP.NET AJAX WebService

在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);
  
  

Updated 2007/11/29 : Ext.lib.Ajax.setDefaultPostHeader(false);这段代码要根据请求类型来分别设置不同的值。

阿不