回忆Ajax ๑乛◡乛๑


东西越多,记不完,也记不住,笔记是最好的记忆了。

回顾以前的ajax的写法,简单封装一个ajax。

//data = {
    //    url: "url",
    //    method: "post/get",
    //    async: "true/false",
    //    params: { key: value },
    //    success: fn,
    //    error: fn
    //};
    function Ajax(data) {
        //默认参数
        var _data = {
            method: "post",
            async: "true",
            params: '',
            success: function (respose) { },
            error: function (respose) { }
        }
        //重写默认参数
        for (var key in data) {
            _data[key] = data[key];
        }

        //处理数据
        if (_data.params) {
            var paramsArr = [];
            for (var pkey in _data.params) {
                paramsArr.push(pkey + '=' + _data.params[pkey]);
            }
            if (_data.method.toUpperCase() == 'GET') {
                _data.url += (_data.url.indexOf('?') > 0 ? '' : '?');
                _data.url += paramsArr.join('&') + new Date().getTime();//避免cache;
            } else {
                _data.params = paramsArr.join('&');
            }
        }

        //异步对象
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) { //IE
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xhr == null) {
            alert("xhr对象实例化失败!")
            return false;
        }

        //准备异步操作
        xhr.open(_data.method, _data.url, _data.async);
        //设置回调函数
        xhr.onreadystatechange = function () {
            console.log(this.readyState + " " + this.status);
            if (this.readyState == 4) {
                if (this.status == 200) {
                    _data.success(this.responseText);
                } else {
                    _data.error(this.responseText);
                }
            }
        };

        if (_data.method.toUpperCase() === 'GET') {
            xhr.send(null);
        } else {
            //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.send(_data.params);
        }
    }