Ajax简易框架

    上个月写的一个简易ajax模板。也参考了一些网上的资料，本着“取之于网络，用之于网络”的原则，先将源代码贴出来，代码中有详细的注释。欢迎各种形式的讨论和指正，感谢每一位读者。

   

 

/**
 * Author:屈小勇<br/>
 * Date:2010年11月30日</br>
 * Description:Ajax通用模板</br>
 * Example:<br/><pre>
 * ----------------------------------------------------------------
 * var ajax = new Ajax("1.jsp");//var ajax = new Ajax();this.setRequestUrl("1.jsp");等效                                
 * ajax.setParams("SingleTotalSum=6000");//设置参数列表            
 * ajax.setEncodeURI(true);//设置编码为true
 * ajax.setMethod('get');//将http设置为get方法
 * ajax.setElementID("singleTotalSum");//设置DOM元素ID
 * ajax.onLoading = function() {
 *        //Do what you want to do
 *    };
 *    ajax.onLoaded = function() {
 *        //Do what you want to do
 *    };
 *    ajax.onInteractive = function() {
 *        //Do what you want to do
 *    };
 *    ajax.onCompletion = function() {
 *        //Do what you want to do
 *    };
 *    ajax.runAjax();
 * ---------------------------------------------------------------
 * </pre>
 */
function Ajax(url) {

    //失败提示信息
     var _AjaxFailedAlert = "Your browser does not support the enhanced functionality of this website\n",

    //请求的url，不包含传递参数的纯地址
     _requestUrl = url,

    //请求方法，默认为post方式
    _method = "post",

    //请求时传递的参数
    _params = "",

    //是否要编码uri字符串
    _encodeURI = true,

    //是否要动态执行服务器端返回的脚本
    _execute = false,

    //DOM对象ID
    _elementID = "",

    _responseText = "",

    _responseXML = "";

    //设置请求的url
    this.setRequestUrl = function(_url) {
        _requestUrl = _url;
    };

    //获取请求的url
    this.getRequestUrl = function() {
        return _requestUrl;
    };

    //设置http方法
    this.setMethod = function(method) {
        method = method.toLowerCase();
        if (method == 'get' || method == 'post') {
            _method = method;
        }
    };

    //获取http方法
    this.getMethod = function() {
        return _method;
    };

    //设置参数列表
    this.setParams = function(params) {
        _params = params;
    };

    //获取参数列表
    this.getParams = function() {
        return _params;
    };

    //设置是否编码
    this.setEncodeURI = function(b) {
        _encodeURI = b == true;
    };

    //获取是否编码
    this.isEncodeURI = function() {
        return _encodeURI == true;
    };

    //设置是否动态执行服务器返回的脚本
    this.setExecuteScript = function(execute) {
        _execute = execute == true;
    };

    //获取是否动态执行服务器返回的脚本
    this.isExecuteScript = function() {
        return _execute == true;
    };

    //设置DOM元素ID
    this.setElementID = function(elementID) {
        _elementID = elementID;
    };

    //获取DOM的ID
    this.getElementID = function() {
        return _elementID;
    }

    //获取responseText的值
    this.getResponseText = function() {
        return _responseText;
    };

    //获取responseXMl的值
    this.getResponseXML = function() {
        return _responseXML;
    }

    //回调函数，加载中
    this.onLoading = function() {
    };

    //回调函数，加载完成
    this.onLoaded = function() {
    };

    //回调函数，加载完成，但还需要解析相应数据
    this.onInteractive = function() {
    };

    //回调函数，加载完成，且数据解析完毕
    this.onCompletion = function() {
    };

    //创建XHR对象，IE6及以下版本的浏览器需要用ActiveXObject对象创建
    this.createXHR = function() {
        this.XHR = window.XMLHttpRequest ? new XMLHttpRequest()
                : new ActiveXObject("Microsoft.XMLHTTP");
        if (!this.XHR) {
            this.failed = true;
        }
    };

    //设置参数
    this.setVariable = function(name, value) {
        //一个name，一个value再加一个等号，至少需要3个字符
        if (_params.length < 3) {
            _params = name + "=" + value;
        } else {
            _params += "&" + name + "=" + value;
        }
    };

    //编码名值对,并返回以等号连接后的字符串结果
    this.encodeVariable = function(name, value) {
        return (encodeURIComponent(name) + "=" + encodeURIComponent(value));
    };

    //编码字符串
    this.encodeURLString = function(s) {
        varArray = s.split("&");
        for ( var i = 0; i < varArray.length; i++) {
            urlVars = varArray[i].split("=");
            if (urlVars[0].indexOf('amp;') != -1) {
                urlVars[0] = urlVars[0].substring[4];
            }
            varArray[i] = this.encodeVariable(urlVars[0], urlVars[1]);
        }
        return varArray.join("&");
    };

    //eval允许动态执行javascript
    this.runResponse = function() {
        eval(_responseText);
    };

    //运行ajax主逻辑
    this.runAjax = function(url) {
        this.responseStatus = new Array(2);
        if (this.failed && _AjaxFailedAlert) {
            alert(_AjaxFailedAlert);
        } else {
            if (url) {
                if (_params.length) {
                    this.setParams(this.getParams() + "&" + url);//_params = _params + "&" + url;
                } else {
                    _params = url;
                }
            }
            if (_encodeURI) {
                var d = new Date();
                var timeval = d.getTime();
                _params = this.encodeURLString(_params);//编码
                this.setVariable("rndval", timeval);//追加时间参数，避免浏览器缓存
            }
            if (_elementID) {
                this.elementObj = document.getElementById(_elementID);
            }
            if (this.XHR) {
                var self = this;
                if (_method == 'get') {
                    var totalURLString = _requestUrl + "?" + _params;
                    this.XHR.open(_method, totalURLString, true);
                } else {
                    this.XHR.open(_method, _requestUrl, true);
                }
                if (_method == 'post') {
                    try {
                        this.XHR.setRequestHeader('Content-Type',
                                'application/x-www-form-urlencoded');
                    } catch (e) {
                    }
                }
                this.XHR.send(_params);
                this.XHR.onreadystatechange = function() {
                    switch (self.XHR.readyState) {
                    case 1:
                        self.onLoading();
                        break;
                    case 2:
                        self.onLoaded();
                        break;
                    case 3:
                        self.onInteractive();
                        break;
                    case 4:
                        _responseText = self.XHR.responseText;
                        _responseXML = self.XHR.responseXML;
                        self.responseStatus[0] = self.XHR.status;
                        self.responseStatus[1] = self.XHR.statusText;
                        self.onCompletion();
                        if (_execute) {
                            self.runResponse();
                        }
                        if (self.elementObj) {
                            var elementNodeName = self.elementObj.nodeName;
                            elementNodeName.toLowerCase();
                            if (elementNodeName == 'input'
                                    || elementNodeName == 'select'
                                    || elementNodeName == 'option'
                                    || elementNodeName == 'textarea') {
                                self.elementObj.value = _responseText;
                            } else {
                                self.elementObj.innerHTML = _responseText;
                            }
                        }
                        _params = "";
                        break;
                    }
                };
            }
        }
    };
    this.createXHR();
}