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

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

评论总数：0 条 [ 查看全部 ] 网友评论