阿不

潜水

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  212 随笔 :: 0 文章 :: 3073 评论 :: 75 引用

在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请求时,使用与默认的传参方式即可(普通的地址栏传参方式,以用&来连接不同的参数)。

只要严格遵守这两条请求规则,就可以正确的访问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);这段代码要根据请求类型来分别设置不同的值。

阿不

posted on 2007-11-27 19:43  阿不  阅读(7153)  评论(32编辑  收藏