Ajax库函数（自制）

Ajax

知识点

  • 对象传递参数：参数过多且不固定，使用对象传递（无需考虑参数顺序，个数）

简单版：实现ajax请求的公共方法,参数过多且不固定，使用对象传递参数

  • 用到自制函数createXHR()；

  • [x] 设置对象传参的初始值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //设置初始值
    var _default = {
        url: "",
        type: "get",
        dataType: "json", //->请求回来的内容格式，“json”：JSON格式的对象；“txt”：字符串或JSON格式的字符串
        async: true,
        data: null, //->请求主体的内容（post方式）
        getHead: null, //->readyState===2时执行的回调方法
        success: null //->readyState===4时执行的回调方法
    }

  • [x] 用户的值覆盖默认值

    1
    2
    3
    4
    5
    for (var key in options) {
        if (options.hasOwnProperty(key)) { //只遍历私有的，防止object原型上扩展自己方法
            _default.key = options[key];
        }
    }

  • [x] 判断是否是get请求方式：需要清除缓存

    1
    2
    3
    4
    5
    if (_default.type === "get") {
        //->url有？没
        _default.url.indexOf("?") >= 0 ? _default.url += "&" : _default.ulr += "?"; //indexOf返回查找项位置，或-1
        _default.url += "_=" + Math.random();
    }

  • [x] send Ajax

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    var xhr = createXHR();
        xhr.open(_default.type, _default.url, _default.async);
        xhr.onreadystatechannge = function() {
            if (/^2\d{2}$/.test(xhr.status)) {
                //->readyState===2时做些操作，保证ajax时异步请求
                if (xhr.readyState === 2) {
                    if (typeof _default.getHead === "function") {
                        _default.getHead.call(xhr);
                    }
                }
                //->readyState===4时做些操作
                if (xhr.readyState === 4) {
                    var value = xhr.responseText;
                    //如果传递参数值是json，说明获取的内容是Json对象
                    if (_default.dataType === "json") {
                        value = "JSON" in window ? JSON.parse(value) : eval("(" + value + ")");
                    }
                    _default.success && _default.success.call(xhr, value);
                }
            }
        }
        xhr.send(_default.data);

完整代码

注意点

  • 用到自制函数createXHR；
  • 变成私有方法
  • 在外面使用私有方法时，将私有方法变成全局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
//变成私有方法
~ function() {
    function createXHR() {
        var xhr = null,
            flag = false;
        var ary = [
            function() {
                return new XMLHttpRequest;
            },
            function() {
                return new ActiveXObject("Microsoft.XMLHTTP");
            },
            function() {
                return new ActiveXObject("Msxml2.XMLHTTP");
            },
            function() {
                return new ActiveXObject("Msxml3.XMLHTTP");
            }
        ];
        for (var i = 0, len = ary.length; i < len; i++) {
            var curFn = ary[i];
            try {
                xhr = curFn(); //->如果执行不报错说明当前这个方法兼容,结束循环
                createXHR = curFn; //重新的把createXHR进行重写为小方法
                flag = true;
                break;
            } catch (e) {
                //本次循环出现错误：继续执行下一次循环
            }
        }
        if (!flag) { //->执行完成四个小方法后一个兼容的都没有
            throw new Error("your browser is not support ajax!");
        }
        return xhr;
    }
    //简单版：实现ajax请求的公共方法,参数过多且不固定，使用对象传递（无需考虑参数顺序，个数）用到自制函数createXHR；
    function ajax(options) {
        //设置初始值
        var _default = {
            url: "",
            type: "get",
            dataType: "json", //->请求回来的内容格式，“json”：JSON格式的对象；“txt”：字符串或JSON格式的字符串
            async: true,
            data: null, //->请求主体的内容（post方式）
            getHead: null, //->readyState===2时执行的回调方法
            success: null //->readyState===4时执行的回调方法
        }
        //->使用用户自己传递进来的值覆盖默认值
        for (var key in options) {
            if (options.hasOwnProperty(key)) { //只遍历私有的，防止object原型上扩展自己方法
                _default.key = options[key];
            }
        }
        //->如果当前的请求方式是GET，需要在ulr的末尾加随机数清除缓存
        if (_default.type === "get") {
            //->url有？
            _default.url.indexOf("?") >= 0 ? _default.url += "&" : _default.ulr += "?"; //indexOf返回查找项位置，或-1
            _default.url += "_=" + Math.random();
        }
        //->send Ajax
        var xhr = createXHR();
        xhr.open(_default.type, _default.url, _default.async);
        xhr.onreadystatechannge = function() {
            if (/^2\d{2}$/.test(xhr.status)) {
                //->readyState===2时做些操作，保证ajax时异步请求
                if (xhr.readyState === 2) {
                    if (typeof _default.getHead === "function") {
                        _default.getHead.call(xhr);
                    }
                }
                //->readyState===4时做些操作
                if (xhr.readyState === 4) {
                    var value = xhr.responseText;
                    //如果传递参数值是json，说明获取的内容是Json对象
                    if (_default.dataType === "json") {
                        value = "JSON" in window ? JSON.parse(value) : eval("(" + value + ")");
                    }
                    _default.success && _default.success.call(xhr, value);
                    // if(typeof _default.success==="function"){
                    // 	_default.success.call(xhr);
                    // }
                }
            }
        }
        xhr.send(_default.data);
    }
    window.ajax = ajax; //外面使用时需要变成全局的
}();
//用户传递的对象参数
ajax({
    url: "data.txt",
    type: "post",
    dataType: "json", //->请求回来的内容格式，“json”：JSON格式的对象；“txt”：字符串或JSON格式的字符串
    async: false,
    data: null, //->请求主体的内容（post方式）
    getHead: function(){
    	// this-->xhr当前AJAX对象
    }, 
    success: function(){
    	// this-->xhr当前AJAX对象
    	// data:我们从服务器获取的主体内容
    } 
})