EXT调用ASP.NET AJAX WebService

核心提示： 只要严格遵守这两条请求规则，就可以正确的访问asp.net ajax WebService，EXT调用ASP.NET AJAX WebService(2)，新建一个Ext.data.EnhancedConnection类，从Ext.data.Connection继承下来，只要传入的参数o中

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