使用localXHR.js让ExtJS docs可以在本地浏览

使用localXHR.js让ExtJS docs可以在本地浏览

      我们在使用ext/docs目录下的文档时报一些js的错误，导致我们不能正常浏览使用，这时我们使用localXHR.js这样一个文件来支持本地使用ajax，使用方法如下：

      下载localXHR.js放在docs目录下，然后在index.html中加入<script src="./localXHR.js"></script>,注意要将该文件的引入放在extall.js后面。

    

localXHR.js文件源码如下：

Ext.apply(Ext.lib.Ajax, {
  forceActiveX: false,
  createXhrObject: function(transactionId)
  {
    var obj, http;
    try {
      if (Ext.isIE7 && !! this.forceActiveX) { throw("IE7forceActiveX"); }
      http = new XMLHttpRequest();
      obj = { conn:http, tId:transactionId };
    }
    catch (e) {
      for (var i = 0; i < this.activeX.length; ++i) {
        try {
          http = new ActiveXObject(this.activeX[i]);
          obj = { conn:http, tId:transactionId };
          break;
        }
        catch(e) {
        }
      }
    }
    finally
    {
      return obj;
    }
  },
  getHttpStatus: function(reqObj) {
    var statObj = {
      status: 0,
      statusText: '',
      isError: false,
      isLocal: false,
      isOK: false
    };
    try {
      if (! reqObj) throw('noobj');
      statObj.status = reqObj.status || 0;
      statObj.isLocal = !reqObj.status && location.protocol == "file:" ||
        Ext.isSafari && reqObj.status == undefined;
      statObj.statusText = reqObj.statusText || '';
      statObj.isOK = (statObj.isLocal ||
        (statObj.status > 199 && statObj.status < 300) ||
        statObj.status == 304);
    } catch(e) { statObj.isError = true; } //status may not avail/valid yet.
    return statObj;
  },
  handleTransactionResponse: function(o, callback, isAbort) {
    var responseObject;
    callback = callback || {};
    o.status = this.getHttpStatus(o.conn);
    if (! o.status.isError) {
      /* create and enhance the response with proper status and XMLDOM if necessary */
      responseObject = this.createResponseObject(o, callback.argument);
    }
    if(o.status.isError){ /* checked again in case exception was raised - ActiveX was disabled during XML-DOM creation? */
      responseObject = this.createExceptionObject(o.tId, callback.argument, (isAbort ? isAbort : false));
    }
    if (o.status.isOK && !o.status.isError) {
      if (callback.success) {
        if (!callback.scope) {
          callback.success(responseObject);
        }
        else {
          callback.success.apply(callback.scope, [responseObject]);
        }
      }
    } else {
      if (callback.failure) {
        if (! callback.scope) {
          callback.failure(responseObject);
        }
        else {
          callback.failure.apply(callback.scope, [responseObject]);
        }
      }
    }
    this.releaseObject(o);
    responseObject = null;
  },
  createResponseObject: function(o, callbackArg) {
    var obj = {};
    var headerObj = {};
    try {
      var headerStr = o.conn.getAllResponseHeaders();
      var header = headerStr.split('\n');
      for (var i = 0; i < header.length; i++) {
        var delimitPos = header[i].indexOf(':');
        if (delimitPos != -1) {
          headerObj[header[i].substring(0, delimitPos)] = header[i].substring(delimitPos + 2);
        }
      }
    }
    catch(e) {
    }
    obj.tId = o.tId;
    obj.status = o.status.status;
    obj.statusText = o.status.statusText;
    obj.getResponseHeader = headerObj;
    obj.getAllResponseHeaders = headerStr;
    obj.responseText = o.conn.responseText;
    obj.responseXML = o.conn.responseXML;
    if (o.status.isLocal) {
      o.status.isOK = ((obj.status = o.status.status = (!!obj.responseText.length)?200:404) == 200);
      if (o.status.isOK && (!obj.responseXML || obj.responseXML.childNodes.length == 0)) {
        var xdoc = null;
        try {   //ActiveX may be disabled
          if (typeof(DOMParser) == 'undefined') {
            xdoc = new ActiveXObject("Microsoft.XMLDOM");
            xdoc.async = "false";
            xdoc.loadXML(obj.responseText);
          } else {
            var domParser = new DOMParser();
            xdoc = domParser.parseFromString(obj.responseText, 'application/xml');
            domParser = null;
          }
        } catch(ex) {
          o.status.isError = true;
        }
     
        obj.responseXML = xdoc;
     
        if (xdoc && typeof (obj.getResponseHeader['Content-Type']) == 'undefined' &&
          !! xdoc.childNodes.length) {  
            /* Got valid nodes? then set the response header */
            obj.getResponseHeader['Content-Type'] == 'text/xml';
        }
      }
    }
    if (typeof callbackArg !== undefined) {
      obj.argument = callbackArg;
    }
    return obj;
  },
  asyncRequest: function(method, uri, callback, postData) {
    var o = this.getConnectionObject();
    if (! o) {
      return null;
    } else {
      try {
        o.conn.open(method, uri, true);
      } catch(ex) {
        this.handleTransactionResponse(o, callback);
        return o;
      }
      if (this.useDefaultXhrHeader) {
        if (! this.defaultHeaders['X-Requested-With']) {
          this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
        }
      }
      if (postData && this.useDefaultHeader) {
        this.initHeader('Content-Type', this.defaultPostHeader);
      }
      if (this.hasDefaultHeaders || this.hasHeaders) {
        this.setHeader(o);
      }
      this.handleReadyState(o, callback);
      try { o.conn.send(postData || null);
      } catch(ex) { this.handleTransactionResponse(o, callback); }
      return o;
    }
  }
});

Ext.lib.Ajax.forceActiveX = (document.location.protocol == 'file:'); /* or other true/false mechanism */

评论

4 楼 wilhard 2014-07-27  

需要HTTP服务器才可以

3 楼 wmj007 2012-05-29  

wmj007 写道

我使用这个方法,文件配置好后,我直接打开index.html一直是加载状态,怎么回事?

我只能把这个部署到tomcat才可以,请指教

2 楼 wmj007 2012-05-29  

我使用这个方法,文件配置好后,我直接打开index.html一直是加载状态,怎么回事?

1 楼 laitaogood 2009-02-26  

由于localXHR强行修改了响应状体，以此使得EXT可以继续执行下去。
那是否可以这样认为：设计一定的数据结构用文件存储，这样就可以不涉及后台而完成某些小应用。因为在浏览器解释执行的JS可以去修改本地的文件。

我的一点设想，呵呵。