当前位置: 代码迷 >> Ajax >> ajax步骤
  详细解决方案

ajax步骤

热度:633   发布时间:2012-08-13 13:21:53.0
ajax方法
var Ajax = (function () {
    //XMLHttpRequest对象
    var _xMLHttpRequest = null,
            _funData = {/*私有方法所需的全局变量*/
                readyState: 1
            },
            _fun = {/*私有方法*/
                sendArguments: function (d) {
                    if (typeof d === "object" && d != null) {
                        var _d = [];
                        for (var i in d) {
                            _d.push(encodeURIComponent(i) + "=" + encodeURIComponent(d[i]));
                        }
                        return _d.join('&');
                    }
                    return null;
                },
                createXMLHttpRequest: function () {/*创建XMLHttpRequest*/
                    if (!_xMLHttpRequest) {
                        if (XMLHttpRequest) {
                            _xMLHttpRequest = new XMLHttpRequest();
                        }
                        else {
                            if (ActiveXObject) {
                                try {
                                    _xMLHttpRequest = new ActiveXObject("Msxm12.XMLHTTP");
                                }
                                catch (e) {
                                    _xMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                                }
                            }
                        }
                        return _xMLHttpRequest;
                    }
                    else {
                        _fun.createXMLHttpRequest = function () {
                            return _xMLHttpRequest;
                        }
                    }

                },
                extend: function () {/*递归合并对象*/
                    var i = arguments.length;
                    if (i > 0 || typeof arguments[0] !== "object") {
                        var _o = {},
                        j = 1;
                        for (; j < i; j++) {
                            if (typeof arguments[j] === "object") {
                                for (var _i in arguments[j]) {
                                    arguments[0][_i] = arguments[j][_i];
                                }
                            }
                        }
                    }
                    return arguments[0];
                },
                onreadystatechangeData: [/*监控执行过程函数集合*/
                     function () {//readyState=0
                         _funData.readyState = 1;
                         $("body").append("正在创建Ajax对象<br/>");
                     },
                     function () {//readyState=1
                         _funData.readyState = 2;
                         $("body").append("readyState=“" + _xMLHttpRequest.readyState + "”Ajax对象创建完成!等待open......<br/>");
                     },
                     function () {//readyState=2
                         _funData.readyState = 3;
                         $("body").append("readyState=“" + _xMLHttpRequest.readyState + "”open已发送,等待请求响应<br/>");
                     },
                     function () {//readyState=3
                         _funData.readyState = 4;
                         $("body").append("readyState=“" + _xMLHttpRequest.readyState + "”正在接受响应数据,等待完成<br/>");
                     },
                     function () {//readyState=4
                         _funData.readyState = 0;
                         var responseText = _xMLHttpRequest.responseText;
                         if (_xMLHttpRequest.status === 200) {
                             $("body").append("readyState=“" + _xMLHttpRequest.readyState + "”响应完成,执行CallBack<br/>");
                             if (_data.success != null) {
                                 _data.success(responseText);
                             }
                         } else {
                             $("body").append("readyState=“" + _xMLHttpRequest.readyState + "”status=“" + _xMLHttpRequest.status + "”响应完成,但是发生了异常!<br/>");
                             if (_data.error != null) {
                                 _data.error(responseText);
                             }
                         }
                     }
                 ],
                onreadystatechange: function () {/*readyState状态改变触发事件*/
                    /*
                    存在执行过程中每个状态的处理函数
                    并且确保每个状态只执行一次处理函数(用于兼容状态3在不同浏览器下 响应次数不同,比如IE下只会响应1次状态3,而FF会根据数据量执行多次)
                    */
                    //alert(_xMLHttpRequest.readyState + "+" + _funData.readyState)
                    if (_fun.onreadystatechangeData[_xMLHttpRequest.readyState] && _xMLHttpRequest.readyState === _funData.readyState) {
                        _fun.onreadystatechangeData[_xMLHttpRequest.readyState].call(this);
                    }
                },
                ajax: function () {/*提供给接口的方法*/
                    var fun = _fun, data = _data;
                    fun.extend(data, arguments[0]);
                    var _t = data.type.toLocaleLowerCase();
                    if (!(_t === "get" || _t === "post" || _t === "head")) {
                        data.type = "get";
                    }
                    this.XMLHttpRequest = _fun.createXMLHttpRequest();
                    this.XMLHttpRequest.onreadystatechange = fun.onreadystatechange;
                    var url = data.url;
                    if (data.type === "get") {
                        url = url + (url.indexOf('?') > 0 ? "&" : "?") + fun.sendArguments(data.data);
                        data.data = null;
                    }
                    this.XMLHttpRequest.open(data.type, url, true);
                    this.XMLHttpRequest.setRequestHeader("Content-Type", "text/x-www-form-urlencoded");
                    this.XMLHttpRequest.send(fun.sendArguments(data.data));

                }
            },
             _data = {/*参数*/
                 url: null,
                 type: "get",
                 data: null,
                 dataType: "json",
                 success: null,
                 error: null
             };
    return _fun.ajax;
})();

使用方式
Ajax({
            url: "/Test.aspx?type=a&a=b",
            type: "get",
            data: { a: 1, b: 2 },
            success: function (msg) {
                alert(msg)
            }
        })


有什么地方错误的请回复
  相关解决方案