Ext3.4 Ext.Ajax.request 的同步与异步

1、问题的引出：  在实现动态生成grid表头的需求时，需要用ajax进行同步请求，async:false参数却死活不起作用，google了好半天才发现原来ext3.x本不支持ajax的同步请求，瞬间凌乱。ext4就开始支持了。

2、ext3.4 Ext.Ajax.request的源码解读：

    其实作为一个小菜，我还不是很会阅读源码，只是能看个大概。

2.1  确认项目使用的ext版本

     在引用js的jsp页面上找引用的js文件，如果出现类似于".../ext3.4/../*.js"的东西，恭喜你，不用继续了；

     否则，找“<%@ page import="com.www.uiframe.util.UiframeUtil"%>”貌似是引用框架通用东东的语句，一般UiframeUtil.java里会有对当前页面需要引用的js文件的处理，找到为止。

2.2   找到ext3.4目录下的ext-base.js文件，

       某行处有代码如下：

       Ext.lib.Ajax = function(){ ......}

       ........

        return  asyncRequest(method || options.method || "POST", uri, cb, data);

      ............

        function asyncRequest(method, uri, callback, postData) { ......  }

     

        以上可以看出，文件中只有asyncRequest函数的定义和调用， 而没有出现syncRequest函数的定义和调用，一切都已明了，这就是为什么ext3.4 Ext.Ajax.Request只能进行Ajax的异步请求。

3、如何在ext3.4 中使用ajax进行同步请求呢？

     这个是在网上google来的，文章出处：http://reason2003.blog.163.com/blog/static/1164994692009103012317465/

      现将全文粘贴如下：

------------------------------------------------------   引用文章原文   the  beginning   --------------------------------------

Ext.Ajax.request在2.x是异步请求的，这样话在当前请求没有完成之前就不能在它的外部使用它的返回值，在下面这个表单验证中如果不是同步请求的话就有问题了，如：

var text = new Ext.form.TextField({
 fieldLabel : '名称',
 height : 23,
 width : 400,
 id : 'flowName',
 name : 'flowName',
 allowBlank : false,
 blankText : '名称不能为空',
 validateOnBlur : true,
 validationEvent : true,
 validator : function() {
  var resultValue;
  Ext.Ajax.request({
   url : '',
   sync:true,
   params : {
      name : text.getValue()
   },
   success : function(response, options) {
        var responseArray = Ext.util.JSON.decode(response.responseText);
        resultValue=responseArray.resultValue;
   }
  });
  if (resultValue!=null && resultValue!="") {
      text.invalidText = "该名称己经存在,请重新输入！";
   return false;
  } else {
   return true;
  }
 },
 anchor : '95%'
});

 

上面是通过修改ext-base.js中的Ext.lib.Ajax.request来实现同步请求：

     /**
Adding a synchronous request to the Ext asynchronous only mode of operation.

History: coded from Ext 2.2.

Additional configs.

@param {Object} options
@config {Mixed} [sync] include this for a synchronous request
*/
Ext.lib.Ajax.request = function(method, uri, cb, data, options) {
    if(options){
        var hs = options.headers;
        if(hs){
            for(var h in hs){
                if(hs.hasOwnProperty(h)){
                    this.initHeader(h, hs[h], false);
                }
            }
        }
        if(options.xmlData){
            if (!hs || !hs['Content-Type']){
                this.initHeader('Content-Type', 'text/xml', false);
            }
            method = (method ? method : (options.method ? options.method : 'POST'));
            data = options.xmlData;
        }else if(options.jsonData){
            if (!hs || !hs['Content-Type']){
                this.initHeader('Content-Type', 'application/json', false);
            }
            method = (method ? method : (options.method ? options.method : 'POST'));
            data = typeof options.jsonData == 'object' ? Ext.encode(options.jsonData) : options.jsonData;
        }
    }

    return this["sync" in options ? "syncRequest" : "asyncRequest"](method, uri, cb, data););//这句制定调用的方法，如果sync传递了就调用syncRequest， 否则调用原来的方法asyncRequest};

};

把下面这个方法加上，直接加在asyncRequest方法后面就可以，形式和asyncRequest相同,调用时如果需要同步调用加上sync:true,属性即可

/**
Synchronous request. 
 
@param {Object} method
@param {Object} uri
@param {Object} callback
@param {Object} postData
*/
Ext.lib.Ajax.syncRequest = function(method, uri, callback, postData)
{
    var o = this.getConnectionObject();

    if (!o) {
        return null;
    }
    else {
        o.conn.open(method, uri, false);

        if (this.useDefaultXhrHeader) {
            if (!this.defaultHeaders['X-Requested-With']) {
                this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
            }
        }

        if(postData && this.useDefaultHeader && (!this.hasHeaders || !this.headers['Content-Type'])){
            this.initHeader('Content-Type', this.defaultPostHeader);
        }

        if (this.hasDefaultHeaders || this.hasHeaders) {
            this.setHeader(o);
        }

        o.conn.send(postData || null);
        this.handleTransactionResponse(o, callback);
        return o;
    }
};

但是在ext3.0的源码中已经找不到Ext.lib.Ajax.syncRequest方法。

所以在ext3.0中可以这样实现同步做：

    var obj;

    var value;
    if (window.ActiveXObject) {
        obj = new ActiveXObject('Microsoft.XMLHTTP');
    } else if (window.XMLHttpRequest) {
        obj = new XMLHttpRequest();
    }
    var url = '../../servlet/TestServlet‘；

   obj.open('GET', url, false);
    obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    obj.send(null);
    value = obj.responseText;

------------------------------------------------------   引用文章原文   the  end               --------------------------------------